Pick a color visually or type a value, then instantly convert between HEX, RGB, HSL, HSV, and CMYK. Generate a 5-shade palette and check WCAG contrast ratios — all in your browser.
A color model is simply a system for describing color as a set of numbers, and different models exist because different tasks call for different ways of thinking about color. RGB and HEX describe color the way a screen physically produces it — as mixed intensities of red, green, and blue light — which makes them the natural choice for anything rendered on a display, but they're not especially intuitive for a human trying to reason about 'a slightly darker version of this blue.' HSL and HSV instead organize color around hue (the position on a color wheel), saturation (how vivid versus muted), and lightness or value (how light versus dark), which maps much more closely to how people naturally describe and adjust color, and is why most color pickers in design software expose HSL or HSV sliders even though the underlying file format ultimately stores RGB or HEX.
CMYK exists for an entirely different physical reason: printers don't emit light, they deposit ink on paper and rely on the paper reflecting ambient light back to your eye, which is a subtractive rather than additive process. Converting between CMYK and the screen-based models is therefore always an approximation rather than a perfect translation, since a printer's actual achievable color range (its 'gamut') differs from a screen's, and specific ink and paper combinations vary the result further.
Converting HEX to RGB is the simplest step — a HEX string is just RGB written in base-16 instead of base-10, so splitting the six-digit string into three two-digit pairs and parsing each as hexadecimal gives you the red, green, and blue channel values directly. Converting RGB to HSL and HSV both start by normalizing red, green, and blue to a 0–1 range and finding the maximum and minimum channel values; the difference between them (the 'chroma') drives both the saturation calculation and a piecewise formula for hue based on which channel was largest. HSL and HSV diverge specifically in how they compute the third component from that same max/min data — HSL averages the max and min for lightness, while HSV uses the max value alone — which is the precise mathematical reason the two models produce different numbers for what looks like the same perceived brightness.
Converting RGB to CMYK works backward from the additive model: it first computes how much black ('key') is needed based on whichever channel has the least light, then calculates how much cyan, magenta, and yellow ink would need to be removed from that black-adjusted baseline to reproduce each remaining channel. This tool implements every one of these formulas as pure, well-tested JavaScript functions that run synchronously in your browser the instant you change any input.
A common design task is turning a single brand color into a usable range of shades — lighter variants for hover states, subtle backgrounds, or disabled states, and darker variants for text, borders, or pressed states. The technique this tool uses (converting to HSL, then holding hue and saturation constant while shifting only lightness) is exactly how most modern design systems generate their numbered color scales, because it guarantees every shade in the family is visually recognizable as 'the same color, just lighter or darker' rather than drifting toward an unrelated hue as it changes brightness — a common pitfall of naively lightening or darkening in RGB space, which can shift perceived hue in ways that look inconsistent.
Once you have a shade ramp, the next step is almost always pairing specific shades together for actual UI use — a dark shade for body text on a light background, a light shade for a background behind dark text, and so on — which is exactly what the built-in contrast checker is for: confirming that whichever pairing you land on is not just aesthetically pleasing but also genuinely readable.
Color contrast accessibility isn't just a legal or compliance checkbox — it directly determines whether a meaningful fraction of your actual users can read your content at all. Low vision affects a large share of the population to varying degrees, color blindness affects roughly 1 in 12 men and 1 in 200 women, and even users with typical vision routinely struggle to read low-contrast text on a phone screen in direct sunlight or on a poorly calibrated monitor. The WCAG contrast ratio formula this tool implements is a well-established, objective standard precisely because it doesn't rely on subjective judgment ('does this look readable to me?') — it's a specific mathematical relationship between the relative luminance of two colors that produces the same numeric answer regardless of who's checking.
In practice, the most robust way to design accessible UI is to check contrast early and often as you pick colors, rather than retrofitting it after a design is finalized — swapping a background or text color late in a project tends to cascade into far more rework than starting with an accessible pairing from the outset. Aim for AA at minimum across all body text, and treat AAA as a stretch goal for especially high-stakes content like legal disclosures or critical form errors where maximum legibility genuinely matters most.
Color Picker & Converter handles color format conversion, palette generation, and contrast checking. These related developer tools cover other common parts of a design and development workflow.