Color Converter

Type a colour in any notation and get every other format back instantly — hex to RGB, HSL, HSV, CMYK and OKLCH, alpha included. Generate a tint and shade ramp from it, and check the WCAG contrast ratio against any background.

How to use Color Converter

  1. Enter a colour in any format, or use the colour picker to choose one visually.
  2. Read every conversion at once: HEX, RGB, HSL, HSV, CMYK and OKLCH, each copyable in one click.
  3. Adjust the alpha slider to produce transparent variants in the notations that support it.
  4. Copy any swatch from the generated tints and shades ramp to build a palette around your base colour.
  5. Set a background colour in the contrast checker and read the WCAG ratio with AA and AAA pass badges.

About Color Converter

Every colour on a screen is the same three numbers underneath; the notations differ only in how they let you reason about them. Hex and RGB describe the light being emitted, which is precise but unintuitive — nothing about #3B82F6 tells you it is a mid blue. HSL and HSV restate the same value as hue, saturation and lightness or brightness, which is how designers actually think: keep the hue, drop the lightness, and you have a hover state.

The newer entry is OKLCH, and it is worth understanding because it fixes a genuine flaw. In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same lightness while looking wildly different in brightness, so any palette generated by stepping L produces inconsistent contrast. OKLCH is built on the Oklab perceptual model, where equal numeric steps correspond to equal perceived steps — which is why design systems have moved to it for generating scales. This converter computes it properly, through linear sRGB into Oklab and out to polar coordinates.

The contrast checker applies the WCAG 2.2 formula: relative luminance of each colour, then (L1 + 0.05) / (L2 + 0.05). Ratios are shown against the background you choose and against pure white and black, with AA and AAA badges for both normal and large text, because the thresholds differ — 4.5:1 and 3:1 at AA, 7:1 and 4.5:1 at AAA. Checking a colour at the moment you pick it is far cheaper than discovering the failure in an accessibility audit six months later.

Frequently asked questions

How do I convert HEX to RGB by hand?

Split the six digits into three pairs and read each as a hexadecimal number: #3B82F6 is 3B = 59, 82 = 130, F6 = 246, so rgb(59, 130, 246). Three-digit shorthand doubles each digit, and an eighth pair of digits is the alpha channel from 00 to FF.

What is OKLCH and should I use it?

OKLCH is a perceptually uniform colour space now supported in all major browsers. Unlike HSL, equal changes in its lightness value look equally different to the eye, so palettes generated by varying L stay consistent across hues. It is the best choice for building systematic colour scales in CSS.

Why does my CMYK conversion not match my printer?

Because CMYK is device-dependent. A true conversion needs an ICC profile for the specific press, ink and paper. The naive formula used here — and by every browser-based tool — gives a close approximation for on-screen reference, not a print-ready separation.

What contrast ratio do I need?

WCAG 2.2 requires at least 4.5:1 for normal body text and 3:1 for large text at AA, rising to 7:1 and 4.5:1 at AAA. Large text means 18.66px bold or 24px regular and above. The checker shows the ratio and every pass or fail badge.

Does HSL alpha work everywhere?

Yes in current browsers. Modern CSS accepts hsl(217 91% 60% / 50%) as well as the older hsla() form, and both are produced here. The same applies to rgb() with a slash-separated alpha.

How are the tints and shades calculated?

Tints mix the base colour progressively towards white and shades towards black, in even steps. Each swatch is copyable as hex so you can lift a whole ramp into a design token file or a Tailwind config.

Related tools

All developer tools · Browse all 56 free tools →