Skip to content

Latest commit

 

History

History

color-palettes

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
test
test
 
 
tools
tools
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
api-extractor.json
api-extractor.json
 
 
package.json
package.json
 
 
tpl.readme.md
tpl.readme.md
 
 
tsconfig.json
tsconfig.json
 
 

README.md

@thi.ng/color-palettes

npm version npm downloads Mastodon Follow

Note

This is one of 199 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
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

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: 4.92 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 - 2024 Karsten Schmidt // Apache License 2.0