# 
[](https://www.npmjs.com/package/@thi.ng/color-palettes)
[](https://mastodon.thi.ng/@toxi)
> [!NOTE]
> This is one of 215 standalone projects. LLM-free, human-made and
> cared for software, maintained as part of the
> [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem and
> anti-framework.
>
> 🚀 Please help me to work full-time on these projects by [sponsoring
> me](https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations).
> Thank you! ❤️
- [About](#about)
- [Recent additions](#recent-additions)
- [All themes](#all-themes)
- [Strong](#strong)
- [Medium](#medium)
- [Soft](#soft)
- [Installation](#installation)
- [Dependencies](#dependencies)
- [Usage examples](#usage-examples)
- [Usage](#usage)
- [Authors](#authors)
- [License](#license)
## About
Collection of 200+ image based color themes & composable theme query filters. This is a support package for [@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/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](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color) for
details.
Additionally, the themes/palettes can be iterated, filtered or queried via
arbitrary predicate functions and the ones provided:
Single theme accessors:
- [`asCSS()`](https://docs.thi.ng/umbrella/color-palettes/functions/asCSS.html)
- [`asInt()`](https://docs.thi.ng/umbrella/color-palettes/functions/asInt.html)
- [`asLCH()`](https://docs.thi.ng/umbrella/color-palettes/functions/asLCH.html)
- [`asRGB()`](https://docs.thi.ng/umbrella/color-palettes/functions/asRGB.html)
Iterators:
- [`cssThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/cssThemes.html)
- [`intThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/intThemes.html)
- [`lchThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/lchThemes.html)
- [`rgbThemes()`](https://docs.thi.ng/umbrella/color-palettes/functions/rgbThemes.html)
Provided (composable) filters:
- [`chroma()`](https://docs.thi.ng/umbrella/color-palettes/functions/chroma.html)
- [`hue()`](https://docs.thi.ng/umbrella/color-palettes/functions/hue.html)
- [`luma()`](https://docs.thi.ng/umbrella/color-palettes/functions/luma.html)
- [`proximityLCH()`](https://docs.thi.ng/umbrella/color-palettes/functions/proximityLCH.html)
- [`proximityRGB()`](https://docs.thi.ng/umbrella/color-palettes/functions/proximityRGB.html)
Custom filters can be defines via:
- [`defFilter()`](https://docs.thi.ng/umbrella/color-palettes/functions/defFilter.html)
- [`compFilter()`](https://docs.thi.ng/umbrella/color-palettes/functions/compFilter.html)
See [code examples](#usage) 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
```bash
yarn add @thi.ng/color-palettes
```
ESM import:
```ts
import * as cp from "@thi.ng/color-palettes";
```
Browser ESM import:
```html
```
[JSDelivr documentation](https://www.jsdelivr.com/)
For Node.js REPL:
```js
const cp = await import("@thi.ng/color-palettes");
```
Package sizes (brotli'd, pre-treeshake): ESM: 5.54 KB
## Dependencies
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
- [@thi.ng/base-n](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/base-n)
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
- [@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color)
- [@thi.ng/errors](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/errors)
- [@thi.ng/hex](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/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](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
directory are using this package:
| Screenshot | Description | Live demo | Source |
|:----------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------|:-----------------------------------------------------------|:------------------------------------------------------------------------------------------------|
| 
| (Re)Constructing the thi.ng logo using a 2D signed-distance field | [Demo](https://demo.thi.ng/umbrella/geom-sdf-logo/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-sdf-logo) |
| 
| Basic hiccup-based canvas drawing | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hiccup-canvas-basics) |
| 
| Randomized 4-point 2D color gradient image generator | [Demo](https://demo.thi.ng/umbrella/pixel-gradients/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-gradients) |
| 
| Image dithering and remapping using indexed palettes | [Demo](https://demo.thi.ng/umbrella/pixel-indexed/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-indexed) |
### Usage
```ts
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](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color-palettes/tools/swatches.ts)
as another usage example...
## Authors
- [Karsten Schmidt](https://thi.ng)
If this project contributes to an academic publication, please cite it as:
```bibtex
@misc{thing-color-palettes,
title = "@thi.ng/color-palettes",
author = "Karsten Schmidt",
note = "https://thi.ng/color-palettes",
year = 2021
}
```
## License
© 2021 - 2026 Karsten Schmidt // Apache License 2.0