JSPM

@thi.ng/color-palettes

1.5.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 161
  • Score
    100M100P100Q86611F
  • License Apache-2.0

Collection of 200+ image based color themes & composable theme query filters

Package Exports

  • @thi.ng/color-palettes
  • @thi.ng/color-palettes/api
  • @thi.ng/color-palettes/filter
  • @thi.ng/color-palettes/theme

Readme

@thi.ng/color-palettes

npm version npm downloads Mastodon Follow

[!NOTE] This is one of 206 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-palettes

ESM import:

import * as cp from "@thi.ng/color-palettes";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/color-palettes"></script>

JSDelivr documentation

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] { 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...

Authors

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
}

License

© 2021 - 2025 Karsten Schmidt // Apache License 2.0