Free Color Picker
Pick any color from the gradient and copy its HEX, RGB, and HSL code — with a full range of tints and shades. Runs entirely in your browser.
What is a color picker?
A color picker is a tool that lets you choose a color visually and read its exact code in formats such as HEX, RGB, and HSL. Screens need an exact value to render a color — "blue" means nothing to a browser, but #5B8DEF does — so a code is what you paste into CSS, a design app, or a brand style guide to reproduce the color precisely.
This picker runs entirely in your browser. Drag across the gradient to choose a color, copy the format you need, or click a tint or shade to explore lighter and darker variants.
How to use the color picker
Pick a color
Drag on the gradient field, move the hue bar, pick a popular color, or type a HEX code.
Copy the code
Press Copy next to HEX, RGB, or HSL — whichever format your project needs.
Explore tints and shades
Click any generated swatch to make it the active color and read its code.
HEX vs. RGB vs. HSL
The same color, three ways to write it — pick by the job.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #5B8DEF | CSS and design tools — compact and universal |
| RGB | rgb(91, 141, 239) | Working with light channels; transparency via rgba() |
| HSL | hsl(220, 82%, 65%) | Adjusting a color by hand — tweak lightness or saturation |
Working with color: best practices
Do
- Keep a small, consistent palette across a project.
- Use tints and shades of one color for depth.
- Check text and background pairs for enough contrast.
- Store brand colors as exact codes in one place.
Don't
- Eyeball colors — small differences are visible.
- Use many unrelated colors on one page.
- Rely on color alone to convey meaning.
- Pair low-contrast text with its background.
Frequently asked questions
Is this color picker free and private?
Yes. The color picker is completely free and runs entirely in your browser. There is no account, no upload, and nothing is sent to a server — every color stays on your own device.
What is the difference between HEX, RGB, and HSL?
They are three ways to write the same color. HEX is a compact six-digit code common in CSS. RGB lists red, green, and blue channels from 0 to 255. HSL uses hue, saturation, and lightness, which is the easiest format to adjust by hand.
Can I type in my own HEX code?
Yes. The HEX field is editable — type or paste a three- or six-digit HEX code and the gradient, the RGB and HSL values, and the tints and shades all update instantly.
What are tints and shades?
A tint is your color mixed with white, making it lighter; a shade is it mixed with black, making it darker. The row of swatches gives you a ready-made lighter-to-darker range — click any one to select it.
More free tools
Run a website? Let Knowster answer your visitors.
Knowster is an AI chat assistant you add to your site in minutes. It replies to customer questions instantly, around the clock.
Get started free