color-math
ColorMath is an expression parser and evaluator dealing with color representations. Using special grammar it supports various color models, mixing, blending, channels manipulation, scaling, bezier interpolation and more. It also supports transpiling most of the expressions to less.js.
Install
yarn add color-math
or
npm i color-math -S
Usage Example
import * as ColorMath from "color-math"
// will return color which is result of mixing red and green colors
const result = ColorMath.evaluate("red | green")
// prints "#804000" ('result.result' is a chroma.js instance; see link below)
console.log(result.result.hex())
// set color's alpha channel to 30%
result = ColorMath.evaluate("red @a 30%")
console.log(result.result.css()) // prints "rgba(255, 0, 0, 0.3)"
// arithmetic operations with colors and numbers
result = ColorMath.evaluate("(#222 + #444) / 2")
console.log(result.resultStr) // prints "#333333"
// transpile to Less
result = ColorMath.evaluate("rgb 165 42 42 >> .2", { evaluator: new ColorMath.Evaluators.LessEvaluator() })
console.log(result.result) // prints "saturate(rgb(165, 42, 42), 20%, relative)"chroma.js color library is used internally to manipulate colors and wrap results.
Expressions Cheatsheet
Click on expression to visualize result in ColorMath online parser.
Use parenthesis to control evaluation order and build complex expressions.
Ways to Define Color
| Expression | Description |
|---|---|
#ffcc00 |
hexadecimal color representation |
ffcc00 |
hexadecimal color representation without hash symbol |
#fc0 |
short hexadecimal color representation |
fc0 |
short hexadecimal color representation without hash symbol |
skyblue |
color literals from W3C/X11 specification |
rand |
generate random color |
num 33023 |
color from number |
temp 3500 |
color by temperature in Kelvin |
wl 560 |
color from wavelength value |
Color Models
| Expression | Description |
|---|---|
rgb 127 255 212 |
RGB color model |
rgba 135 206 235 75% |
RGB color model with alpha channel |
argb .7 255 99 71 |
RGB color model with alpha channel (first) |
cmyk .43 .12 0 .8 |
CMYK color model |
cmyka 0 .61 .72 0 60% |
CMYK color model with alpha channel |
cmy .5 0 .17 |
CMY color model |
cmya 0 .61 .72 .65 |
CMY color model with alpha channel |
hsl 159.8 100% 75% |
HSL color model |
hsla 197 .71 .73 55% |
HSL color model with alpha channel |
hsv 160 .5 1 |
HSV (also known as HSB) color model |
hsb 197 .43 .92 |
HSB color model (alias for HSV) |
hsva 9 .72 1 50% |
HSV color model with alpha channel |
hsi 161 .36 .78 |
HSI color model |
hsia 196 .30 .75 45% |
HSI color model with alpha channel |
lab 92 (-46) 9.7 |
LAB color model |
laba 79 (-14.8) (-21) 40% |
LAB color model with alpha channel |
lch 92 46.5 168 |
LCH color model |
lcha 79 26 235 35% |
LCH color model with alpha channel |
hcl 168 46.5 92 |
HCL color model (reversed LCH) |
hcla 235 26 79 35% |
HCL color model with alpha channel |
Color Operations
| Expression | Description |
|---|---|
#444 * 2 |
arithmetic operations with numbers |
skyblue - 0xf |
arithmetic operations with numbers |
~red |
invert color |
red | green |
mix colors |
red | {25%} green |
mix colors in variable proportion |
red | {25% hsl} green |
mix colors in variable proportion and specific color model |
red | {hsl} green |
mix colors in specific color model |
hotpink << 50% |
desaturate color |
rgb 165 42 42 >> .2 |
saturate color |
temp 4000 <<< 30% |
darken color |
#fc0 >>> 70% |
lighten color |
pink %% hotpink |
compute WCAG contrast ratio between two colors |
Color Blending
| Expression | Description |
|---|---|
#222 + #444 |
add |
#ccc - #111 |
subtract |
#ff6600 * #ccc |
multiply |
#222 / #444 |
divide |
skyblue <<< tomato |
darken |
skyblue >>> tomato |
lighten |
#ff6600 !* #00ff00 |
screen |
#ff6600 ** #999 |
overlay |
olive <* pink |
hard light |
olive *> pink |
soft light |
ffcc00 ^* ccc |
difference |
ffcc00 ^^ ccc |
exclusion |
ffcc00 !^ ccc |
negate |
indigo << red |
burn |
indigo >> red |
dodge |
Color Channels Manipulation
| Expression | Description |
|---|---|
brown @red |
get channel's value using its name or synonym |
#ffcc00 @g |
get channel's value using its name or synonym |
t 5000 @cmyk.y |
get channel's value using its name or synonym |
aquamarine @a = .3 |
set channel's absolute value |
rgb 5 7 9 @hsl.h 90 |
set channel's absolute value |
#000 @lightness 50% |
set channel's absolute value |
red @a /= 2 |
set relative channel's value |
ffcc00 @rgb.r -= 50 |
set relative channel's value |
tomato @s *= 30% |
set relative channel's value |
olive @n |
get color's numeric value |
fff @n 0 |
set color's absolute numeric value |
#0080ff @n /= 2 |
set color's relative numeric value |
#ffe3cd @t |
get color's temperature in Kelvin |
red @t 3500 |
set color's absolute temperature |
ffe3cd @t += 500 |
set color's relative temperature |
Color Scales
| Expression | Description |
|---|---|
scale (red 0f0 blue) |
scale list of colors (make gradient) |
scale (yellow 008ae5) -> 20 |
grab n equi-distant colors from a color scale |
scale (t 2000 t 6000) |
scale list of colors |
bezier (ff0 red #000) |
perform bezier interpolate of list of colors |
bezier (red 0f0) |
perform bezier interpolate of list of colors |
scale (red:.2 0f0:50%) |
set position of each color (inline) |
scale (red 0f0) @domain (.2 .5) |
set position of each color (as a parameter) |
scale (red 0f0) @pad .25 |
cut off a fraction of the gradient on both sides |
bezier (red 0f0) @pad (.1 .3) |
cut off a fraction of the gradient on both sides |
cubehelix |
Dave Green's cubehelix scaled color scheme |
cubehelix @pad (0 .2) |
cut off a fraction of the gradient on both sides |
cubehelix @start 200 |
start for hue rotation |
cubehelix @rot (-.5) |
number of rotations |
cubehelix @hue .5 |
controls how saturated colors of all hues are |
cubehelix @hue (1 0) |
controls how saturated colors of all hues are |
cubehelix @gamma .7 |
emphasize low or high intensity values |
cubehelix @lt (.3 .8) |
adjust lightness (black to white) |
cubehelix @start 200 @rot .5 |
parameters can be chained |
+scale (black red yellow) |
auto-correct lightness of a scale |
+bezier (yellow 0f0 blue) -> 10 |
auto-correct lightness and grab n equi-distant colors |
Numbers
| Expression | Description |
|---|---|
0b01101001 |
binary |
0o151 |
octal |
105 |
decinal |
0x69 |
hexadecimal |
55% |
percent value |
5 + 10 |
add numbers |
-360 * 0.5 + (100 - 40) |
arithmetic operations |
0xf / 0b1010 |
division |
4 ^ (2 / 4) |
take expression to a specified power |
Lists
| Expression | Description |
|---|---|
red 0f0 blue |
define list of three colors |
(pink >> .5) gold |
define list of two colors |
Brewer Constants
OrRd, PuBu, BuPu, Oranges, BuGn, YlOrBr, YlGn, Reds, RdPu, Greens, YlGnBu, Purples, GnBu, Greys, YlOrRd, PuRd, Blues, PuBuGn, Spectral, RdYlGn, RdBu, PiYG, PRGn, RdYlBu, BrBG, RdGy, PuOr, Set2, Accent, Set1, Set3, Dark2, Paired, Pastel2, Pastel1
Variables and Statements
| Expression | Description |
|---|---|
$col = rgb 255 204 0 |
assign color value to a variable |
$num = 2^8 - 1 |
assign number value to a variable |
$lst = #444 #888 |
assign list value to a variable |
$my = yellow black; bezier $my |
separate statements with semicolon |
A read–eval–print loop (REPL)
npm start
Interpreter will start. Now you can type your expressions.
Demo and documentation
Please go to http://colormath.net/ to test your expressions, visualize results and read about all available features with examples.