[!NOTE] This is one of 192 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! ❤️
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...
| Palettes | ||
|---|---|---|
 |
 |
 |
| 219 | 218 | 217 |
 |
 |
 |
| 216 | 215 | 214 |
 |
 |
 |
| 213 | 212 | 211 |
 |
 |
|
| 210 | 209 |
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.
| Palettes | ||
|---|---|---|
 |
 |
 |
| 148 | 170 | 154 |
 |
 |
 |
| 7 | 161 | 34 |
 |
 |
 |
| 149 | 177 | 160 |
 |
 |
 |
| 142 | 208 | 24 |
 |
 |
 |
| 140 | 10 | 147 |
 |
 |
 |
| 8 | 146 | 164 |
|
 |
 |
| 210 | 191 | 131 |
 |
 |
 |
| 100 | 22 | 102 |
 |
 |
 |
| 53 | 16 | 44 |
 |
 |
 |
| 25 | 98 | 202 |
 |
 |
 |
| 104 | 105 | 11 |
 |
 |
 |
| 153 | 173 | 179 |
 |
 |
 |
| 26 | 163 | 40 |
|
 |
 |
| 216 | 42 | 88 |
 |
 |
 |
| 36 | 110 | 181 |
 |
 |
|
| 74 | 38 | 218 |
 |
 |
 |
| 70 | 29 | 76 |
 |
 |
 |
| 182 | 144 | 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 | 66 | 174 |
|
 |
|
| 209 | 196 | 211 |
| Palettes | ||
|---|---|---|
 |
 |
 |
| 43 | 124 | 17 |
 |
 |
 |
| 204 | 122 | 143 |
 |
 |
 |
| 203 | 135 | 205 |
 |
|
 |
| 207 | 217 | 178 |
 |
 |
 |
| 81 | 162 | 206 |
 |
 |
|
| 128 | 171 | 219 |
 |
 |
 |
| 141 | 99 | 127 |
 |
 |
 |
| 68 | 120 | 195 |
 |
 |
|
| 23 | 85 | 215 |
 |
 |
 |
| 67 | 157 | 35 |
 |
 |
 |
| 138 | 186 | 47 |
 |
 |
 |
| 158 | 134 | 69 |
 |
 |
 |
| 121 | 193 | 48 |
 |
 |
 |
| 156 | 90 | 125 |
 |
 |
 |
| 199 | 84 | 169 |
 |
 |
|
| 1 | 132 | 212 |
 |
 |
 |
| 97 | 72 | 60 |
 |
 |
 |
| 61 | 0 | 80 |
 |
 |
 |
| 3 | 57 | 75 |
 |
 |
 |
| 78 | 87 | 77 |
 |
 |
 |
| 63 | 55 | 28 |
 |
 |
 |
| 39 | 30 | 118 |
| Palettes | ||
|---|---|---|
 |
 |
 |
| 33 | 151 | 116 |
 |
 |
 |
| 165 | 41 | 9 |
 |
 |
 |
| 19 | 159 | 139 |
 |
 |
 |
| 152 | 176 | 86 |
 |
 |
 |
| 136 | 189 | 89 |
 |
 |
 |
| 123 | 168 | 108 |
 |
 |
 |
| 82 | 111 | 119 |
 |
 |
 |
| 129 | 115 | 172 |
 |
 |
|
| 175 | 20 | 213 |
 |
 |
 |
| 13 | 117 | 65 |
 |
 |
 |
| 27 | 137 | 46 |
 |
 |
 |
| 107 | 183 | 197 |
 |
 |
 |
| 188 | 31 | 185 |
 |
 |
 |
| 62 | 92 | 18 |
 |
 |
|
| 126 | 95 | 214 |
 |
 |
 |
| 73 | 4 | 180 |
 |
 |
 |
| 56 | 155 | 93 |
 |
 |
 |
| 94 | 187 | 113 |
 |
 |
 |
| 201 | 32 | 54 |
 |
 |
 |
| 79 | 91 | 37 |
 |
 |
 |
| 52 | 166 | 167 |
STABLE - used in production
Search or submit any issues for this package
yarn add @thi.ng/color-palettesESM import:
import * as cp from "@thi.ng/color-palettes";Browser ESM import:
<script type="module" src="https://cdn.skypack.dev/@thi.ng/color-palettes"></script>For Node.js REPL:
const cp = await import("@thi.ng/color-palettes");Package sizes (brotli'd, pre-treeshake): ESM: 4.79 KB
Several 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 |
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] { buf: [ 0.9490196078431372, 0.3607843137254902, 0.13333333333333333, 1 ] },
// $Color [srgb] { buf: [ 0.8509803921568627, 0.5294117647058824, 0.7411764705882353, 1 ] },
// $Color [srgb] { buf: [ 0.26666666666666666, 0.7137254901960784, 0.9058823529411765, 1 ] },
// $Color [srgb] { buf: [ 0.8901960784313725, 0.8549019607843137, 0.8666666666666667, 1 ] }
// ]
asLCH(7)
// [
// $Color [lch] { buf: [ 0.15797892652137088, 0.49615468001539725, 0.842100407558194, 1 ] },
// $Color [lch] { buf: [ 0.4867485453448416, 0.9761480104088418, 0.11297366790826968, 1 ] },
// $Color [lch] { buf: [ 0.5945798809377795, 0.8338400414305036, 0.1303121912233266, 1 ] },
// $Color [lch] { buf: [ 0.6643751725923083, 0.4049427929839432, 0.9415908177143242, 1 ] },
// $Color [lch] { buf: [ 0.6922992189834556, 0.4061292095121689, 0.662063627151946, 1 ] },
// $Color [lch] { buf: [ 0.8784094632887679, 0.035905272403327554, 0.9856917205639929, 1 ] }
// ]
// obtaining multiple themes (by ID)
[...cssThemes(100, 115, 125)]
// [
// [ '#72564a', '#a29aa2', '#129dab', '#f78915', '#e0a657', '#f3d1a9' ],
// [ '#2f1a0f', '#d9662e', '#a87958', '#c0b5a9', '#e5e1e1', '#879293' ],
// [ '#081d4f', '#0a3e83', '#5385a6', '#485966', '#aeab9e', '#ebe1c7' ]
// ]
[...rgbThemes(100, 115, 125)]
// [
// [
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] },
// $Color [srgb] { offset: 0, stride: 1, buf: [Array] }
// ],
// ...
// ]
// query themes with predicates
// pre-compose a combined query filter
const pastels = compFilter(
// require all theme colors to have max 25% chroma
chroma(0, 0.25),
// require at least 3 theme colors to have min 50% luma
luma(0.5, 1, 3)
);
[...cssThemes(pastels)]
// [
// [ '#453f38', '#746b5d', '#b39777', '#c1c2b2', '#e3dccf', '#f1ede7' ],
// [ '#857b84', '#b1a7b0', '#d0c7d0', '#e7e0e8', '#faeceb', '#e4e9fa' ]
// ]
// ..or directly provide one or more predicates directly
[...cssThemes(chroma(0, 0.25), luma(0.5, 1, 3))]
// [
// [ '#453f38', '#746b5d', '#b39777', '#c1c2b2', '#e3dccf', '#f1ede7' ],
// [ '#857b84', '#b1a7b0', '#d0c7d0', '#e7e0e8', '#faeceb', '#e4e9fa' ]
// ]
// select themes with at least 2 colors near given color (tolerance/distance = 0.33)
[...cssThemes(proximityRGB("#f00", 0.33, 2))]
// [
// [ '#411c20', '#b71022', '#f63a3a', '#c1c3d1', '#8a858e', '#5c555d' ],
// [ '#f0181f', '#b51c1c', '#b4a8a2', '#dcd4db', '#75787a', '#3c373b' ],
// [ '#252426', '#ad0401', '#e90408', '#fc9518', '#62c3d9', '#b6e7f2' ],
// [ '#4e0101', '#850503', '#bb2609', '#e54908', '#f87c23', '#fdc170' ]
// ]Also see the swatch generator as another usage example...
If this project contributes to an academic publication, please cite it as:
@misc{thing-color-palettes,
title = "@thi.ng/color-palettes",
author = "Karsten Schmidt",
note = "https://thi.ng/color-palettes",
year = 2021
}© 2021 - 2024 Karsten Schmidt // Apache License 2.0