Design

Color Picker

Pick and generate color codes

#3B82F6
Pick a Color
HEX
#3B82F6
RGB
59, 130, 246
HSL
217°, 91%, 60%
Shades
Quick Colors

About Color Picker

Pick a colour and read its value in HEX, RGB, and HSL, then copy whichever format you need. Useful for CSS, design work, and matching a colour you have already got.

The three formats describe the same colour differently. HSL is the one worth learning, because adjusting lightness or saturation while holding hue constant is far more intuitive than editing hex digits.

How to use it

  1. 1Choose a colour from the picker.
  2. 2Read its HEX, RGB, and HSL values.
  3. 3Copy the format your project needs.

Understanding the formats

  • HEX packs red, green, and blue into six hexadecimal digits, two per channel. It is compact and the most common format in CSS.
  • RGB states the same three channels as numbers from 0 to 255, and its rgba form adds an alpha channel for transparency.
  • HSL describes hue as an angle on the colour wheel, with saturation and lightness as percentages. Changing one without disturbing the others is far easier here than in HEX.
  • To build a colour palette, hold the hue and vary lightness. To find a complementary colour, add 180 degrees to the hue.
  • Check contrast when using colour for text. Accessibility guidelines ask for a ratio of at least 4.5 to 1 between body text and its background.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

They describe the same colour in different ways. HEX and RGB both specify red, green, and blue channels, while HSL uses hue, saturation, and lightness, which makes it much easier to adjust a colour deliberately.

How do I find a complementary colour?

In HSL, add 180 degrees to the hue while keeping saturation and lightness the same. That gives the colour directly opposite on the colour wheel.

What contrast ratio do I need for accessible text?

WCAG guidelines ask for at least 4.5 to 1 for normal body text against its background, and 3 to 1 for large text.