Four synchronised inputs, one colour: type a HEX code, an rgb() value, an hsl() value or CMYK percentages and the other three update instantly. The panel takes on a subtle wash of whatever you pick, so the value is always shown in context, and the swatch reports its WCAG contrast ratio against black or white text. Below the fields you get a ready-made ramp of shades and tints plus complementary, triad and analogous harmonies — click any chip to adopt it as the new base colour.
How to convert a color
- 1 Type a value into any field — HEX, RGB, HSL or CMYK — or open the picker from the swatch.
- 2 The remaining formats update instantly, normalised to standard CSS notation.
- 3 Use the shade ramp and harmony rows to explore variations; click a chip to adopt it.
- 4 Copy the notation you need with the button beside each field.
What the conversions actually compute
HEX and RGB describe the same thing in different notation: three channel values from 0 to 255, written as decimal numbers or as pairs of hexadecimal digits. Converting between them is pure formatting. The parser accepts all four common HEX forms — #rgb, #rgba, #rrggbb and #rrggbbaa — expanding the short forms by doubling each digit, so #f0c becomes #ff00cc.
HSL is a genuine transformation rather than a re-notation. It re-describes the same colour as hue (an angle from 0 to 360 around the colour wheel), saturation and lightness. This is why designers reach for it: to make a colour lighter you change one number, whereas in RGB you have to move all three in a way that is easy to get wrong. CMYK is a subtractive model for print, and the conversion here is the standard arithmetic one — good enough to communicate a colour, but not colour-managed. Real print work needs an ICC profile for the specific press and paper, and the values a printer gives you will differ.
The contrast check applies the WCAG relative-luminance formula, which weights the three channels differently because human vision is far more sensitive to green than to blue. That is why a mid-blue and a mid-green of identical RGB "brightness" have very different contrast against white, and why judging contrast by eye is unreliable.
Where each format is needed
Handing colours to developers
Designers work in HSL; CSS accepts both. Converting a palette to HEX or RGB values gives developers something they can paste directly into a stylesheet or a design token file.
Building tints and shades
A consistent palette comes from varying lightness on a fixed hue, not from picking related colours by eye. Generating tints and shades from one base gives you the hover, disabled and border variants that actually belong together.
Checking accessibility
WCAG requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Checking before you commit to a palette is much cheaper than rebuilding it after an accessibility audit.
Preparing print artwork
A logo defined in RGB has to become CMYK for print. The conversion here gives you the starting values to discuss with a printer, who will adjust them for their press.
Why designers and developers need color conversion
Every part of a workflow speaks a different colour language: design tools hand over HEX, CSS variables and canvas work want RGB, theming and lightness tweaks are far easier in HSL, and anything heading to print needs CMYK. Converting by hand is error-prone, and most online pickers are heavy pages loaded with trackers. This one is a few kilobytes of pure maths — including the alpha channel from #rrggbbaa and rgba()/hsla() notation — running locally, so it is instant and works offline.
Where the numbers stop being exact
Colour is more complicated than arithmetic, and two of these formats hide real caveats:
- CMYK conversion is not colour-managed. It uses the standard formula with no ICC profile, so it cannot account for the specific inks, press and paper. Treat the output as an approximation and confirm with your printer.
- Many vivid RGB colours cannot be printed at all. Bright screen greens and cyans fall outside the CMYK gamut, and the conversion will silently give you the nearest printable colour rather than warning you.
- HSL lightness is not perceptual. Two colours at the same L value can look markedly different in brightness — yellow at 50% lightness reads far brighter than blue at 50%. Perceptually uniform spaces such as OKLCH solve this; HSL does not.
- Rounding accumulates. Converting RGB to HSL and back can shift a channel by one, so keep one format as your source of truth rather than converting repeatedly.
- Contrast ratios are a threshold, not a guarantee. Passing 4.5:1 does not make thin light-grey text on white comfortable to read.
Troubleshooting
- My CMYK values look wrong compared to my print proof
- Expected without colour management. The standard formula has no knowledge of your press, ink set or paper stock, all of which shift the result. Use these values as a starting point and let the printer supply the corrected ones, especially for brand colours where accuracy matters.
- The same HSL lightness gives visibly different brightness
- That is HSL working as designed, not a bug. Lightness in HSL is a mathematical midpoint, not a perceptual one, and the eye is far more sensitive to some hues than others. If you need swatches that look equally bright, adjust each by eye or use a perceptual model.
- My colour fails the contrast check but looks fine
- Looking fine on a good monitor in a well-lit room is not the test. WCAG thresholds account for older screens, glare, and readers with reduced contrast sensitivity. Darkening the text a few steps usually fixes it with no visible change to the design.
Frequently asked questions
Which formats can I paste in?
Three, four, six and eight-digit HEX (with or without #), rgb() and rgba(), hsl() and hsla(), plus CMYK percentages. Alpha is preserved wherever the target format supports it.
Is the CMYK conversion print-accurate?
It uses the standard device-independent formula, which is what design tools show on screen. Exact press output depends on an ICC profile for your specific paper and ink, so always confirm with a proof for professional printing.
What is the ratio shown on the swatch?
The WCAG contrast ratio between the colour and the more legible of black or white text. Aim for at least 4.5:1 for body copy and 3:1 for large text.
What contrast ratio do I actually need?
WCAG AA requires 4.5:1 for normal body text and 3:1 for large text — 18pt, or 14pt bold and above. The stricter AA level for user-interface components and graphical objects is also 3:1. AAA raises body text to 7:1, which is worth aiming for on long-form reading but is not the common legal standard.
When should I use HSL instead of HEX?
Use HSL whenever you are creating variations of a colour rather than specifying one. Building a hover state, a disabled state or a set of tints is a matter of adjusting lightness by a few percent — trivially readable in HSL and opaque in HEX, where the relationship between #4a7c59 and #3d6749 is invisible.
Why can I not match my screen colour exactly in print?
Screens emit light and printers reflect it, so the two reproduce fundamentally different ranges of colour. The most saturated screen colours have no printable equivalent, which is why brand guidelines usually specify separate RGB and CMYK values rather than one converted from the other.
Does the alpha channel survive conversion?
Between HEX, RGB and HSL, yes — all three have notations that carry alpha. CMYK has no concept of transparency, so alpha is dropped there; if your artwork depends on transparency, that has to be handled in the layout rather than in the colour value.