Home / Color Picker
Color Picker
Pick any color and instantly get its HEX, RGB and HSL codes — plus a full range of tints and shades. Click any value to copy it.
Grab any color's HEX, RGB and HSL code
This color picker gives you a color's exact value in the three formats you'll actually use in design and code: HEX for CSS and design tools, RGB for screens and code, and HSL for reasoning about hue and lightness. Pick a color, copy the value you need, and build a quick palette from the automatic tints and shades.
Which format should I use?
- HEX (
#e4552b) — the most common in CSS and design apps. Compact and easy to paste. - RGB (
rgb(228, 85, 43)) — great when you need to tweak red, green and blue channels directly, or add transparency withrgba(). - HSL (
hsl(14, 78%, 53%)) — the friendliest for making a color lighter, darker, or shifting its hue.
Building a palette
The tints (lighter) and shades (darker) row gives you a ready-made scale from one base color — handy for hover states, backgrounds, and borders that all feel like they belong together. Click any swatch to make it the active color and copy its codes.
Frequently asked questions
Can I type in my own HEX code?
Yes. Type a HEX value (with or without the #) into the HEX field and press Enter — the picker, values and shades all update.
Is anything uploaded?
No. Everything runs in your browser. No colors, no data, nothing is sent anywhere.
What are tints and shades?
A tint is your color mixed toward white (lighter); a shade is mixed toward black (darker). Together they form a simple, harmonious palette.