Color picker
Pick a color and get HEX, RGB and HSL values instantly — convert and copy, in your browser.
Runs 100% in your browserHow to use the color picker
- Choose a color. Use the picker or type a hex code.
- Read the values. HEX, RGB and HSL update instantly.
- Copy what you need. Click Copy beside any format.
About color formats
The same color can be written several ways. HEX (#2563EB) is compact and
ubiquitous in CSS; RGB exposes the red/green/blue channels directly; and HSL
(hue, saturation, lightness) is the most intuitive for tweaking — nudge lightness for tints and shades, or
rotate hue for related colors. This picker keeps all three in sync as you drag the swatch or type a hex code,
so you can read off whichever notation your stylesheet, design file or canvas expects.
Which format should you use?
They all describe the same pixel, so the choice is about what you want to do next:
- HEX — best for copy-pasting a fixed brand color into CSS, a config file or a chat message. It's the most portable and the shortest to type.
- RGB — use when code needs the raw channel numbers: image processing, comparing two colors, or generating a value in JavaScript where you already have
r,g,bintegers. - HSL — reach for this when you're designing rather than copying. Keeping hue and saturation fixed and changing only lightness gives you a consistent set of tints and shades; rotating hue by 30–120° gives analogous and complementary colors.
How HEX and RGB relate
A six-digit hex code is just three bytes written in base 16: #2563EB is
25, 63, EB — which in decimal is red 37, green 99,
blue 235, exactly the RGB triple this tool shows. Each channel runs 00–FF
(0–255), so the shorthand #FFF simply expands each digit (#FFFFFF, pure white).
HSL is derived from those same channels by math rather than stored separately, which is why a value like
50% lightness can round to a slightly different hex than you'd guess — the conversion is
lossy in the last bit or two.
Alpha and 8-digit hex
Modern CSS also accepts an alpha (opacity) channel: rgba()/hsla() take a
0–1 value, and hex can carry a fourth byte as #RRGGBBAA (for example #2563EB80
is roughly 50% opaque). The native picker here works with fully opaque colors; for translucent overlays,
pick the base color first, then append the alpha byte or switch to the rgba() form. To pull a
color straight out of a photo, use the
color picker from image;
to confirm a text/background pairing meets WCAG, run it through the
contrast checker.
Frequently asked questions
- For any chosen color it gives the HEX, RGB, HSL and CSS rgb()/hsl() values, plus the individual channel numbers — everything you need to drop into CSS or a design tool.
- Yes. Type a hex value (with or without the #) and the picker, sliders and other formats update to match.
- Yes. The picker runs entirely in your browser using the native color input and a little math — no data is sent anywhere.
- Use the color palette generator to build complementary, analogous and shade sets from a base color.