@thi.ng/color-palettes 0.9.9 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -1
- package/README.md +293 -157
- package/api.d.ts +11 -0
- package/api.js +1 -0
- package/binary.d.ts +4 -0
- package/binary.js +6 -0
- package/filter.d.ts +107 -0
- package/filter.js +143 -0
- package/index.d.ts +4 -193
- package/index.js +4 -1531
- package/package.json +23 -5
- package/query.d.ts +106 -0
- package/query.js +135 -0
- package/theme.d.ts +55 -0
- package/theme.js +111 -0
- package/themes.d.ts +3 -0
- package/themes.js +24 -0
package/README.md
CHANGED
|
@@ -19,178 +19,228 @@ This project is part of the
|
|
|
19
19
|
- [Installation](#installation)
|
|
20
20
|
- [Dependencies](#dependencies)
|
|
21
21
|
- [Usage examples](#usage-examples)
|
|
22
|
-
- [Available palettes](#available-palettes)
|
|
23
22
|
- [Usage](#usage)
|
|
24
23
|
- [Authors](#authors)
|
|
25
24
|
- [License](#license)
|
|
26
25
|
|
|
27
26
|
## About
|
|
28
27
|
|
|
29
|
-
Collection of
|
|
28
|
+
Collection of 200+ image based color themes & composable theme query filters. This is a support package for [@thi.ng/color](https://github.com/thi-ng/umbrella/tree/develop/packages/color)..
|
|
29
|
+
|
|
30
|
+
Themes can be obtained as arrays of CSS hex colors (strings), packed ARGB ints,
|
|
31
|
+
or normalized LCH/sRGB color vectors (e.g. for WebGL/WebGPU purposes). See
|
|
32
|
+
[thi.ng/color
|
|
33
|
+
readme](https://github.com/thi-ng/umbrella/tree/develop/packages/color) for
|
|
34
|
+
details.
|
|
35
|
+
|
|
36
|
+
Additionally, the themes/palettes can be iterated, filtered or queried via
|
|
37
|
+
arbitrary predicate functions and the ones provided:
|
|
38
|
+
|
|
39
|
+
Single theme accessors:
|
|
40
|
+
|
|
41
|
+
- [`asCSS()`](https://docs.thi.ng/umbrella/color-palettes/functions/asCSS.html)
|
|
42
|
+
- [`asInt()`](https://docs.thi.ng/umbrella/color-palettes/functions/asInt.html)
|
|
43
|
+
- [`asLCH()`](https://docs.thi.ng/umbrella/color-palettes/functions/asLCH.html)
|
|
44
|
+
- [`asRGB()`](https://docs.thi.ng/umbrella/color-palettes/functions/asRGB.html)
|
|
45
|
+
|
|
46
|
+
Iterators:
|
|
47
|
+
|
|
48
|
+
- [`cssThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/cssThemes.html)
|
|
49
|
+
- [`intThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/intThemes.html)
|
|
50
|
+
- [`lchThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/lchThemes.html)
|
|
51
|
+
- [`rgbThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/rgbThemes.html)
|
|
52
|
+
|
|
53
|
+
Provided (composable) filters:
|
|
54
|
+
|
|
55
|
+
- [`chroma()`](https://docs.thi.ng/umbrella/color-palettes/functions/chroma.html)
|
|
56
|
+
- [`hue()`](https://docs.thi.ng/umbrella/color-palettes/functions/hue.html)
|
|
57
|
+
- [`luma()`](https://docs.thi.ng/umbrella/color-palettes/functions/luma.html)
|
|
58
|
+
- [`proximityLCH()`](https://docs.thi.ng/umbrella/color-palettes/functions/promixityLCH.html)
|
|
59
|
+
- [`proximityRGB()`](https://docs.thi.ng/umbrella/color-palettes/functions/promixityRGB.html)
|
|
60
|
+
|
|
61
|
+
Custom filters can be defines via:
|
|
62
|
+
|
|
63
|
+
- [`defFilter()`](https://docs.thi.ng/umbrella/color-palettes/functions/defFilter.html)
|
|
64
|
+
- [`compFilter()`](https://docs.thi.ng/umbrella/color-palettes/functions/compFilter.html)
|
|
65
|
+
|
|
66
|
+
See [code examples](#usage) further below...
|
|
30
67
|
|
|
31
68
|
## Recent additions
|
|
32
69
|
|
|
33
|
-
| Palettes
|
|
34
|
-
|
|
35
|
-
|  |  |  |
|
|
73
|
+
| 208 | 207 | 206 |
|
|
74
|
+
|  |  |  |
|
|
75
|
+
| 205 | 204 | 203 |
|
|
76
|
+
|  |  |  |
|
|
77
|
+
| 202 | 201 | 200 |
|
|
78
|
+
|  |  |  |
|
|
79
|
+
| 199 | 198 | 197 |
|
|
80
|
+
|  |  |  |
|
|
81
|
+
| 196 | 195 | 194 |
|
|
82
|
+
|  |  |  |
|
|
83
|
+
| 193 | 192 | 191 |
|
|
45
84
|
|
|
46
85
|
## All themes
|
|
47
86
|
|
|
48
87
|
Below all color palettes are shown **sorted by median LCH chromacity**:
|
|
49
88
|
|
|
50
|
-
(Please note that for some reason (
|
|
51
|
-
|
|
52
|
-
be. Any pointers to workarounds/solutions are appreciated...):
|
|
89
|
+
(Please note that for some reason (color profile related) Google Chrome shows
|
|
90
|
+
the more saturated colors much more muted than they actually are/should be.
|
|
53
91
|
|
|
54
92
|
### Strong
|
|
55
93
|
|
|
56
|
-
| Palettes
|
|
57
|
-
|
|
58
|
-
|  |  |  |
|
|
97
|
+
| 148 | 170 | 154 |
|
|
98
|
+
|  |  |  |
|
|
99
|
+
| 7 | 161 | 34 |
|
|
100
|
+
|  |  |  |
|
|
101
|
+
| 149 | 177 | 160 |
|
|
102
|
+
|  |  |  |
|
|
103
|
+
| 142 | 208 | 24 |
|
|
104
|
+
|  |  |  |
|
|
105
|
+
| 140 | 10 | 147 |
|
|
106
|
+
|  |  |  |
|
|
107
|
+
| 8 | 146 | 164 |
|
|
108
|
+
|  |  |  |
|
|
109
|
+
| 191 | 131 | 100 |
|
|
110
|
+
|  |  |  |
|
|
111
|
+
| 22 | 102 | 53 |
|
|
112
|
+
|  |  |  |
|
|
113
|
+
| 16 | 44 | 25 |
|
|
114
|
+
|  |  |  |
|
|
115
|
+
| 98 | 202 | 104 |
|
|
116
|
+
|  |  |  |
|
|
117
|
+
| 105 | 11 | 153 |
|
|
118
|
+
|  |  |  |
|
|
119
|
+
| 173 | 179 | 26 |
|
|
120
|
+
|  |  |  |
|
|
121
|
+
| 163 | 40 | 42 |
|
|
122
|
+
|  |  |  |
|
|
123
|
+
| 88 | 36 | 110 |
|
|
124
|
+
|  |  |  |
|
|
125
|
+
| 181 | 74 | 38 |
|
|
126
|
+
|  |  |  |
|
|
127
|
+
| 70 | 29 | 76 |
|
|
128
|
+
|  |  |  |
|
|
129
|
+
| 182 | 144 | 130 |
|
|
130
|
+
|  |  |  |
|
|
131
|
+
| 184 | 45 | 198 |
|
|
132
|
+
|  |  |  |
|
|
133
|
+
| 103 | 150 | 15 |
|
|
134
|
+
|  |  |  |
|
|
135
|
+
| 12 | 190 | 106 |
|
|
136
|
+
|  |  |  |
|
|
137
|
+
| 101 | 6 | 133 |
|
|
138
|
+
|  |  |  |
|
|
139
|
+
| 71 | 59 | 83 |
|
|
140
|
+
|  |  |  |
|
|
141
|
+
| 192 | 109 | 51 |
|
|
142
|
+
|  |  |  |
|
|
143
|
+
| 21 | 50 | 2 |
|
|
144
|
+
|  |  |  |
|
|
145
|
+
| 200 | 194 | 5 |
|
|
146
|
+
|  |  |  |
|
|
147
|
+
| 49 | 145 | 96 |
|
|
148
|
+
|  |  |  |
|
|
149
|
+
| 64 | 66 | 174 |
|
|
150
|
+
|  |  |  |
|
|
151
|
+
| 196 | 58 | 114 |
|
|
108
152
|
|
|
109
153
|
### Medium
|
|
110
154
|
|
|
111
|
-
| Palettes
|
|
112
|
-
|
|
113
|
-
|  |  |  |
|
|
158
|
+
| 43 | 124 | 17 |
|
|
159
|
+
|  |  |  |
|
|
160
|
+
| 204 | 122 | 143 |
|
|
161
|
+
|  |  |  |
|
|
162
|
+
| 203 | 135 | 205 |
|
|
163
|
+
|  |  |  |
|
|
164
|
+
| 207 | 178 | 81 |
|
|
165
|
+
|  |  |  |
|
|
166
|
+
| 162 | 206 | 128 |
|
|
167
|
+
|  |  |  |
|
|
168
|
+
| 171 | 141 | 99 |
|
|
169
|
+
|  |  |  |
|
|
170
|
+
| 127 | 68 | 120 |
|
|
171
|
+
|  |  |  |
|
|
172
|
+
| 195 | 23 | 85 |
|
|
173
|
+
|  |  |  |
|
|
174
|
+
| 67 | 157 | 35 |
|
|
175
|
+
|  |  |  |
|
|
176
|
+
| 138 | 186 | 47 |
|
|
177
|
+
|  |  |  |
|
|
178
|
+
| 158 | 134 | 69 |
|
|
179
|
+
|  |  |  |
|
|
180
|
+
| 121 | 193 | 48 |
|
|
181
|
+
|  |  |  |
|
|
182
|
+
| 156 | 90 | 125 |
|
|
183
|
+
|  |  |  |
|
|
184
|
+
| 199 | 84 | 169 |
|
|
185
|
+
|  |  |  |
|
|
186
|
+
| 1 | 132 | 97 |
|
|
187
|
+
|  |  |  |
|
|
188
|
+
| 72 | 60 | 61 |
|
|
189
|
+
|  |  |  |
|
|
190
|
+
| 0 | 80 | 3 |
|
|
191
|
+
|  |  |  |
|
|
192
|
+
| 57 | 75 | 78 |
|
|
193
|
+
|  |  |  |
|
|
194
|
+
| 87 | 77 | 63 |
|
|
195
|
+
|  |  |  |
|
|
196
|
+
| 55 | 28 | 39 |
|
|
149
197
|
|
|
150
198
|
### Soft
|
|
151
199
|
|
|
152
|
-
| Palettes
|
|
153
|
-
|
|
154
|
-
|  |  |  |
|
|
203
|
+
| 33 | 151 | 116 |
|
|
204
|
+
|  |  |  |
|
|
205
|
+
| 165 | 41 | 9 |
|
|
206
|
+
|  |  |  |
|
|
207
|
+
| 19 | 159 | 139 |
|
|
208
|
+
|  |  |  |
|
|
209
|
+
| 152 | 176 | 86 |
|
|
210
|
+
|  |  |  |
|
|
211
|
+
| 136 | 189 | 89 |
|
|
212
|
+
|  |  |  |
|
|
213
|
+
| 123 | 168 | 108 |
|
|
214
|
+
|  |  |  |
|
|
215
|
+
| 82 | 111 | 119 |
|
|
216
|
+
|  |  |  |
|
|
217
|
+
| 129 | 115 | 172 |
|
|
218
|
+
|  |  |  |
|
|
219
|
+
| 175 | 20 | 13 |
|
|
220
|
+
|  |  |  |
|
|
221
|
+
| 117 | 65 | 27 |
|
|
222
|
+
|  |  |  |
|
|
223
|
+
| 137 | 46 | 107 |
|
|
224
|
+
|  |  |  |
|
|
225
|
+
| 183 | 197 | 188 |
|
|
226
|
+
|  |  |  |
|
|
227
|
+
| 31 | 185 | 62 |
|
|
228
|
+
|  |  |  |
|
|
229
|
+
| 92 | 18 | 126 |
|
|
230
|
+
|  |  |  |
|
|
231
|
+
| 95 | 73 | 4 |
|
|
232
|
+
|  |  |  |
|
|
233
|
+
| 180 | 56 | 155 |
|
|
234
|
+
|  |  |  |
|
|
235
|
+
| 93 | 94 | 187 |
|
|
236
|
+
|  |  |  |
|
|
237
|
+
| 113 | 201 | 32 |
|
|
238
|
+
|  |  |  |
|
|
239
|
+
| 54 | 79 | 91 |
|
|
240
|
+
|  |  |  |
|
|
241
|
+
| 37 | 52 | 166 |
|
|
242
|
+
|  |  |  |
|
|
243
|
+
| 167 | 112 | 14 |
|
|
194
244
|
|
|
195
245
|
## Status
|
|
196
246
|
|
|
@@ -218,11 +268,16 @@ For Node.js REPL:
|
|
|
218
268
|
const colorPalettes = await import("@thi.ng/color-palettes");
|
|
219
269
|
```
|
|
220
270
|
|
|
221
|
-
Package sizes (brotli'd, pre-treeshake): ESM:
|
|
271
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 4.59 KB
|
|
222
272
|
|
|
223
273
|
## Dependencies
|
|
224
274
|
|
|
225
|
-
|
|
275
|
+
- [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/develop/packages/api)
|
|
276
|
+
- [@thi.ng/base-n](https://github.com/thi-ng/umbrella/tree/develop/packages/base-n)
|
|
277
|
+
- [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/develop/packages/checks)
|
|
278
|
+
- [@thi.ng/color](https://github.com/thi-ng/umbrella/tree/develop/packages/color)
|
|
279
|
+
- [@thi.ng/errors](https://github.com/thi-ng/umbrella/tree/develop/packages/errors)
|
|
280
|
+
- [@thi.ng/hex](https://github.com/thi-ng/umbrella/tree/develop/packages/hex)
|
|
226
281
|
|
|
227
282
|
## Usage examples
|
|
228
283
|
|
|
@@ -236,17 +291,98 @@ A selection:
|
|
|
236
291
|
|:---------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------|:----------------------------------------------------|:---------------------------------------------------------------------------------|
|
|
237
292
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-indexed.jpg" width="240"/> | Image dithering and remapping using indexed palettes | [Demo](https://demo.thi.ng/umbrella/pixel-indexed/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-indexed) |
|
|
238
293
|
|
|
239
|
-
## Available palettes
|
|
240
|
-
|
|
241
294
|
### Usage
|
|
242
295
|
|
|
243
296
|
```ts
|
|
244
|
-
import {
|
|
245
|
-
|
|
246
|
-
|
|
297
|
+
import { asCSS, asRGB } from "@thi.ng/color-palettes";
|
|
298
|
+
|
|
299
|
+
// get theme for ID
|
|
300
|
+
asCSS(7);
|
|
301
|
+
// ["#2f1864", "#e40302", "#f25c22", "#d987bd", "#44b6e7", "#e3dadd"]
|
|
302
|
+
|
|
303
|
+
asInt(7).map(x => x.toString(16));
|
|
304
|
+
// [ 'ff2f1864', 'ffe40302', 'fff25c22', 'ffd987bd', 'ff44b6e7', 'ffe3dadd']
|
|
305
|
+
|
|
306
|
+
// ...or as normalized sRGB colors (e.g. for WebGL)
|
|
307
|
+
asRGB(7)
|
|
308
|
+
// [
|
|
309
|
+
// $Color [srgb] { buf: [ 0.1843137254901961, 0.09411764705882353, 0.39215686274509803, 1 ] },
|
|
310
|
+
// $Color [srgb] { buf: [ 0.8941176470588236, 0.01176470588235294, 0.00784313725490196, 1 ] },
|
|
311
|
+
// $Color [srgb] { buf: [ 0.9490196078431372, 0.3607843137254902, 0.13333333333333333, 1 ] },
|
|
312
|
+
// $Color [srgb] { buf: [ 0.8509803921568627, 0.5294117647058824, 0.7411764705882353, 1 ] },
|
|
313
|
+
// $Color [srgb] { buf: [ 0.26666666666666666, 0.7137254901960784, 0.9058823529411765, 1 ] },
|
|
314
|
+
// $Color [srgb] { buf: [ 0.8901960784313725, 0.8549019607843137, 0.8666666666666667, 1 ] }
|
|
315
|
+
// ]
|
|
316
|
+
|
|
317
|
+
asLCH(7)
|
|
318
|
+
// [
|
|
319
|
+
// $Color [lch] { buf: [ 0.15797892652137088, 0.49615468001539725, 0.842100407558194, 1 ] },
|
|
320
|
+
// $Color [lch] { buf: [ 0.4867485453448416, 0.9761480104088418, 0.11297366790826968, 1 ] },
|
|
321
|
+
// $Color [lch] { buf: [ 0.5945798809377795, 0.8338400414305036, 0.1303121912233266, 1 ] },
|
|
322
|
+
// $Color [lch] { buf: [ 0.6643751725923083, 0.4049427929839432, 0.9415908177143242, 1 ] },
|
|
323
|
+
// $Color [lch] { buf: [ 0.6922992189834556, 0.4061292095121689, 0.662063627151946, 1 ] },
|
|
324
|
+
// $Color [lch] { buf: [ 0.8784094632887679, 0.035905272403327554, 0.9856917205639929, 1 ] }
|
|
325
|
+
// ]
|
|
326
|
+
|
|
327
|
+
// obtaining multiple themes (by ID)
|
|
328
|
+
|
|
329
|
+
[...cssThemes(100, 115, 125)]
|
|
330
|
+
// [
|
|
331
|
+
// [ '#72564a', '#a29aa2', '#129dab', '#f78915', '#e0a657', '#f3d1a9' ],
|
|
332
|
+
// [ '#2f1a0f', '#d9662e', '#a87958', '#c0b5a9', '#e5e1e1', '#879293' ],
|
|
333
|
+
// [ '#081d4f', '#0a3e83', '#5385a6', '#485966', '#aeab9e', '#ebe1c7' ]
|
|
334
|
+
// ]
|
|
335
|
+
|
|
336
|
+
[...rgbThemes(100, 115, 125)]
|
|
337
|
+
// [
|
|
338
|
+
// [
|
|
339
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
|
|
340
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
|
|
341
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
|
|
342
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
|
|
343
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
|
|
344
|
+
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] }
|
|
345
|
+
// ],
|
|
346
|
+
// ...
|
|
347
|
+
// ]
|
|
348
|
+
|
|
349
|
+
// query themes with predicates
|
|
350
|
+
|
|
351
|
+
// pre-compose a combined query filter
|
|
352
|
+
const pastels = compFilter(
|
|
353
|
+
// require all theme colors to have max 25% chroma
|
|
354
|
+
chroma(0, 0.25),
|
|
355
|
+
// require at least 3 theme colors to have min 50% luma
|
|
356
|
+
luma(0.5, 1, 3)
|
|
357
|
+
);
|
|
358
|
+
|
|
359
|
+
[...cssThemes(pastels)]
|
|
360
|
+
// [
|
|
361
|
+
// [ '#453f38', '#746b5d', '#b39777', '#c1c2b2', '#e3dccf', '#f1ede7' ],
|
|
362
|
+
// [ '#857b84', '#b1a7b0', '#d0c7d0', '#e7e0e8', '#faeceb', '#e4e9fa' ]
|
|
363
|
+
// ]
|
|
364
|
+
|
|
365
|
+
// ..or directly provide one or more predicates directly
|
|
366
|
+
|
|
367
|
+
[...cssThemes(chroma(0, 0.25), luma(0.5, 1, 3))]
|
|
368
|
+
// [
|
|
369
|
+
// [ '#453f38', '#746b5d', '#b39777', '#c1c2b2', '#e3dccf', '#f1ede7' ],
|
|
370
|
+
// [ '#857b84', '#b1a7b0', '#d0c7d0', '#e7e0e8', '#faeceb', '#e4e9fa' ]
|
|
371
|
+
// ]
|
|
372
|
+
|
|
373
|
+
// select themes with at least 2 colors near given color (tolerance/distance = 0.33)
|
|
374
|
+
[...cssThemes(proximityRGB("#f00", 0.33, 2))]
|
|
375
|
+
// [
|
|
376
|
+
// [ '#411c20', '#b71022', '#f63a3a', '#c1c3d1', '#8a858e', '#5c555d' ],
|
|
377
|
+
// [ '#f0181f', '#b51c1c', '#b4a8a2', '#dcd4db', '#75787a', '#3c373b' ],
|
|
378
|
+
// [ '#252426', '#ad0401', '#e90408', '#fc9518', '#62c3d9', '#b6e7f2' ],
|
|
379
|
+
// [ '#4e0101', '#850503', '#bb2609', '#e54908', '#f87c23', '#fdc170' ]
|
|
380
|
+
// ]
|
|
247
381
|
```
|
|
248
382
|
|
|
249
|
-
Also see the [swatch
|
|
383
|
+
Also see the [swatch
|
|
384
|
+
generator](https://github.com/thi-ng/umbrella/blob/develop/packages/color-palettes/tools/swatches.ts)
|
|
385
|
+
as another usage example...
|
|
250
386
|
|
|
251
387
|
## Authors
|
|
252
388
|
|