The Color Converter takes a colour in HEX, RGB, or HSL and returns every standard representation at once: HEX, RGB, RGB percentages, HSL, HSV, CMYK, the channel values, and a seven-step shade scale generated from the colour's own hue and saturation. It is the quick answer to "what is this brand colour in print values / CSS values / the other team's format."
How It Works
Whatever you enter is first resolved to an RGB triplet (hex pairs decode base-16; 3-digit hex doubles each digit, so #369 becomes #336699; HSL converts through the standard chroma geometry), and every other format is derived from that triplet: HSL and HSV from the channel maximum, minimum, and their difference; CMYK from the black key K = 1 - max channel with the remaining channels expressed against it; percentages as channel/255.
Parameters
| Input | Meaning | |---|---| | HEX | #RRGGBB or shorthand #RGB | | RGB | Three channels, 0 to 255 (clamped) | | HSL | Hue 0 to 360, saturation and lightness 0 to 100% (clamped) |
Worked example
Enter #336699 and the converter returns RGB (51, 102, 153) (that is 20%, 40%, 60% per channel), HSL (210, 50%, 40%), HSV (210, 67%, 60%), and CMYK (67, 33, 0, 40). Read them against each other and the models' personalities show: the hue, 210 degrees, agrees everywhere (a clear blue); HSL lightness of 40% versus HSV value of 60% is the famous divergence between the two, because HSL measures toward white while HSV measures the brightness of the strongest channel; and CMYK's zero yellow with heavy cyan and black is exactly how a print shop would build this blue. The shade scale then holds hue 210 and saturation 50% fixed and steps lightness through 92, 80, 68, 56, 44, 32, and 20, giving a ready tonal ramp from near-white tint to deep shade of the same colour.
Which format belongs where
CSS and web design live in HEX (and increasingly in HSL, whose lightness dial is the practical way to build hover and disabled states, exactly the shade scale's operation); RGB is the language of canvas, image editors, and programmatic colour; HSL and HSV are manipulation models, chosen when a human needs to reason about a colour ("same hue, less saturation") rather than specify a device value; CMYK is print's subtractive model, where the converter's naive mathematical CMYK is a starting estimate only: real print conversion runs through ICC profiles for the specific paper and press, rich blacks are built deliberately rather than as K alone, and a saturated screen blue like this example sits near the edge of what CMYK can reproduce at all, which is why brand guidelines carry separately tuned print values rather than conversions.
Rounding, clamping, and round-trips
Channels are integers, percentages are rounded, and hue is rounded to degrees, so conversions are not perfectly reversible: HSL (210, 50%, 40%) returns exactly this RGB, but a colour specified at fractional precision elsewhere can land one channel-step away when re-entered. Inputs outside range are clamped rather than rejected (an RGB channel of 300 becomes 255), which is forgiving for pasted values and dangerous for debugging, since a typo silently becomes a different colour instead of an error. The converter works in the sRGB colour space, as does essentially the whole web; it applies no ICC profile, no gamma gymnastics beyond the standard formulas, and no alpha channel: transparent colours (8-digit hex, rgba) are outside its model, so convert the opaque base colour and carry the opacity separately.
Frequently Asked Questions
Why do HSL and HSV give different numbers for the same colour?
They model different intuitions: HSL is a double cone (lightness runs black to colour to white, so a fully saturated colour sits at 50% lightness), HSV is a single cone (value is simply the brightest channel). Same hue and similar saturation logic, different third number, which is why the converter reports both rather than picking one.
Can I enter a colour name like "steelblue"?
Not directly: the converter accepts hex, RGB, and HSL values. A named CSS colour is itself defined as a hex value (steelblue is #4682B4), so look the name's hex up once and convert from there.
Why does the printed colour not match the screen?
Because CMYK conversion here is mathematical, while printing is physical: inks, paper, and profiles compress the gamut, especially saturated blues and greens. Use the CMYK output as a starting value and proof on the actual stock; for brand-critical print, the specification should come from a Pantone or profiled workflow, not a converter.