← all tools

Color Picker & Converter

Pick a colour for its HEX, RGB and HSL codes, plus shades and a palette. Tap any value to copy.

Tints & shades (tap to copy)

How colour codes work

Digital colours are usually written three ways. Hex (like #3A7BD5) packs red, green and blue into six hexadecimal digits, two per channel. RGB writes the same three channels as numbers from 0 to 255. HSL describes a colour by hue (its position on the colour wheel), saturation (how vivid) and lightness, which is far more intuitive for adjusting a shade. The tool above converts between all three so you can move between the format a design tool wants and the one that is easiest to tweak.

HSL is the designer's friend. To make a colour lighter or more muted, nudging the L or S value in HSL is obvious, whereas doing the same in hex means changing three numbers at once. That is why picking a base colour and generating tints and shades is much easier in HSL, then converting to hex for the code.

Do not forget contrast. Colours have to be readable, and accessibility guidelines set minimum contrast ratios between text and its background (around 4.5:1 for normal text). A pretty palette that fails contrast is unusable for many people, so check text and background pairs for sufficient contrast, not just whether they look nice together.

Related money-saving guides
Site Builders →
Related calculators & tools
JSON formatter →Base64 →URL encode →UUID →