Color Tools
Tools for choosing colors and converting between formats. All processing happens in your browser.
Pick, convert and check a color
Enter a hex, RGB, HSL, HSV, or OKLCH value to inspect the same color in every supported format. Adjust hue, saturation, brightness, and alpha visually, then copy the exact notation required by CSS, design software, or a style guide.
The contrast panel checks the color against white and black using WCAG ratios and identifies whether it passes for normal or large text. A generated lightness scale helps turn one selected color into a consistent interface palette.
The same color, written several ways
Hex and rgb() are the channel values a display drives directly. hsl() and hsv() rearrange that into hue, saturation and lightness or brightness, which is easier to reason about when you are building variations of a color rather than picking one. oklch() describes the same color in a space built to match perception.
Nothing is lost moving between them within the sRGB gamut, so the format to use is the one your destination expects: hex in most design tools, hsl or oklch in a CSS custom property, cmyk only as a rough indication, since a real print conversion depends on ink, paper and profile.
Why a palette built in HSL looks uneven
HSL lightness is a geometric average of the channels rather than a measure of how bright a color appears. Yellow and blue both sit at fifty per cent and one of them is nearly white to the eye. Any scale built by holding that number constant comes out lopsided and ends up corrected by hand, color by color.
OKLCH fixes this by construction: equal steps in lightness look like equal steps. Hold it constant across hues and the row genuinely reads as one family, which is what makes it the right space for generating tints, shades and interpolations without the muddy grey that appears halfway through an RGB blend.
Contrast is a requirement, then a judgement
The ratios shown against white and black follow the WCAG 2 formula, with the usual thresholds: 4.5 to 1 for body text, 3 to 1 for large text and interface components, 7 to 1 for AAA. Meeting them is not optional in most places that procure software, and it is the cheapest accessibility work available.
The number is not the whole answer, though. The formula overstates contrast for light text on dark backgrounds and knows nothing about font weight, so a hairline that passes can still be hard to read. Hit the ratio, then look at the result at the size and weight you will actually ship.