Color Converter

Hex and RGB are notation for identical data. #3A7BD5 is red 58, green 123, blue 213 - two hex digits per channel, nothing lost either way. Anything that accepts one accepts the other.

HSL and HSV are the same colour described in polar terms: a hue angle around a colour wheel, plus saturation, plus either lightness or value. The arithmetic is exact and round-trips cleanly.

The reason to care is that they are useful for different jobs. RGB is how screens work but it is terrible for reasoning about colour - to make #3A7BD5 lighter you have to adjust three numbers in a coordinated way and hope. In HSL you raise the L and leave the rest alone. Building a set of tints and shades from one brand colour is a two-minute job in HSL and an afternoon of guessing in hex.

HSL and HSV differ in what the third number means. HSL's lightness runs from black through the pure hue at 50% to white. HSV's value runs from black to the pure hue at 100%, and white only appears when saturation drops. HSL is the more intuitive of the two for generating palettes; HSV matches how colour pickers in graphics software tend to behave.

The other four notations all describe light emitted by a screen. CMYK describes ink absorbed by paper, and the two do not map onto each other cleanly.

The set of colours a screen can show and the set a printing press can produce overlap but are different shapes. Saturated screen colours - vivid cyans, bright oranges, anything that glows - are simply outside what four process inks can reproduce. Converting them yields the nearest printable approximation, and something is lost.

Worse, there is no single correct conversion. The right numbers depend on the press, the ink set, the paper stock and the colour profile in use. A professional workflow converts through an ICC profile for the specific press. A general-purpose formula, which is what this tool uses, gives you a reasonable starting point and nothing more.

So: use the CMYK output to communicate roughly what you want, or as a starting point in a layout application. Do not send it to a printer as a colour specification for anything where the match matters. Ask the printer what profile they want and convert through it.

Converting notations is the easy part. The question that actually comes up in the work is whether text in one colour is readable on a background of another.

That is a contrast ratio, computed from the relative luminance of the two colours, and it is not something you can eyeball. The accessibility thresholds in common use are 4.5:1 for normal body text and 3:1 for large text and interface components.

The trap is that a pair of colours can look fine to you and fail badly - light grey on white is the classic, and it is everywhere. Mid-tone colours against each other are the other common failure, because two colours can be very different in hue while being nearly identical in luminance, which is exactly the case that is unreadable for someone with low vision or on a phone in sunlight.

This tool does not compute contrast ratios. It is worth checking yours somewhere that does, particularly for any colour you are about to standardise on.

Three-digit hex is shorthand where each digit is doubled: #F0C is #FF00CC. It is valid CSS and only capable of expressing 4,096 of the 16.7 million colours, so it is convenient rather than useful.

Eight-digit hex adds an alpha channel as a final pair - #3A7BD5CC is that blue at 80% opacity. Alpha is not part of the colour itself, which is why converting to HSL or CMYK drops it. If you need transparency, carry it separately.

One thing that catches people: colour and opacity are different mechanisms. A colour at 50% alpha over white looks like a lighter colour, but it is not the same as the lighter colour - put it over a dark background and it behaves completely differently. If you want a fixed lighter shade, raise the lightness in HSL rather than reaching for opacity.