dev.colors
colors as “#rrggbb”: RGB/HSL, mixing, lightening, WCAG contrast
Example results generated on 2026-10-08. Ones using
now,todayor randomness will differ when you run them: press Run on any example to run it in your browser, after editing it if you like.
Functions
| function | description |
|---|---|
color(c: str|list) | a color as “#rrggbb” from a name, “#rgb”, “#rrggbb” or [r, g, b] |
rgb(r: num, g: num, b: num) / rgb(c: str|list) | make a color from 0-255 channels, or get a color’s channels |
hsl(h: num, s: num, l: num) / hsl(c: str|list) | make a color from hue (degrees), saturation and lightness (0-100), or get them |
mix(a: str|list, b: str|list, t?: num) | blend from a (t = 0) to b (t = 1), halfway by default |
lighten(c: str|list, amount: num) | raise HSL lightness by amount (0-1) |
darken(c: str|list, amount: num) | lower HSL lightness by amount (0-1) |
grayscale(c: str|list) | the gray with the same perceived brightness |
contrast(a: str|list, b: str|list) | WCAG contrast ratio, 1 to 21; text wants 4.5+ |
swatch(c: str|list) | a colored block plus the hex, for truecolor terminals |
color
color(c: str|list): a color as “#rrggbb” from a name, “#rgb”, “#rrggbb” or [r, g, b]
color("tomato")
# → "#ff6347"
color("#f80")
# → "#ff8800"
color([255, 0, 128])
# → "#ff0080"
rgb
rgb(r: num, g: num, b: num) / rgb(c: str|list): make a color from 0-255 channels, or get a color’s channels
rgb(255, 136, 0)
# → "#ff8800"
"orange".rgb
# → [255, 165, 0]
hsl
hsl(h: num, s: num, l: num) / hsl(c: str|list): make a color from hue (degrees), saturation and lightness (0-100), or get them
hsl(210, 80, 50)
# → "#1980e6"
"teal".hsl
# → [180, 100, 25]
mix
mix(a: str|list, b: str|list, t?: num): blend from a (t = 0) to b (t = 1), halfway by default
mix("red", "blue")
# → "#800080"
mix("white", "black", 25%)
# → "#bfbfbf"
lighten
lighten(c: str|list, amount: num): raise HSL lightness by amount (0-1)
lighten("#3478f6", 20%)
# → "#96b9fa"
darken
darken(c: str|list, amount: num): lower HSL lightness by amount (0-1)
darken("#3478f6", 20%)
# → "#0847bc"
grayscale
grayscale(c: str|list): the gray with the same perceived brightness
grayscale("tomato")
# → "#969696"
See also: invert
contrast
contrast(a: str|list, b: str|list): WCAG contrast ratio, 1 to 21; text wants 4.5+
contrast("white", "black")
# → 21
contrast("#777", "white")
# → 4.48
See also: swatch
swatch
swatch(c: str|list): a colored block plus the hex, for truecolor terminals
swatch("tomato")
# → #ff6347
["red", "gold", "teal"].map(swatch).join(" ")
# → #ff0000 #ffd700 #008080
See also: color
More examples
colors
# named to hex
color("rebeccapurple")
# → "#663399"
# halfway between
mix("red", "blue")
# → "#800080"
# hover shade
darken("#3478f6", 10%)
# → "#0a5aed"
# readable text?
contrast("white", "#777")
# → 4.48
# a palette
(0..5).map(|i| hsl(i * 72, 70, 50))
# → ["#d92626", "#b5d926", "#26d96e", "#266ed9", "#b526d9"]