Color converter

About the Color Converter & Contrast Checker

Introduction

The same color can be written in many ways – #3f6b0a, rgb(63 107 10), hsl(87 83% 23%) or oklch(47.7% 0.129 132.5) – and every tool, framework and design file seems to want a different one. This converter reads any CSS color and gives you all common formats at once, lets you fine-tune it with sliders, builds a matching set of shades, and checks whether text in that color is readable according to the WCAG accessibility guidelines.

How to use it

1. Type or paste a color in any CSS syntax – hex, rgb(), hsl(), hwb(), lab(), oklch() or a name like rebeccapurple. Click the swatch for your system color picker, or use Pick from screen (Chrome and Edge) to grab a color from any window.

2. Adjust it with sliders in OKLCH, HSL or RGB; the tracks show what each change will look like. Every format on the right updates instantly and has a copy button.

3. Click a shade (50–950, like Tailwind CSS palettes) to jump to a lighter or darker version of the same hue.

4. In WCAG contrast, set the background. The ratio, the pass/fail result for every level and a live preview update immediately. If the contrast is too low, one click applies the closest text color that passes AA or AAA.

Short links: develzone.org/color, /hex2rgb, /oklch and /contrast. The address bar always holds the current colors, so a link shares exactly what you see. Pasting a color into the search box on the home page opens it here.

Which format should I use?

• HEX – compact and universal: design tools, brand guides, older code.

• RGB – how screens mix light; needed for canvas, image processing and many APIs.

• HSL – hue, saturation, lightness; intuitive, but its "lightness" is not what the eye sees: yellow and blue at 50 % look very different.

• OKLCH – lightness, chroma, hue in a perceptual color space (Björn Ottosson, 2020). Equal steps look equal, so changing only the hue keeps the same visual brightness – ideal for design systems, dark modes and generated palettes. It is supported in all modern browsers and used by Tailwind CSS v4. OKLCH can also describe colors beyond sRGB that wide-gamut (Display P3) screens can show; the tool warns you when that happens and shows the closest sRGB fallback.

• LAB / OKLAB – the color spaces behind color-difference calculations and smooth gradients.

WCAG contrast explained

The Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) measure the contrast ratio between text and background, from 1:1 (identical) to 21:1 (black on white):

• AA – at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold). This is the level required by most accessibility laws, including the European Accessibility Act and ADA case law.

• AAA – at least 7:1 for normal and 4.5:1 for large text.

• Non-text contrast – icons, input borders and focus indicators need 3:1.

The ratio is truncated, never rounded up – 4.499:1 does not pass AA. Semi-transparent text is blended over the background before measuring, because that is the color the reader actually sees.

Privacy

All conversions and checks run in your browser; nothing is sent to a server.

Interesting facts

• CSS knows 148 named colors. rebeccapurple (#663399) was added in 2014 in memory of Rebecca Meyer, daughter of CSS pioneer Eric Meyer.

• About 1 in 12 men and 1 in 200 women have a color-vision deficiency – one more reason never to rely on color alone and to keep contrast high.

• Need to embed an image in CSS instead of a color? Try the Image to Base64 converter.