DEVELOPER TOOLS
Color Picker
Select colors visually and get instant conversions for web development.
PREVIEW TEXT
#22C55E
rgb(34, 197, 94)
hsl(142, 71%, 45%)
How to Use Color Picker
1
Open the color wheel
Click Open Color Wheel to pick any color visually using your browser picker.
2
Or enter a HEX code
Type a HEX color code directly into the HEX field and all values update instantly.
3
View all color formats
See the equivalent RGB and HSL values update automatically as you change the color.
4
Copy your color
Click Copy HEX Code or copy the CSS, RGB or HSL value from the export section.
Frequently Asked Questions
What is the difference between HEX, RGB and HSL?
HEX is a 6 digit code used in CSS and design tools. RGB uses red, green, blue values from 0 to 255. HSL uses hue, saturation and lightness which is easier for humans to understand and adjust.
Can I use this for web design?
Yes. The CSS export values are ready to paste directly into your stylesheet.
What does the color preview show?
A live preview of your selected color that updates instantly as you type or pick.
Does it support transparency or alpha values?
Currently the tool supports HEX, RGB and HSL without alpha. RGBA support is planned.
How do I find the HEX code of a color I like?
Open the color wheel, navigate to your color visually and the HEX code appears automatically.