Function oriented library for color manipulation 🧪.

Filter,sort,query and generate color tokens from ArrayLike and Map (or plain objects) collections using their attributes/properties. Also provides functions for manipulating individual color tokens too.

Demos

sortBy

Functions for sorting collections of color using their properties.

sortBySaturation

Sorts colors by saturation value in `asc` order

#a3a3a3

#a8a29e

#a1a1aa

#9ca3af

#94a3b8

#38bdf8

#2dd4bf

#60a5fa

#34d399

#f472b6

#fb7185

#f87171

#a78bfa

#c084fc

#4ade80

#fb923c

#e879f9

#fbbf24

#facc15

#a3e635

sortByLightness

Sorts colors by lightness value in `asc` order

#a78bfa

#f87171

#c084fc

#fb7185

#f472b6

#60a5fa

#94a3b8

#a1a1aa

#9ca3af

#a3a3a3

#a8a29e

#e879f9

#fb923c

#38bdf8

#34d399

#2dd4bf

#4ade80

#fbbf24

#facc15

#a3e635

sortByLuminance

Sorts colors by luminance value in `asc` order

#f87171

#a78bfa

#fb7185

#f472b6

#c084fc

#94a3b8

#a1a1aa

#60a5fa

#9ca3af

#a3a3a3

#a8a29e

#e879f9

#fb923c

#38bdf8

#34d399

#2dd4bf

#4ade80

#fbbf24

#facc15

#a3e635

sortByDistance

Sorts colors by the distance from 'brown' in `asc` order

#f87171

#fb7185

#fb923c

#f472b6

#a8a29e

#a3a3a3

#a1a1aa

#9ca3af

#94a3b8

#fbbf24

#e879f9

#c084fc

#a78bfa

#facc15

#60a5fa

#38bdf8

#2dd4bf

#34d399

#4ade80

#a3e635

sortByContrast

Sorts colors by contrast value in `asc` order against black

#f87171

#a78bfa

#fb7185

#f472b6

#c084fc

#94a3b8

#a1a1aa

#60a5fa

#9ca3af

#a3a3a3

#a8a29e

#e879f9

#fb923c

#38bdf8

#34d399

#2dd4bf

#4ade80

#fbbf24

#facc15

#a3e635

sortByHue

Sorts colors by hue angle in `asc` order

#fb7185

#f87171

#fb923c

#fbbf24

#facc15

#a3e635

#4ade80

#34d399

#2dd4bf

#38bdf8

#94a3b8

#9ca3af

#60a5fa

#a1a1aa

#a3a3a3

#a8a29e

#a78bfa

#c084fc

#e879f9

#f472b6

Demos

colors

Functions for returning swatches. Also contains the `load` and `color` chains.

tailwindColors

Returns the swatches of color families at 300

#cbd5e1

#d1d5db

#d4d4d8

#d4d4d4

#d6d3d1

#fca5a5

#fdba74

#fcd34d

#fde047

#bef264

#86efac

#6ee7b7

#5eead4

#7dd3fc

#93c5fd

#c4b5fd

#d8b4fe

#f0abfc

#f9a8d4

#fda4af

Demos

filterBy

Functions for filtering collections of color using `start` and `end` ranges

filterByContrast

Filters color by relative contrast

#fbbf24

#facc15

#a3e635

filterByHue

Filters color by hue

#fbbf24

#facc15

#a3e635

#4ade80

#34d399

#2dd4bf

filterByLuminance

Filters color by luminance

#fbbf24

#facc15

#a3e635

#4ade80

#2dd4bf

filterByLightness

Filters color by lightness

#94a3b8

#9ca3af

#a1a1aa

#a3a3a3

#a8a29e

#f87171

#60a5fa

#a78bfa

#c084fc

#e879f9

#f472b6

#fb7185

filterByDistance

Filters color by distance

#fbbf24

#facc15

#a3e635

filterByChroma

Filters color by saturation

#fb923c

#fbbf24

#facc15

#a3e635

#e879f9

Demos

generators

Functions for generating custom color scales and palettes.

discoverPalettes

Takes an array of colors and finds the best matches for a set of predefined palettes.

#310000

#3e0000

#4e0000

#164100

earthtone

Creates a scale of a spline interpolation between an earthtone and a color.

#6a5c52

#816a63

#b38d86

#e6b0ac

#ffc1be

hueShift

Generates a palette of hue shifted colors

#3f0101

#2b1800

#002620

#2f1500

#321300

#3f0007

#3e0000

#561a17

#743356

#915077

#268fad

#cb8ebe

#fcaca7

interpolateSpline

Returns a spline interpolator function with customizable interpolation methods

#b2c3f1

#2dd0f5

#00d5ae

#6aca4c

#c5b722

#fba859

#010101

#f3bac1

pairedScheme

Creates a scheme that consists of a scheme color that is incremented by a hueStep to get the final hue to pair with

#008000

#348e2a

#79b36f

#cfe4cb

pastel

Creates a pastel variant of a color

#81f281