What is a color picker?
A color picker lets you choose a color visually, from a palette or with sliders, and gives you the code that describes it. This one opens your browser's built-in picker and translates your choice into the three formats used most in web design: a HEX code like #1E90FF, an rgb() value, and an hsl() value, all ready to paste into CSS.
How to use the color picker
- Click the color swatch under Pick a color. It starts on dodger blue,
#1E90FF. - Choose a color in the picker that opens. The output updates live as you move around the palette.
- Copy the format you need from the output box. Copy takes all three lines.
The picker itself is the browser's native <input type="color">, so it looks different in Chrome, Firefox, Safari and on phones. Many pickers also let you type a HEX or RGB value directly into their own fields.
Worked example
Picking a medium blue, #3B82F6, produces:
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
Here's how those numbers relate. HEX is just RGB written in base 16: 3B is 59, 82 is 130 and F6 is 246. HSL describes the same color differently, as a hue angle on the color wheel (217°, between cyan and blue), a saturation (91%, very vivid) and a lightness (60%, slightly lighter than the pure hue).
HEX, RGB and HSL compared
All three describe colors in the sRGB color space and are defined in the W3C's CSS Color Module Level 4. They're interchangeable, so the choice comes down to what's easiest to read and adjust.
| Format | Example | Best for |
|---|---|---|
| HEX | #1E90FF |
Compact codes for design handoff, brand guidelines and CSS variables |
| RGB | rgb(30, 144, 255) |
Working with channel values directly, such as in JavaScript or image tools |
| HSL | hsl(210, 100%, 56%) |
Making tints and shades: change only the lightness to get a lighter or darker version of the same hue |
A few reference points show the pattern:
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 |
rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
| Mid gray | #808080 |
rgb(128, 128, 128) |
hsl(0, 0%, 50%) |
| Black | #000000 |
rgb(0, 0, 0) |
hsl(0, 0%, 0%) |
| White | #FFFFFF |
rgb(255, 255, 255) |
hsl(0, 0%, 100%) |
Grays always have 0% saturation, and the hue is reported as 0 because it has no effect on them.
Precision and rounding
HEX and RGB are exact: each channel is a whole number from 0 to 255, and the two formats always convert to each other without loss.
HSL is rounded to whole numbers, so converting it back can drift by a step. #3B82F6 shows as hsl(217, 91%, 60%), and that HSL value converts back to #3C83F6, one step off in the red and green channels. You won't see the difference on screen, but when a brand color has to match exactly, copy the HEX or RGB value.
What this tool doesn't do
- No transparency. Colors are always fully opaque. To add alpha in CSS, use
rgb(30 144 255 / 50%)or an 8-digit HEX like#1E90FF80. - No print or named-color formats. It doesn't output CMYK, Pantone or CSS color names.
- No conversion from typed codes. The input is a picker, not a text box. To convert a code you already have, use the HEX to RGB converter or the RGB to HEX converter.
Once you've picked your colors, try them out in the CSS editor.
Last updated