Color Picker
Pick a color and read it as HEX, RGB, and HSL at the same time. Edit any field and the others update. Copy CSS-ready values with one click.
infoQuick Reference
A 6-digit hexadecimal code preceded by #. Each pair represents red, green, and blue (00-FF).
Red, Green, and Blue channels each ranging from 0 to 255. The additive color model used by screens.
Hue (0-360), Saturation (0-100%), Lightness (0-100%). A more intuitive model for humans.
lightbulbTip
Click the copy button next to any format to copy the CSS-ready value to your clipboard. Paste it straight into your stylesheet.
What is the Color Picker?
A color picker lets you choose a color visually and read its numeric values across the formats CSS, design tools, and image libraries actually use: HEX (#RRGGBB), RGB (0-255 per channel), and HSL (hue, saturation, lightness). Any change in one format propagates to the others, so the three views never drift out of sync.
How to use the Color Picker
- 1
Pick a color visually
Click the small swatch to open your operating system's color picker, or hit Random Color for a starting point.
- 2
Fine-tune in any format
Edit the HEX, RGB, or HSL values directly. Whichever you touch, the other two update to match.
- 3
Copy a format
Each row has its own copy button that puts a CSS-ready value (for example, "rgb(59, 130, 246)") on your clipboard.
- 4
Paste into your code
Drop the value into your stylesheet, design tool, or image library. The format you copied is the format that goes in.
Frequently Asked Questions
What color formats are supported?
Three: HEX (#RRGGBB, six hex digits), RGB (red, green, blue from 0 to 255), and HSL (hue 0 to 360°, saturation 0 to 100%, lightness 0 to 100%). All three are interconverted live, so editing one updates the other two.
How do I convert HEX to RGB?
Paste the HEX code into the HEX field and read the RGB values directly. The conversion runs on every keystroke, so as soon as you've typed a valid 6-digit code (with or without the leading #), the RGB row reflects it.
Can I copy the color code?
Each format has its own copy icon that puts the CSS-ready string ("#3B82F6", "rgb(59, 130, 246)", or "hsl(217, 91%, 60%)") on your clipboard. Paste straight into a stylesheet or design tool.