o
mni-color
A fast, powerful, and lightweight color library for TypeScript
Parsing
Conversions
Manipulations
Combinations
Gradients
Harmonies
Color palettes
Accessibility
Pick a starting color
Enter any format, pick a preset, or let omni-color surprise you with a palette-friendly option
LIGHT GREEN
#aadda1
Enter a color
Or choose a preset
red
darkgreen
light blue
#6c18b9
#e6a13799
rgb(232 243 17)
hsla(335 49% 37% / 0.75)
cmyk(0% 0% 0% 100%)
oklch(0.35 0 89.5)
candlelight
fluorescent lamp
blue sky
hsv(170 65% 80%)
lch(82% 60 40)
lab(65 15 -42)
Or randomize
Random
Random (same hue)
Random (suitable for palette)
Color info
Quick conversions, swatches, and temperature
LIGHT GREEN
Light
Alpha: 1
#aadda1
#aadda1ff
HEX
#aadda1
·
#aadda1ff
RGB
rgb(170 221 161)
·
rgb(170.27625 221.2125 161.28750000000002 / 1)
HSL
hsl(111 47% 75%)
·
hsl(111 47% 75% / 1)
CMYK
device-cmyk(23% 0% 27% 13%)
LAB
lab(83.354% -27.695 24.258)
OKLAB
oklab(0.84666 -0.075445 0.061474)
LCH
lch(83.354% 36.817 138.784)
OKLCH
oklch(0.84666 0.097319 140.826)
HWB
hwb(111 63% 13%)
HWBA
hwb(111 63% 13% / 1)
color()
color(srgb 0.66775 0.8675 0.6325)
·
color(display-p3 0.708682 0.86182 0.653916)
·
color(rec2020 0.710642 0.835944 0.621005)
Basic swatch
100
200
300
400
500
600
700
800
900
Extended swatch
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
Color temperature
6,059 K (daylight)
*Note: color temperature is only well-defined for near-white illuminants
Manipulations
Brighten, darken, saturate, desaturate, or go grayscale
Adjust color
Original
#aadda1
Brighten
#ccebc7
Darken
#88d07c
Saturate
#a6e49b
Desaturate
#afd7a8
Grayscale
#bfbfbf
Intensity:
10%
Color space:
HSL
LCH
LAB
Reset
Spin hue
Original
#aadda1
Spun 180°
#d4a1dd
Degrees:
180°
Reset
Combinations
Mix, blend, and average colors with a large variety of customization options
Mix
Original
#aadda1
+Red
#daa275
+Green
#7cb675
+Blue
#7ca2d7
+RGB
#a0859d
Mix type:
Additive
Subtractive
Mix space:
Linear RGB
RGB
HSL
LCH
OKLCH
Reset
Blend
Original
#aadda1
+Red
#d56f51
+Green
#55af51
+Blue
#556fd0
+RGB (N/A)
Not supported
Blend mode:
Normal
Multiply
Screen
Overlay
Blend space:
RGB
HSL
Blend ratio:
Reset
Average
Original
#aadda1
+Red
#daa275
+Green
#7cb675
+Blue
#7ca2d7
+RGB
#a0859d
Mix space:
Linear RGB
RGB
HSL
LCH
OKLCH
Reset
Gradients
Instantly generate gradients through one or more colors
Gradient to
Start
#aadda1
#b4dbb2
#bed8c3
#c8d6d4
Target
#d2d4e5
Target color:
Red
Green
Blue
Black
White
Gray
Random
Stops:
Color space:
RGB
HSL
HSV
LCH
OKLCH
Easing:
Linear
Ease in
Ease out
Ease in/out
Reset
Gradient through red, green, and blue
Start
#aadda1
#dd5841
#cc1a00
#336600
#004d66
#0000ff
Stops:
Color space:
RGB
HSL
HSV
LCH
OKLCH
Interpolation:
Linear
Bezier
Easing:
Linear
Ease in
Ease out
Ease in/out
Reset
Harmonies
Instantly generate complete color harmonies
Complementary
Original
Green
Pink
Split complementary
Original
Green
Pink
Purple
Triadic
Original
Green
Red
Blue
Square
Original
Green
Blue
Pink
Orange
Tetradic
Original
Green
Blue
Pink
Red
Analogous
Original
Green
Green
Green
Yellow
Blue
Monochromatic
Original
Green
Green
Green
Green
Green
Palette
Generate an entire production-ready color palette from a single base color
Complementary
Split complementary
Triadic
Square
Tetradic
Analogous
Monochromatic
Tinted neutrals
chroma factor
:
Tinted neutrals
max chroma
:
Semantic
hue pull
:
Semantic
chroma range:
-
Centered swatches:
Extended swatches:
Reset
Primary
100
200
300
400
500
600
700
800
900
Secondary
100
200
300
400
500
600
700
800
900
Neutrals
100
200
300
400
500
600
700
800
900
Tinted neutrals
100
200
300
400
500
600
700
800
900
Info (semantic)
100
200
300
400
500
600
700
800
900
Positive (semantic)
100
200
300
400
500
600
700
800
900
Negative (semantic)
100
200
300
400
500
600
700
800
900
Warning (semantic)
100
200
300
400
500
600
700
800
900
Special (semantic)
100
200
300
400
500
600
700
800
900
Readability
Check contrast ratios and readability scores against any background color
WCAG contrast ratio
Gn
13.60
Gn
3.72
Gn
1.04
Gn
1.54
Gn
2.59
Gn
3.33
Gn
5.56
Gn
1.44
Gn
2.03
Gn
1.23
APCA readability score
Gn
-78.06
Gn
-54.18
Gn
0.00
Gn
25.04
Gn
-39.80
Gn
-50.20
Gn
-60.83
Gn
20.35
Gn
-31.08
Gn
10.75
Most readable
Your color
on the best background
Best text color
with your color as the background
Code playground
You can experiment with the Color object here
// Return a `Color` or any valid color format (e.g. a hex string) to see the color visualized const color = new Color("#59dede"); console.log("color:", color); const updated = color.mix([new Color(), new Color()], { space: "OKLCH" }); console.log("updated color:", updated); const result = updated.getMonochromaticHarmonyColors()[1]; return result; // rendered below if valid
Output
Returned color
#81a5a2
> color: Color(#59dede)
> updated color: Color(#50706d)
Reset playground
omni-color
API documentation
Source code
ISC license
Accessibility
WCAG 2.2
Understanding contrast
APCA W3C
APCA documentation
Demo libraries
tailwindcss.com
heroicons.com