@thi.ng/color-palettes
v1.5.39
Published
Collection of 200+ image based color themes & composable theme query filters
Maintainers
thi.ngReadme
[!NOTE] This is one of 213 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.
🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️
About
Collection of 200+ image based color themes & composable theme query filters. This is a support package for @thi.ng/color..
Themes can be obtained as arrays of CSS hex colors (strings), packed ARGB ints, or normalized LCH/sRGB color vectors (e.g. for WebGL/WebGPU purposes). See thi.ng/color readme for details.
Additionally, the themes/palettes can be iterated, filtered or queried via arbitrary predicate functions and the ones provided:
Single theme accessors:
Iterators:
Provided (composable) filters:
Custom filters can be defines via:
See code examples further below...
Recent additions
| Palettes | | |
|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 254 | 253 | 252 |
| 
| 
| 
|
| 251 | 250 | 249 |
| 
| 
| 
|
| 248 | 247 | 246 |
| 
| 
| 
|
| 245 | 244 | 243 |
| 
| 
| 
|
| 242 | 241 | 240 |
| 
| 
| 
|
| 239 | 238 | 237 |
| 
| 
| 
|
| 236 | 235 | 234 |
| 
| 
| 
|
| 233 | 232 | 231 |
| 
| 
| 
|
| 230 | 229 | 228 |
| 
| 
| 
|
| 227 | 226 | 225 |
| 
| 
| 
|
| 224 | 223 | 222 |
| 
| 
| |
| 221 | 220 | |
All themes
Below all color palettes are shown sorted by median LCH chromacity:
(Please note that for some reason (color profile related) Google Chrome shows the more saturated colors much more muted than they actually are/should be.
Strong
| Palettes | | |
|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 148 | 170 | 154 |
| 
| 
| 
|
| 7 | 161 | 34 |
| 
| | 
|
| 149 | 220 | 177 |
| 
| | |
| 160 | 251 | 247 |
| 
| | 
|
| 142 | 249 | 208 |
| | | 
|
| 240 | 230 | 24 |
| 
| 
| 
|
| 140 | 10 | 147 |
| 
| | |
| 8 | 221 | 246 |
| | 
| 
|
| 239 | 146 | 164 |
| 
| 
| |
| 210 | 191 | 234 |
| 
| 
| |
| 131 | 100 | 222 |
| 
| 
| |
| 22 | 102 | 245 |
| 
| 
| |
| 53 | 16 | 235 |
| 
| 
| 
|
| 44 | 25 | 98 |
| 
| 
| 
|
| 202 | 104 | 105 |
| 
| 
| |
| 11 | 153 | 224 |
| 
| 
| 
|
| 173 | 179 | 26 |
| 
| 
| 
|
| 163 | 40 | 216 |
| 
| 
| 
|
| 42 | 88 | 36 |
| 
| 
| 
|
| 110 | 181 | 74 |
| 
| 
| |
| 38 | 218 | 231 |
| 
| 
| 
|
| 70 | 29 | 76 |
| | 
| 
|
| 241 | 182 | 144 |
| | | 
|
| 229 | 225 | 130 |
| 
| 
| 
|
| 184 | 45 | 198 |
| 
| 
| 
|
| 103 | 150 | 15 |
| 
| 
| 
|
| 12 | 190 | 106 |
| 
| 
| 
|
| 101 | 6 | 133 |
| 
| 
| 
|
| 71 | 59 | 83 |
| 
| 
| 
|
| 192 | 109 | 51 |
| 
| 
| 
|
| 21 | 50 | 2 |
| 
| 
| 
|
| 200 | 194 | 5 |
| 
| 
| 
|
| 49 | 145 | 96 |
| 
| | 
|
| 64 | 248 | 66 |
| 
| 
| 
|
| 174 | 209 | 196 |
| 
| | 
|
| 211 | 228 | 58 |
Medium
| Palettes | | |
|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|
| | 
| 
|
| 242 | 43 | 124 |
| 
| | 
|
| 17 | 252 | 204 |
| 
| 
| 
|
| 122 | 143 | 203 |
| 
| 
| |
| 135 | 205 | 227 |
| 
| 
| 
|
| 207 | 217 | 178 |
| 
| | |
| 81 | 244 | 226 |
| 
| 
| |
| 162 | 206 | 238 |
| 
| 
| 
|
| 128 | 171 | 219 |
| | 
| 
|
| 254 | 141 | 99 |
| 
| 
| 
|
| 127 | 68 | 120 |
| 
| 
| 
|
| 195 | 23 | 85 |
| 
| 
| 
|
| 215 | 67 | 157 |
| 
| 
| 
|
| 35 | 138 | 186 |
| | 
| 
|
| 233 | 47 | 158 |
| 
| 
| 
|
| 134 | 69 | 121 |
| 
| 
| 
|
| 193 | 48 | 156 |
| 
| 
| 
|
| 90 | 125 | 199 |
| 
| 
| |
| 84 | 169 | 236 |
| 
| | 
|
| 1 | 253 | 132 |
| 
| 
| |
| 212 | 97 | 237 |
| 
| 
| |
| 72 | 60 | 250 |
| 
| 
| 
|
| 61 | 0 | 80 |
| 
| 
| 
|
| 3 | 57 | 75 |
| 
| 
| 
|
| 78 | 87 | 77 |
| 
| 
| 
|
| 63 | 55 | 28 |
| 
| 
| 
|
| 39 | 30 | 118 |
Soft
| Palettes | | |
|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|
| 
| 
| 
|
| 33 | 151 | 116 |
| 
| 
| 
|
| 165 | 41 | 9 |
| 
| 
| 
|
| 19 | 159 | 139 |
| 
| 
| 
|
| 152 | 176 | 86 |
| | 
| 
|
| 223 | 136 | 189 |
| 
| 
| 
|
| 89 | 123 | 168 |
| 
| 
| 
|
| 108 | 82 | 111 |
| 
| 
| 
|
| 119 | 129 | 115 |
| | 
| 
|
| 243 | 172 | 175 |
| 
| 
| 
|
| 20 | 213 | 13 |
| 
| 
| 
|
| 117 | 65 | 27 |
| 
| 
| 
|
| 137 | 46 | 107 |
| 
| 
| 
|
| 183 | 197 | 188 |
| 
| 
| 
|
| 31 | 185 | 62 |
| | 
| 
|
| 232 | 92 | 18 |
| 
| 
| 
|
| 126 | 95 | 214 |
| 
| 
| 
|
| 73 | 4 | 180 |
| 
| 
| 
|
| 56 | 155 | 93 |
| 
| 
| 
|
| 94 | 187 | 113 |
| 
| 
| 
|
| 201 | 32 | 54 |
| 
| 
| 
|
| 79 | 91 | 37 |
| 
| 
| 
|
| 52 | 166 | 167 |
Installation
yarn add @thi.ng/color-palettesESM import:
import * as cp from "@thi.ng/color-palettes";Browser ESM import:
<script type="module" src="https://esm.run/@thi.ng/color-palettes"></script>For Node.js REPL:
const cp = await import("@thi.ng/color-palettes");Package sizes (brotli'd, pre-treeshake): ESM: 5.54 KB
Dependencies
Note: @thi.ng/api is in most cases a type-only import (not used at runtime)
Usage examples
Four projects in this repo's /examples directory are using this package:
| Screenshot | Description | Live demo | Source | |:----------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------|:-----------------------------------------------------------|:----------------------------------------------------------------------------------------| | | (Re)Constructing the thi.ng logo using a 2D signed-distance field | Demo | Source | | | Basic hiccup-based canvas drawing | Demo | Source | | | Randomized 4-point 2D color gradient image generator | Demo | Source | | | Image dithering and remapping using indexed palettes | Demo | Source |
Usage
import { asCSS, asRGB } from "@thi.ng/color-palettes";
// get theme for ID
asCSS(7);
// ["#2f1864", "#e40302", "#f25c22", "#d987bd", "#44b6e7", "#e3dadd"]
// get in reverse order
asCSS(7, true);
// ["#e3dadd", "#44b6e7", "#d987bd", "#f25c22", "#e40302", "#2f1864"]
asInt(7).map(x => x.toString(16));
// [ 'ff2f1864', 'ffe40302', 'fff25c22', 'ffd987bd', 'ff44b6e7', 'ffe3dadd']
// ...or as normalized sRGB colors (e.g. for WebGL)
asRGB(7)
// [
// $Color [srgb] { buf: [ 0.1843137254901961, 0.09411764705882353, 0.39215686274509803, 1 ] },
// $Color [srgb] { buf: [ 0.8941176470588236, 0.01176470588235294, 0.00784313725490196, 1 ] },
// $Color [srgb] {