use-color

Type-safe CSS colors for TypeScript

OKLCH Color Space

sRGB

Hue: 260°

Chroma →↑ Lightness

3D View (drag to rotate)

Loading 3D view...

Lightness62%

Chroma0.188

Hue260°

Original

→

Draft

oklch(0.623 0.188 259.823)

Advanced Features

Color Harmonies

Complementary

Triadic

Split Complementary

Analogous

Tetradic

Palette Generator

Light to dark scale (like Tailwind)

vs White

vs Black

Step	White	Black	Best
100	1.3	16.2	B
200	1.7	12.0	B
300	2.4	8.8	B
400	3.3	6.4	B
500	5.0	4.2	W
600	7.7	2.7	W
700	11.7	1.8	W
800	16.5	1.3	W
900	18.2	1.2	W

Green = AAA (7:1+)Yellow = AA (4.5:1+)Red = Fail

Color Vision Simulation

Protanopia

Red-blind (~1% of males)

Deuteranopia

Green-blind (~1% of males)

Tritanopia

Blue-blind (~0.003%)

Achromatopsia

Complete color blindness

APCA Contrast

Lc 61.3

Large Text

Lc 40.4

Large Headlines

APCA (Accessible Perceptual Contrast Algorithm)

Used in WCAG 3.0 draft

Export

:root {
  --color-primary: #3b82f6;
  --color-primary-oklch: oklch(0.623 0.188 259.823);
  --color-primary-rgb: rgb(59, 130, 246);
}

Analysis

Valid CSS

Yes

FormatHEX

Lightness62% (Light)

Luminance0.235

Contrast on white3.68:1

Contrast on black5.71:1

WCAG AA

Pass

APCA Lc61

Gamut

sRGB/P3

Conversions

HEX#3b82f6

RGBrgb(59, 130, 246)

HSLhsl(217.22, 91%, 60%)

OKLCHoklch(0.623 0.188 259.823)

P3color(display-p3 0.3047 0.5035 0.9338)

Manipulations

Lighten / Darken+0.00

Saturate / Desaturate+0.00

Hue Rotation0°

Alpha1.00

Quick Actions

Code

import { color } from 'use-color';

const c = color('#3b82f6');

c.toHex();         // "#3b82f6"
c.toOklchString(); // "oklch(0.623 0.188 259.823)"
c.getLightness();  // 0.62
c.isDark();        // false

c.lighten(0.2);    // Make lighter
c.saturate(0.2);   // More vibrant
c.rotate(30);      // Shift hue