What do the contrast ratios mean?

WCAG recommends a ratio of at least 4.5:1 for normal text and 3:1 for large text (AA), or 7:1 for AAA. The badges show how the color performs as text on white and on black.

How is alpha handled?

Enter an 8-digit HEX, rgba() or hsla() value to set transparency. Every output format then includes the alpha channel.

Color Converter

HEX, RGB and HSL with live preview

#4F46E5

Pick color

Any CSS color

RGB

HSLA

Formats

HEX

#4F46E5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

Modern CSS

rgb(79 70 229)

Contrast (WCAG)

Text on white

6.29:1 · AA

Text on black

3.34:1 · AA large

Presets

How to use

Type any CSS color, use the picker or drag the sliders.
Copy the HEX, RGB, HSL or modern CSS syntax you need.
Check the contrast badges before using the color for text.

HEX, RGB and HSL

HEX and RGB describe the same thing: the amount of red, green and blue light. HSL (hue, saturation, lightness) is easier to reason about when designing: shift the hue to find a related color or lower the lightness for a hover state. Modern CSS also accepts the space-separated syntax shown here.

Frequently asked questions

HEX (#fff, #ffffff, #ffffff80), rgb() and rgba(), hsl() and hsla(), and CSS color names such as tomato or rebeccapurple.