Color Converter

Convert colors between HEX, RGB, HSL, HSV and CMYK, preview the color, and check its WCAG contrast ratio against white and black text.

How to use the color Converter

  1. Type or paste a color in any common CSS format: a HEX code such as #d9821f or #fff, rgb(217, 130, 31), or hsl(32, 75%, 49%).
  2. The preview swatch and every other format appear instantly. Copy the one you need.
  3. The result updates instantly as you type. There is no button to press.
  4. Use Copy result to copy the figures, or Copy link to share a link that reopens the color Converter with the same inputs.

How it works

The same color can be written many ways, and different tools expect different ones. Web developers use HEX codes and RGB in CSS, designers often think in HSL or HSV/HSB because hue, saturation and lightness map to how people describe color, and print work uses CMYK. This converter reads any of the CSS formats and shows the color in all of them, with a live preview.

HEX and RGB describe the same thing: the amount of red, green and blue light from 0 to 255 per channel, written in hexadecimal or decimal. HSL turns that into a hue angle on the color wheel (0° red, 120° green, 240° blue), a saturation and a lightness, which makes it easy to create lighter, darker or muted variations of a brand color. The CMYK values are a simple mathematical conversion. Real print output depends on the printer's color profile, so treat them as a starting point and proof important print jobs.

The calculator also checks accessibility. It computes the WCAG 2 contrast ratio between your color and pure white and pure black. Normal text needs at least 4.5:1 to pass level AA and 7:1 for AAA; large text needs 3:1. Use the "best text color" line to choose readable text for buttons and badges.

Formula

HEX #RRGGBB → R, G, B = hexadecimal pairs (00–FF = 0–255) L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|) K = 1 − max(R′,G′,B′), C = (1 − R′ − K)/(1 − K) … contrast = (L₁ + 0.05) / (L₂ + 0.05)

R′, G′, B′ are the channels divided by 255. For contrast, L₁ and L₂ are relative luminances: 0.2126 R + 0.7152 G + 0.0722 B after removing the sRGB gamma curve.

Example

The amber #D9821F is rgb(217, 130, 31): D9 = 217, 82 = 130 and 1F = 31. Its largest channel is red and its smallest is blue, giving a hue of 32°, saturation 75% and lightness 49%, so hsl(32, 75%, 49%). In CMYK it is about 0%, 40%, 86%, 15%. Its contrast with black is about 7.2:1 (AAA) but only about 2.9:1 with white, so black text is the readable choice on this color.

Frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and convert each from hexadecimal to decimal. #FF8800 → FF = 255, 88 = 136, 00 = 0, so rgb(255, 136, 0).

What does a 3-digit HEX code mean?

It's shorthand where each digit is doubled: #F80 means #FF8800. A 4- or 8-digit code adds an alpha (transparency) channel.

Are the CMYK values exact for printing?

No. They are a direct mathematical conversion without a printer color profile. Professional print work uses ICC profiles, so check a proof before a big print run.