Color Picker
Pick any color and instantly get its HEX, RGB and HSL values. Sample colors from anywhere on your screen and generate matching shades — all free, in your browser.
Screen eyedropper isn’t supported in this browser — try Chrome or Edge.
HEX
#2563eb
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
Shades & tints
Click a swatch to make it your active color.
HEX, RGB and HSL update live as you pick. Click any value to copy it.
Everything runs in your browser — nothing is uploaded.
How to pick a colour and get its codes
Drag the picker or enter a value to choose any colour, and the tool instantly shows its HEX, RGB and HSL codes ready to copy. It's the fastest way to grab the exact code you need for CSS, a design tool or a document, and to explore shades and tints around a colour you like.
HEX, RGB and HSL explained
HEX codes like #3B82F6 are the compact standard for web and design. RGB describes a colour by its red, green and blue channels, which is how screens display it. HSL (hue, saturation, lightness) is the most intuitive for adjusting a colour by hand. Having all three lets you paste the right format into any tool. Everything runs in your browser.
Related Tools
Frequently Asked Questions
What color formats does it show?
It shows HEX, RGB, and HSL values for any color you pick, each with a one-click copy button.
Can I pick a color from my screen?
Yes, in supported browsers like Chrome and Edge you can use the eyedropper to sample any pixel on screen.
What are shades and tints?
They're lighter and darker variations of your color, generated automatically so you can build a quick palette.
Is the color picker free?
Yes, 100% free and it runs entirely in your browser.