What color formats does CSS support?

CSS accepts HEX (and 8-digit HEX with alpha), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), lab() and named colors. Color Picker Lab shows HEX, RGB, HSL, HSV and OKLCH for every color.

How do I add transparency in CSS?

Use an 8-digit HEX code (#RRGGBBAA), or rgba()/hsla() with an alpha value. Drag the alpha slider and copy any transparent format.

Which CSS color format should I use?

HEX or RGB for general use, and OKLCH when you need perceptually even shade scales and accessible palettes — it is supported in every major browser.

CSS Color Picker

Pick a color and copy ready-to-paste CSS in any format — HEX, rgb(), hsl(), hsv and oklch(), plus 8-digit HEX with alpha — ready to drop into a stylesheet or custom property.

#8B5CF6 MediumSlateBlue

From image

Tints

Shades

Tones

Perceptual 50→950 scale, computed in OKLCH. Copy it as CSS custom properties using relative-color syntax — each stop keeps the base hue and chroma.

--color-50: oklch(from #8B5CF6 0.97 c h);
--color-100: oklch(from #8B5CF6 0.94 c h);
--color-200: oklch(from #8B5CF6 0.87 c h);
--color-300: oklch(from #8B5CF6 0.78 c h);
--color-400: oklch(from #8B5CF6 0.68 c h);
--color-500: oklch(from #8B5CF6 0.58 c h);
--color-600: oklch(from #8B5CF6 0.5 c h);
--color-700: oklch(from #8B5CF6 0.42 c h);
--color-800: oklch(from #8B5CF6 0.34 c h);
--color-900: oklch(from #8B5CF6 0.26 c h);
--color-950: oklch(from #8B5CF6 0.18 c h);

No saved colors yet. Pick a color and tap Save to keep it here.

Recent

Colors you pick will show up here.

HEX: #8B5CF6
HEX8: #8B5CF6FF
HEX8 (Android): #FF8B5CF6
RGB: rgb(139, 92, 246)
RGB (%): 55%, 36%, 96%
HSL: hsl(258, 90%, 66%)
HSV / HSB: hsv(258, 63%, 96%)
CMYK: cmyk(43%, 63%, 0%, 4%)
OKLCH: oklch(0.6056 0.2189 292.72)
OKLCH (%): oklch(60.56% 0.2189 292.72)
Decimal: 9133302

A 4.96:1 vs black

A 4.23:1 vs white

AA normal ≥ 4.5 Pass
AA large ≥ 3 Pass
AAA normal ≥ 7 Fail
AAA large ≥ 4.5 Pass

Recommended text color: black

CSS contrast-color() contrast-color(#8B5CF6) → black

APCA Lc experimental 74.2 Lc · large / secondary text (white text)

WCAG 2.1 AA/AAA is the compliance floor; APCA is an optional readability metric.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Monochromatic

Roughly 1 in 12 men and 1 in 200 women have some color-vision deficiency. Here is how this color looks under the eight common types.

Dichromacy

Protanopia

#7776D1 MediumSlateBlue

Deuteranopia

#797DC8 MediumPurple

Tritanopia

#89B3AD CadetBlue

Anomalous trichromacy

Protanomaly

#7776D1 MediumSlateBlue

Deuteranomaly

#797DC8 MediumPurple

Tritanomaly

#89B3AD CadetBlue

Monochromacy

Achromatopsia

#7B7B7B Gray

Achromatomaly

#7B7B7B Gray

Make colorblind-safe

Adjusted for deuteranomaly — the most common deficiency — so it stays distinguishable.

#8B48FF BlueViolet

Every CSS color format in one place

Pick a color and Color Picker Lab gives you the value in every format CSS understands — #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) and oklch(0.62 0.19 260) — each one click to copy. Need transparency? Use 8-digit HEX or the rgba()/hsla() forms.

Using colors in CSS

Drop a copied value straight into a rule, or store it as a custom property — --brand: #3B82F6; — and reuse it with var(--brand). For a full design system, export the whole palette as CSS variables, a Tailwind theme, or JSON from the picker’s export menu.

Frequently asked questions

What color formats does CSS support?: CSS accepts HEX (and 8-digit HEX with alpha), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), lab() and named colors. Color Picker Lab shows HEX, RGB, HSL, HSV and OKLCH for every color.
How do I add transparency in CSS?: Use an 8-digit HEX code (#RRGGBBAA), or rgba()/hsla() with an alpha value. Drag the alpha slider and copy any transparent format.
Which CSS color format should I use?: HEX or RGB for general use, and OKLCH when you need perceptually even shade scales and accessible palettes — it is supported in every major browser.