Color converter: HEX, RGB, HSL, OKLCH, CMYK.

HEX and RGB describe the same thing: the red, green and blue intensities of an sRGB colour, from 0 to 255, written as hexadecimal pairs or decimal numbers. HSL rearranges those values into hue, saturation and lightness, which is easier to reason about when you want a lighter or less saturated version of a colour. CMYK expresses a colour as cyan, magenta, yellow and black ink percentages for print.

OKLCH is the newest of the five in everyday CSS. It is part of CSS Color Level 4 and is supported in all current major browsers. It describes a colour by perceived lightness (L), chroma (C, roughly colourfulness) and hue (H), in the OKLab colour space designed by Björn Ottosson so that equal steps look like equal changes to the human eye.

The converter accepts any of these formats, in modern space-separated syntax or the older comma syntax, and shows all five at once. Alpha values are accepted and ignored, because the conversions are about the colour itself.

HSL lightness is not perceptual. hsl(60 100% 50%), a yellow, looks far brighter than hsl(240 100% 50%), a blue, even though both say 50% lightness. Rotate the hue in HSL to build a palette and the results jump around in brightness, which is why HSL palettes often need hand-tuning and why text contrast changes unpredictably across hues.

In OKLCH, colours with the same L look equally light, so you can rotate hue and keep contrast steady, and lighten or darken a colour without its hue drifting toward purple or grey as it does in HSL. That is why this tool builds every harmony, tint, shade and scale in OKLCH. Some OKLCH colours lie outside the sRGB gamut that most screens show; when that happens the tool lowers chroma, keeping lightness and hue, until the colour fits.

Colour harmonies are hue relationships from the colour wheel. Complementary uses the opposite hue (180°) for maximum contrast; analogous uses neighbours 30° either side for a calm, related palette; triadic uses three hues 120° apart; split-complementary uses the two hues next to the complement; tetradic uses four hues 90° apart. They are starting points, not rules: most interfaces use one brand hue, neutrals and one or two accents.

Tints move a colour toward white and shades toward black. Here they are calculated in OKLCH so that each step is a similar visual jump, and chroma tapers off at the extremes the way real paint and printed colour do, which avoids the chalky pastels and muddy darks of simple mixing.

Design systems typically need 10 or 11 steps of each colour: very light backgrounds at 50 and 100, borders at 200 and 300, the main brand colour around 500 or 600, and dark text and surfaces at 800 to 950. Tailwind CSS popularised the 50 to 950 naming, and since version 4 its default palette is defined in OKLCH.

The generator follows the lightness curve and chroma profile of Tailwind's default scales at your colour's hue. Your exact colour is kept unchanged at the step whose lightness is closest, marked with a dot, and the other steps are built around it. Export it as a Tailwind v4 @theme block (which creates utilities such as bg-brand-500), as plain CSS custom properties in HEX, or as JSON for design token tools. Our design system explainer covers how teams organise these tokens, and Tailwind vs Bootstrap compares the frameworks.

A colour is only useful if text on it, or the colour as text, is readable. For every base colour the tool shows the WCAG 2 contrast ratio against white and black and which one reads better. 4.5:1 is the AA minimum for body text and 3:1 for large text and interface components such as icons and input borders.

Many brand colours land in the awkward middle, where neither white nor black text passes AA. The usual fix is to use a darker step from the scale, often 600 or 700, for buttons with white text. For any specific pair, the colour contrast checker calculates the exact ratio and suggests the nearest passing shade; our web accessibility guide explains the wider requirements.

The CMYK values here use the standard device-independent formula: convenient for a quick reference, but not what a printer will produce. Real print conversion depends on the paper, the press and an ICC colour profile, and many bright screen colours, especially saturated blues and greens, cannot be printed at all. For anything going to press, convert in a design tool with the profile your printer specifies and ask for a proof.

Raw scales are the first layer of a colour system. Most teams then add semantic tokens on top, such as --color-surface, --color-text-muted, --color-accent and --color-danger, which point at steps of the scale. Components use only the semantic names, so a rebrand or a dark theme means changing which step each token points to, not editing every component.

Dark mode is the clearest example. In a light theme the surface might be brand-50 and body text brand-950; in a dark theme they swap toward brand-950 and brand-50, with accents moving a step or two lighter so they keep enough contrast on a dark background. Because the scale is perceptually even, mirrored steps behave predictably, which is much harder with hand-picked HEX values.

Keep the exported variables in one file, document what each semantic token is for, and check every text and background pairing with a contrast tool before shipping. Our UI/UX design team sets up colour tokens like this at the start of a product so design files and code use the same names.