Colour Picker & Converter

Three ways to name the same colour

On the web, a single colour can be written in several notations that all point to the same pixels. Knowing how they relate - and when each is the right choice - saves a surprising amount of fiddling in CSS and design tools.

HEX, RGB and HSL

HEX writes the red, green and blue channels as two hexadecimal digits each. RGB writes those same three channels as decimal numbers from 0 to 255, and adds an optional alpha channel for transparency. HSL takes a different, more human approach: hue (an angle on the colour wheel), saturation and lightness. They are interchangeable representations of the same colour:

#1E90FF
rgb(30, 144, 255)
hsl(210, 100%, 56%)   ← all the same blue

When to use which

Reach for HEX when copying a value out of a design file into CSS - it is compact and universally understood. Use RGB (really RGBA) when you need transparency. Use HSL when you want to manipulate a colour programmatically: nudging only the lightness value is the cleanest way to generate hover states or a tint-and-shade palette from one base colour.

Contrast is not optional

The contrast ratio between text and its background decides whether people can actually read your interface. The WCAG accessibility guidelines ask for at least 4.5:1 for normal body text and 3:1 for large text to meet the AA level, rising to 7:1 for AAA. This tool reports the ratio as you pick, so you can catch low-contrast combinations before they ship - a small step that matters for users with low vision and increasingly for legal compliance too.