Color Picker & Converter
Pick a color with the color wheel, drag the hue bar, or type your HEX/RGB/HSL value, and instantly get its representation in every format, with a live preview.
Pick a color
Selected color
#3B82F6
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)CMYK
cmyk(76%, 47%, 0%, 4%)Complementary#F6AF3C
Popular lookups
How to use: Color picker
- 1Pick a color with the picker or type its HEX code.
- 2Read its HEX, RGB and HSL values.
- 3Copy the format you need or its complementary color.
What is it for?
- Move colors from a design into CSS.
- Convert between HEX, RGB and HSL.
- Find the complement of a brand color.
Color formats: HEX, RGB and HSL
Three ways to say the same thing
HEX (#1d4ed8) is the most common compact notation in CSS; RGB expresses the mix of red, green and blue from 0 to 255; HSL describes hue (0–360°), saturation and lightness, and is more intuitive for adjusting a color.
Why use HSL
To create a lighter or darker variant you just change lightness without altering the hue, which is hard with HEX. It underpins many design systems.
Transparency
With an alpha channel (rgba or 8-digit HEX) the color supports opacity. Remember that real contrast depends on the background it sits on.
Related tools
Frequently asked questions
Which format should I use in CSS?+
HEX and RGB are the most used. HSL is easier to read and tweak. CMYK is specific to print.