Free Color Picker with Palettes
This free color picker lets you choose a colour with your browser's colour control or type a HEX code, then shows its HEX, RGB and HSL values, how readable white and black text are on it, and swatch palettes of tints, shades, the complementary colour and the triadic set. It suits designers, developers and marketers choosing brand colours for a site, an ad or a logo.
Color Picker
Generators and Converters
About this tool
Colour codes come in several forms. HEX, such as #2563eb, is the most common on the web. RGB gives the amount of red, green and blue from 0 to 255, and HSL describes hue in degrees, plus saturation and lightness in percent, which is easier to adjust by eye. The picker shows all three for the same colour so you can paste whichever your tool needs.
Palettes are built from the colour you choose. Tints mix it with white and shades mix it with black, which gives lighter and darker versions for backgrounds, borders and hover states. The complementary colour sits opposite on the colour wheel, and the triadic set takes the two colours spaced a third of the wheel away, a common starting point for a balanced scheme.
The contrast figures compare your colour with white and black text using the WCAG formula. A ratio of 4.5 to 1 or more is the usual target for normal body text. Use the native picker for a quick choice, or the colour converter when you already have a code to translate. Nothing you choose is stored.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same colour in different ways. HEX is a six-digit code for web use, RGB lists red, green and blue values from 0 to 255, and HSL gives hue, saturation and lightness, which makes it simple to create lighter or darker variants by changing one number.
What are tints and shades?
A tint is the colour mixed with white, so it looks lighter, and a shade is the colour mixed with black, so it looks darker. Together they give a ready range of the same colour for backgrounds, borders, buttons and hover states.
What is a complementary or triadic colour?
The complementary colour is directly opposite yours on the colour wheel and gives the strongest contrast. A triadic palette uses your colour plus two others evenly spaced around the wheel. Both are starting points, so adjust lightness and saturation until the result suits your brand.
What contrast ratio should text have?
WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text to meet level AA. The picker shows the ratio for white and black text on your colour so you can choose the readable one.