Pick a color, get the code
This free color picker lets you choose any color and instantly see its HEX, RGB, and HSL values. Drag inside the color field to set saturation and brightness, slide the bar to change the hue, and copy the code you need with a single click. Nothing to install, nothing to sign up for — it runs entirely in your browser.
If you already know a value, type a HEX code into the box and the picker jumps straight to that color. And if you spot a color anywhere on your screen, the eyedropper button grabs it for you (supported in Chrome and Edge).
How to use the color picker
- Choose a hue using the vertical color bar on the right.
- Set the shade by dragging inside the large square — left to right controls how vivid the color is, top to bottom controls how light or dark it is.
- Read the values in the HEX, RGB, and HSL fields, which update live as you move.
- Copy the format you need with the Copy button next to each field.
- Match an exact color by pasting a HEX code into the HEX field, or use the eyedropper to lift a color from your screen.
HEX, RGB, and HSL — what’s the difference?
All three describe the same color in different ways, and the picker gives you each one so you can paste it wherever it’s needed.
HEX is the six-character code you see most often in web design, written like #3B82F6. It packs red, green, and blue into one short string, which is why it’s the standard for CSS, HTML, and most design tools.
RGB spells out the same color as three numbers from 0 to 255 — rgb(59, 130, 246) — one each for red, green, and blue. It’s handy when you need to adjust a single channel or work with on-screen color directly.
HSL stands for hue, saturation, and lightness — hsl(217, 91%, 60%). It’s the most intuitive of the three for tweaking a color by hand: change the lightness to get a tint or shade, or nudge the hue to shift the color without touching how vivid it is.
When you’d reach for a color picker
Designers and developers use a color picker constantly: pulling a brand color into a stylesheet, finding the HEX of a color in a screenshot, building a palette that works together, or converting a value from one format to another. Anyone working in CSS, Figma, Canva, Photoshop, or a website builder ends up needing exact color codes — this tool gives you all three formats at once so you’re never hunting for a converter.
A quick note on contrast and accessibility
A color rarely lives on its own — it sits next to text or on top of a background. If you’re choosing colors for a site or app, check that text stays readable against its background. The WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal body text. Once you’ve picked your colors here, it’s worth running the pair through a contrast checker before you ship.
Frequently asked questions
Is this color picker free? Yes. It’s completely free, runs in your browser, and doesn’t require an account.
How do I pick a color from an image or my screen? Click the eyedropper button, then click anywhere on your screen to capture that color. The picker reads the exact value and fills in the HEX, RGB, and HSL fields. The eyedropper works in Chrome and Edge; in other browsers you can paste a HEX code instead.
How do I convert HEX to RGB? Paste your HEX code into the HEX field and the RGB and HSL values update automatically — no separate converter needed.
What does the # mean in a HEX color? The # simply marks the start of a hexadecimal color code. The six characters after it are the red, green, and blue values written in base-16.
Can I use these colors in CSS? All three formats — HEX, RGB, and HSL — are valid in CSS. Copy whichever one fits your stylesheet and paste it straight in.
