README.md

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
• Recent additions
• All themes
  • Strong
  • Medium
  • Soft
• Status
• Installation
• Dependencies
• Usage examples
  • Usage
• Authors
• License

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:

• asCSS()
• asInt()
• asLCH()
• asRGB()

Iterators:

• cssThemes()
• intThemes()
• lchThemes()
• rgbThemes()

Provided (composable) filters:

• chroma()
• hue()
• luma()
• proximityLCH()
• proximityRGB()

Custom filters can be defines via:

• defFilter()
• compFilter()

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

• @thi.ng/api
• @thi.ng/base-n
• @thi.ng/checks
• @thi.ng/color
• @thi.ng/errors
• @thi.ng/hex

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

• Karsten Schmidt

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