RunToolRunColor Picker
Pick colors and get their codes.
How to Pick and Convert Colors
Choose a color
Drag the picker or enter a value to select any color.
Read every format
See HEX, RGB, HSL and more update together instantly.
Copy the code you need
One click copies the format your project uses.
Three notations for the same colour
Hex, RGB and HSL describe the same sRGB colour in different ways. Hex and RGB are the same numbers in different bases — `#FF0000` is `rgb(255, 0, 0)`. HSL restructures them into hue, saturation and lightness, which is why it is easier to reason with.
The practical difference shows up when building a palette. Making a colour lighter in hex means adjusting three values by feel; in HSL it means changing one number. For generating hover states, disabled states and tints of a brand colour, HSL is simply the better tool.
Contrast is a calculation, not an impression
Text legibility against a background is measured as a contrast ratio, computed from the relative luminance of both colours. The accessibility guidelines ask for at least 4.5:1 for normal text and 3:1 for large text.
Designers consistently overestimate contrast on their own screens, which are bright, well-calibrated and viewed indoors. Light grey text on white is the most common failure, and it is unreadable outdoors, on cheap displays, and for a substantial number of users regardless of conditions. Check the number rather than trusting the impression.
Colour alone cannot carry meaning
Around one in twelve men has some form of colour vision deficiency, most commonly affecting red and green. An interface where the only difference between success and error is red versus green conveys nothing to those users.
The fix is not to avoid colour but to pair it with something else: an icon, a label, a shape, a position. Colour then reinforces meaning rather than being the sole carrier of it.
Colour changes across displays
sRGB is the common denominator that everything supports, but modern displays cover wider gamuts, and the same hex value renders differently on a phone, an office monitor and a print proof. Print is a different system entirely — CMYK cannot reproduce many vivid screen colours, and a saturated screen blue reliably disappoints on paper.
For anything crossing between screen and print, or where brand colour matters commercially, the colours need specifying in both systems rather than converting one to the other and hoping.
Building a palette that works
A useful palette is small: one or two brand colours, a neutral range for text and surfaces, and semantic colours for success, warning and error. Most interfaces need fewer colours than they end up with, and consistency matters more than range.
Picking happens entirely in your browser, so brand colours and unreleased design work are not sent anywhere.
Transparency and the alpha channel
Adding transparency turns a colour into something that depends on what is behind it. An eight-digit hex value or an `rgba` declaration carries the alpha channel, and the colour you see is the result of blending with whatever it sits on rather than the value you specified.
This matters for contrast checking, which is calculated between two solid colours. Semi-transparent text over a background has an effective colour that must be computed from the blend, and checking the declared value instead of the blended one produces a pass that is not real. Where legibility matters, use a solid colour and let something else provide the softness.