omni-color

A fast, powerful, and lightweight color library for TypeScript

Parsing

Pick a starting color

Enter any format, pick a preset, or let omni-color surprise you with a palette-friendly option

DARK RED

#26080c

Enter a color

Or choose a preset

Or randomize

Color info

Quick conversions, swatches, and temperature

DARK RED

Dark

Not suitable for palette

Alpha: 1

#26080c

#26080cff

HEX

#26080c

#26080cff

RGB

rgb(38 8 12)

rgb(37.638 8.262 12.179 / 1)

HSL

hsl(352 64% 9%)

hsl(352 64% 9% / 1)

HSV

hsv(352 78.049% 14.76%)

hsv(352 78.049% 14.76% / 1)

CMYK

device-cmyk(0% 79% 68% 85%)

LAB

lab(5.531% 14.994 3.588)

OKLAB

oklab(0.189301 0.049117 0.013364)

LCH

lch(5.531% 15.418 13.458)

OKLCH

oklch(0.189301 0.050903 15.221)

HWB

hwb(352 3% 85%)

hwb(352 3% 85% / 1)

color()

color(srgb 0.1476 0.0324 0.04776)

color(display-p3 0.133946 0.039499 0.049713)

color(rec2020 0.058258 0.016495 0.017462)

Base swatch

100

200

300

400

500

600

700

800

900

Extended swatch

100

150

200

250

300

350

400

450

500

550

600

650

700

750

800

850

900

950

Color temperature

1,641 K

*Note: color temperature is only well-defined for near-white illuminants

Manipulations

Brighten, darken, saturate, desaturate, or go grayscale

Adjust color

Original

#26080c

Brighten

#4f111a

Darken

#000000

Saturate

#28060a

Desaturate

#230b0e

Grayscale

#171717

Amount:

10%

Color space:

Show code

const color = new Color(#26080cff);

const brightened = color.brighten({ amount: 10, space: HSL });
const darkened = color.darken({ amount: 10, space: HSL });
const saturated = color.saturate({ amount: 10, space: HSL });
const desaturated = color.desaturate({ amount: 10, space: HSL });

Spin hue

Original

#26080c

Spun 180°

#082622

Degrees:

180°

Show code

const color = new Color(#26080cff);

const spun = color.spin(180);

Combinations

Mix, blend, and average colors with a large variety of customization options

Mix

Original

#26080c

+Red

#bd0406

+Green

#195d06

+Blue

#1904bc

+RGB

#8a4289

Mix type:Mix space:

Show code

const color = new Color('#26080cff');

const red = new Color('red');
const green = new Color('green');
const blue = new Color('blue');

const mixedWithRed = color.mixWith([red], { space: 'LINEAR_RGB', type: 'ADDITIVE' });
const mixedWithGreen = color.mixWith([green], { space: 'LINEAR_RGB', type: 'ADDITIVE' });
const mixedWithBlue = color.mixWith([blue], { space: 'LINEAR_RGB', type: 'ADDITIVE' });
const mixedWithAll = color.mixWith([red, green, blue], { space: 'LINEAR_RGB', type: 'ADDITIVE' });

Blend

Original

#26080c

+Red

#920406

+Green

#134406

+Blue

#130486

+RGB (N/A)

Not supported

Blend mode:Blend space:Blend ratio:

Show code

const color = new Color('#26080cff');

const red = new Color('red');
const green = new Color('green');
const blue = new Color('blue');

const blendedWithRed = color.blendWith(red, { mode: 'NORMAL', space: 'RGB', ratio: 0.5 });
const blendedWithGreen = color.blendWith(green, { mode: 'NORMAL', space: 'RGB', ratio: 0.5 });
const blendedWithBlue = color.blendWith(blue, { mode: 'NORMAL', space: 'RGB', ratio: 0.5 });

Average

Original

#26080c

+Red

#bd0406

+Green

#195d06

+Blue

#1904bc

+RGB

#8a4289

Mix space:

Show code

const color = new Color('#26080cff');

const red = new Color('red');
const green = new Color('green');
const blue = new Color('blue');

const averagedWithRed = color.averageWith([red], { space: 'LINEAR_RGB' });
const averagedWithGreen = color.averageWith([green], { space: 'LINEAR_RGB' });
const averagedWithBlue = color.averageWith([blue], { space: 'LINEAR_RGB' });
const averagedWithAll = color.averageWith([red, green, blue], { space: 'LINEAR_RGB' });

Gradients

Instantly generate gradients through one or more colors

Gradient to

Start

#26080c

#4f3727

#786541

#a2945c

Target

#cbc376

Target color:Stops: Color space:Easing:

Show code

const color = new Color('#26080cff');
const targetColor = new Color('#cbc376ff');

const gradient = color.createGradientTo(targetColor, {
  stops: 5,
  space: 'RGB',
  easing: 'LINEAR',
  clamp: true,
});

Gradient through red, green, and blue

Start

#26080c

#a80305

#cc1a00

#336600

#004d66

#0000ff

Stops: Color space:Interpolation:Easing:

Show code

const color = new Color('#26080cff');
const stopColors = ['red', 'green', 'blue'];

const gradient = color.createGradientThrough(stopColors, {
  stops: 6,
  space: 'RGB',
  interpolation: 'LINEAR',
  easing: 'LINEAR',
  clamp: true,
});

Harmonies

Instantly generate complete color harmonies

Complementary

Original

Red

Blue

Split complementary

Original

Red

Blue

Green

Triadic

Original

Red

Blue

Green

Square

Original

Red

Green

Blue

Purple

Tetradic

Original

Red

Yellow

Blue

Spin direction:

Analogous

Original

Red

Pink

Orange

Pink

Yellow

Monochromatic

Original

Red

Black

Red

Palette

Generate an entire production-ready color palette from a single base color

Tinted neutrals chroma factor: Tinted neutrals max chroma: Semantic hue pull:

Semantic chroma range:-

Centered swatches:Extended swatches:

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 (primary)

100

200

300

400

500

600

700

800

900

Tinted neutrals (secondary 1)

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

Rd

1.12

Rd

3.26

Rd

11.65

Rd

18.71

Rd

4.68

Rd

3.64

Rd

2.18

Rd

17.42

Rd

5.97

Rd

14.92

APCA readability score

Rd

0.00

Rd

24.26

Rd

75.45

Rd

104.99

Rd

38.90

Rd

28.40

Rd

17.14

Rd

100.30

Rd

47.41

Rd

90.70

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

Output

Returned color

#233f6c

> color: Color(#936d2f)

> updated color: Color(#6c5023)

omni-colorAPI documentation Source code ISC license

AccessibilityWCAG 2.2 specification WCAG contrast guidance APCA draft source (apca-w3)APCA documentation

Demo librariestailwindcss.com heroicons.com