Color Converter

What the Colour Models Mean

RGB is how screens work. Every pixel mixes red, green and blue light, each from 0 to 255. All zeros is black, all 255 is white. It is additive: adding more light gets you closer to white, which is the opposite of mixing paint.

HEX is RGB in a shorter alphabet. The same three numbers written in base 16 and glued together after a hash. There is no colour a hex code can express that RGB cannot, it is purely a matter of notation, which is why the two convert with no loss whatsoever.

HSL and HSV describe colour the way people do. Instead of three light channels they use hue, an angle around a colour wheel, plus saturation and either lightness or value. Asking for a slightly darker blue is one small change in HSL and an awkward guess in RGB.

CMYK is subtractive and belongs to print. Cyan, magenta, yellow and black inks absorb light rather than emit it. Because ink on paper cannot reproduce everything a backlit screen can, some vivid screen colours have no exact CMYK equivalent at all.

How to Use the Converter

Start anywhere. Click the swatch to open your system colour picker, type or paste a hex code, or set the red, green and blue channels directly. Three and six digit hex codes both work, and the hash is added automatically if you leave it out.

Work in HSL when adjusting. The hue, saturation and lightness fields are the fastest way to refine a colour. Raising lightness gives a tint, lowering it gives a shade, and the hue stays exactly where it was.

Copy what you need. Every notation has its own copy button, and Copy All Formats puts the complete set on your clipboard as labelled lines, which is useful when recording a colour in documentation or a design token file.

Use the ramp as a shortcut. The nine swatches under the preview are the same hue at nine lightness levels. Click any of them to make it the active colour and read off its values.

Reading a Hex Code

Six digits, three pairs. In #3b82f6 the pairs are 3b, 82 and f6, which are red 59, green 130 and blue 246 in decimal. More blue than green and much more than red, so the result is a confident blue.

Three digit codes are shorthand. #f0a expands to #ff00aa by doubling each digit. It is compact but can only express 4,096 of the 16.7 million possible colours, so it is best kept for quick sketching.

Equal pairs mean grey. Any code where all three pairs match, such as #808080, has no colour cast at all. It is a quick way to check whether a grey in a design is truly neutral or subtly tinted.

Eight digit codes carry alpha. A fourth pair sets transparency, so #3b82f680 is the same blue at about fifty percent. This tool reads the colour from the first six digits and gives you the alpha on its own slider.

Why Designers Prefer HSL

It separates the decisions. Hue answers which colour, saturation how vivid, lightness how bright. In RGB those three questions are tangled together across all three channels, which is why nudging RGB values by hand so often lands somewhere unexpected.

Consistent scales come free. Fixing hue and saturation while stepping lightness from 95 down to 10 produces a coherent palette, which is exactly how design systems such as Tailwind generate their numbered colour scales.

Related colours are a rotation away. Adding 180 to the hue gives the complementary colour, 120 either way gives a triadic set, and 30 gives a close analogous neighbour. These are single number changes in HSL and guesswork in hex.

One caveat about perception. HSL lightness is a mathematical value, not a perceptual one. Yellow at fifty percent lightness looks considerably brighter than blue at the same number, so always check contrast rather than trusting the figure.

Alpha, Transparency and Opacity

Alpha belongs to the colour. Writing rgba(59, 130, 246, 0.5)makes that one colour semi transparent while everything else in the element stays solid. It is the right tool for a translucent overlay or a soft border.

The CSS opacity property is different. It fades an entire element and all of its children, text included. Using it when you meant alpha is a common cause of accidentally washed out labels.

Transparency changes effective contrast. A colour at fifty percent alpha blends with whatever sits behind it, so its real contrast against text depends on the background. Always test overlays against the actual backdrop rather than the swatch.

CMYK and the Limits of Print

Screens emit light, paper reflects it. That difference means the range of colours available in print is smaller than on a display. Vivid screen colours, particularly bright cyans, oranges and pure greens, simply cannot be reproduced with process inks.

The conversion here is the standard formula. It gives a sound starting point, but professional printing uses ICC profiles that account for the specific press, ink set and paper stock. For anything commercial, hand the printer your source file and let their profile do the conversion.

Black is worth thinking about. The K channel exists because mixing cyan, magenta and yellow gives a muddy brown rather than true black, and because black ink is cheaper than three coloured ones. For large solid areas printers often use a rich black that mixes K with some cyan.

Building Tints and Shades

A tint is the colour plus white, a shade is the colour plus black. In HSL both are simply lightness changes, which is why the ramp under the preview holds hue and saturation constant and varies only the third value.

Nine steps is the practical sweet spot. It gives you a near white for backgrounds, a mid tone for buttons and a near black for text, with enough intermediate steps for borders and hover states without becoming unmanageable.

Drop saturation as lightness rises. Very light tints at full saturation look artificial. Reducing saturation slightly at the pale end of a scale produces a far more natural result, which is what most professionally built palettes do.

Colour and Accessibility

Contrast is a ratio, not an impression. WCAG asks for at least 4.5 to 1 between normal text and its background, and 3 to 1 for large text. A colour that looks fine to you may still fail, so measure rather than judge by eye.

Never let colour carry meaning alone. Around one in twelve men has some form of colour vision deficiency. Error states, chart series and status indicators need a label, an icon or a pattern as well as a hue.

Watch the light end of your scale. Pale tints that look elegant on a bright office monitor can vanish on a phone in daylight. Choosing a slightly darker step costs almost nothing visually and helps a great many people.

Common Mistakes to Avoid

Expecting CMYK values to match your screen. They are a mathematical conversion, not a print proof. Colours will shift, sometimes considerably, once ink meets paper.

Building a palette by nudging hex codes. It produces scales that drift in hue and look subtly inconsistent. Fix the hue in HSL and vary lightness instead.

Confusing HSL lightness with perceived brightness. Equal lightness numbers do not mean equal visual weight across different hues. Yellow will always read brighter than blue at the same value.

Using opacity where alpha was meant. Fading a whole element also fades its text and icons. If you only wanted a translucent background, put the alpha in the colour.

Frequently Asked Questions