CSS Color Converter

Convert any CSS color format instantly — HEX, RGB, RGBA, HSL, HSLA, HWB, LAB, LCH, OKLCH, and 148+ named colors. Includes color harmonies, WCAG contrast checker, and color blindness simulation. Everything runs in your browser.

🎨 Input Color

Enter any CSS color: HEX, RGB(A), HSL(A), HWB, LAB, LCH, OKLCH, or a named color like tomato, rebeccapurple, cornflowerblue.

Alpha (opacity): 100%

0%100%

🌈 Color Output

#3B82F6

HEX#3B82F6

HEX8#3B82F6FF

RGBrgb(59, 130, 246)

RGBArgba(59, 130, 246, 1)

HSLhsl(217, 91%, 60%)

HSLAhsla(217, 91%, 60%, 1)

HWBhwb(217 23% 4%)

LABlab(55.5 5.1 -62.3)

LCHlch(55.5 62.5 274.7)

OKLCHoklch(0.623 0.214 261.3)

CMYKcmyk(76%, 47%, 0%, 4%)

Color Harmonies

Complementary

Analogous

Triadic

Tetradic

👁 WCAG Contrast Checker

Foreground (text)

Background

Sample Text Preview

Contrast Ratio

Rating

AA Normal--

AA Large--

AAA Normal--

AAA Large--

👀 Color Blindness Simulation

Normal Vision

Trichromatic

Protanopia

No red cones (~1%)

Deuteranopia

No green cones (~1%)

Tritanopia

No blue cones (~0.003%)

Achromatopsia

No color (~0.003%)

Protanomaly

Weak red (~1%)

🎨 CSS Named Colors Reference (148 colors)

Frequently Asked Questions

What CSS color formats can I convert between?

This converter supports all major CSS color formats: HEX (#RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, HWB (hwb(h w% b%)), LAB (lab(L a b)), LCH (lch(L C H)), OKLCH (oklch(L C H)), and all 148 CSS named colors. Enter any format and get instant conversion to every other format.

How does the WCAG contrast ratio checker work?

The contrast ratio checker calculates the relative luminance ratio between a foreground text color and a background color according to WCAG 2.1 guidelines. A ratio of at least 4.5:1 is required for normal text to pass AA, 3:1 for large text AA, and 7:1 for AAA compliance. The tool shows you the exact ratio and whether each WCAG level passes or fails.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space supported in modern CSS (oklch(lightness chroma hue)). Unlike HSL, OKLCH ensures that colors with the same lightness value actually look equally bright to human eyes. This makes it ideal for generating consistent color palettes, creating accessible color schemes, and manipulating colors predictably. All modern browsers support the oklch() function in CSS.

Embed this tool