JSPM

@thi.ng/color-palettes

1.2.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 157
  • Score
    100M100P100Q86678F
  • 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

This project is part of the @thi.ng/umbrella monorepo and anti-framework.

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
219 218 217
216 215 214
213 212 211
210 209

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 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

Medium

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

Soft

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

Status

STABLE - used in production

Search or submit any issues for this package

Installation

yarn add @thi.ng/color-palettes

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/color-palettes"></script>

Skypack documentation

For Node.js REPL:

const colorPalettes = await import("@thi.ng/color-palettes");

Package sizes (brotli'd, pre-treeshake): ESM: 4.77 KB

Dependencies

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

Screenshot Description Live demo Source
(Re)Constructing the thi.ng logo using a 2D signed-distance field 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 - 2023 Karsten Schmidt // Apache License 2.0