JSPM

@thi.ng/color-palettes

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

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
208 207 206
205 204 203
202 201 200
199 198 197
196 195 194
193 192 191

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
191 131 100
22 102 53
16 44 25
98 202 104
105 11 153
173 179 26
163 40 42
88 36 110
181 74 38
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
196 58 114

Medium

Palettes
43 124 17
204 122 143
203 135 205
207 178 81
162 206 128
171 141 99
127 68 120
195 23 85
67 157 35
138 186 47
158 134 69
121 193 48
156 90 125
199 84 169
1 132 97
72 60 61
0 80 3
57 75 78
87 77 63
55 28 39

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 13
117 65 27
137 46 107
183 197 188
31 185 62
92 18 126
95 73 4
180 56 155
93 94 187
113 201 32
54 79 91
37 52 166
167 112 14

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.59 KB

Dependencies

Usage examples

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

A selection:

Screenshot Description Live 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"]

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