Color Picker
Pick a color and read it back in every format at once.
Three steps
How to use it
-
1
Choose a color
Drag the crosshair in the saturation panel to set richness and lightness, then use the hue slider underneath to move around the wheel.
-
2
Or type a value
Paste anything you already have: a hex code, an rgb() string, an hsl() string, or a CSS color name like rebeccapurple.
-
3
Copy the format you need
Every row in the output panel has its own copy button. The alpha slider adds an opacity value and switches the RGB row to rgba().
About this tool
A color picker is doing one job with two faces. The visual side is an HSV picker: the square panel varies saturation left-to-right and value top-to-bottom, while the slider underneath moves the hue. HSV is used rather than HSL because the square stays intuitive. The top-right corner is always the most vivid version of the current hue, which is not true in an HSL square.
The output side is pure conversion. Hex and RGB describe the same thing in different notation; HSL and HSV describe it in terms a human can reason about; CMYK describes what a printer would do with it, approximately. None of these is more correct than the others. They are different coordinate systems over the same color.