How it works
Drag in the square to set saturation and brightness, and use the rainbow slider for the hue. You can also type a code, use your system color picker, pick any pixel from your screen (in browsers that support it) or tap a spot in your own photo. Every color is shown as HEX, RGB, HSL, HSV and CMYK, and recent picks stay in a row for quick comparison.
#2459e0 = rgb(36, 89, 224) = hsl(223, 75%, 51%)
Which format to use
- HEX: the most common code for websites and design tools.
- RGB: red, green and blue light from 0 to 255, used on screens.
- HSL and HSV: hue, saturation and lightness or brightness — easiest for making a color lighter, darker or softer.
- CMYK: a rough starting point for print; confirm with your printer's profile.
Tips
- Picking from the screen works in Chrome and Edge on desktop; on phones, pick from an image instead.
- Photos are read on your device and are never uploaded.
- Click any value to copy it.
Standards and sources
- Color values follow the CSS Color Module Level 4 (sRGB)
- Screen picking uses the EyeDropper API where the browser supports it
Last reviewed October 7, 2026
Frequently asked questions
How do I pick a color from an image?
Choose the image under "Pick from an image", then tap the spot you want. The color under your finger or cursor is picked.
Can I pick a color from anywhere on my screen?
Yes, in Chrome and Edge on desktop. Tap "Pick from screen" and click any pixel, even outside the browser window.
What is the difference between HSL and HSV?
Both use hue and saturation. HSL uses lightness, where 100% is white; HSV uses brightness, where 100% is the full color.
Are my photos uploaded?
No. Images are drawn and read inside your browser and never leave your device.
How do I copy a color code?
Click any HEX, RGB, HSL, HSV or CMYK value, or use the copy button to copy the main codes together.