Color Picker
Pick any color and instantly get its HEX, RGB, HSL, HWB and CMYK values, plus ready-made tints and shades. Free and private — everything runs in your browser.
| HEX | #3B82F6 | |
|---|---|---|
| RGB | rgb(59, 130, 246) | |
| HSL | hsl(217, 91%, 60%) | |
| HWB | hwb(217 23% 4%) | |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
Tints (mixed with white)
Shades (mixed with black)
Click any tint or shade to make it the selected color.
How to use the Color Picker
- Pick a color. Click the color swatch to open your system picker, paste a HEX code such as #3b82f6, drag the hue, saturation and lightness sliders, or hit 🎲 Random for inspiration.
- Copy the format you need. The table shows the same color as HEX, RGB, HSL, HWB and CMYK — press 📋 Copy next to any value, or copy all five formats at once.
- Explore tints and shades. Two strips show the color mixed with white and with black in 10% steps. Click one to select it — perfect for hover states, borders and backgrounds.
About this tool
This free online color picker is made for web designers, front-end developers and anyone choosing brand or UI colors. Pick a color visually or type a HEX code, then fine-tune it with HSL sliders — adjusting lightness or saturation without shifting the hue is the easiest way to build a consistent interface palette. Every value is shown in CSS-ready notation, including the modern hwb() format, and the automatic tints and shades give you matching lighter and darker variants for buttons, links and cards.
The picker runs entirely in your browser: no uploads, no account, no limits, and it keeps working offline once the page is loaded. If you need to convert an existing value between formats, try the Color Converter; to grab a color from a photo use the Image Color Picker; and to verify text readability check the Contrast Checker.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
HEX and RGB encode exactly the same red, green and blue components — HEX in base-16 (#3B82F6) and RGB in decimal (rgb(59, 130, 246)). HSL describes the color as hue (0–360° on the color wheel), saturation and lightness, which is far more intuitive when you want to make a color lighter, duller or slightly warmer.
What is HWB and where can I use it?
HWB stands for hue–whiteness–blackness: you start from a pure hue and state how much white and black is mixed in. It is part of CSS Color Level 4, so the hwb() value shown here works directly in all modern browsers.
Why is the CMYK value only an approximation?
CMYK describes ink coverage for print, and the exact result depends on the printer, paper and ICC color profile. This tool uses the standard formulaic conversion, which is what most design software shows by default — treat it as a starting point and let your print shop do the final profiling.
What are tints and shades?
A tint is your color mixed with white (lighter), a shade is your color mixed with black (darker). The strips show mixes from 10% to 90%, which is handy for generating hover colors, disabled states, subtle backgrounds and text-on-color combinations that stay on brand.