Color converter and contrast checker

How to use it

1. Type the color: #5be49b, rgb(91 228 155), hsl(148 72% 63%), hwb(), oklch() or a name such as rebeccapurple. The square next to the field opens the system color picker.
2. Every notation appears on the right — HEX with and without alpha, RGB in three spellings, HSL, HWB, CMYK, OKLCH and the nearest CSS name. Each row has its own Copy button.
3. In WCAG contrast set the background color to get the ratio and the AA and AAA verdicts for body and large text. The ⇅ button swaps text and background.
4. Below that are 11 shades of the same hue and five harmonies — complementary, analogous, triadic, split complementary, tetradic. Clicking any swatch copies its HEX.

What the converter reads and what it returns

The tool accepts every color notation you meet in CSS, in a Figma file or in an ad account: short and long HEX (#abc, #aabbcc, #aabbccdd with alpha), rgb() and rgba() with commas or with spaces, hsl() and hsla(), hwb(), oklch(), and the 148 named CSS colors plus transparent. Everything comes back at once, so there is no mode to switch: HEX for CSS, RGB for Photoshop and Canva, HSL for building shades, CMYK for print, OKLCH for a modern design system.

CMYK is computed with the plain formula from sRGB, with no color profile involved. Accurate print work still needs the profile your printer uses, but for deciding whether a color will go muddy this is enough. OKLCH goes sRGB to linear RGB to OKLab by the formulas Björn Ottosson published in 2020; inside the sRGB gamut the result matches what the browser shows for the same value.

Why the contrast ratio matters

The contrast ratio is the relation between the luminance of text and background, from 1 to 21. WCAG 2.x asks for at least 4.5:1 for body text and 3:1 for large text (24px, or 19px bold) at level AA; level AAA is 7:1 and 4.5:1. This is not only an accessibility question. Google Ads and Meta reject creatives whose text cannot be read, and a grey disclaimer on a pale landing page that nobody can make out is grounds for an advertiser complaint. Check the button color against the banner background here before you upload twenty variants.

What the shades and harmonies are for

• The shade scale — 11 tones of one hue from near-white to near-black, stepped through HSL lightness. Convenient for taking a background, a border and a hover state out of a single color instead of guessing by eye.
• Complementary — the color opposite on the wheel (+180°): a contrasting accent for a CTA button on a brand background.
• Triadic and tetradic — three or four evenly spaced colors, which is what charts and infographics need.
• Analogous (±30°) is a quiet palette for backgrounds and secondary elements; split complementary is a softer version of the straight opposite.

Questions