Color Picker | How to use and interpret results
Read a browser-selected colour as HEX, RGB and HSL at the same time. Hue, saturation and lightness provide a second way to describe the same basic colour.
- Runs in your browser
- Nothing is uploaded
- No signup; device limits apply
Loading the tool. If it does not appear, reload this page.
How to use this tool
Open the colour picker or edit the HEX input. RGB and HSL are explanatory outputs for that selection, rather than separate HSL editing sliders.
Results and examples
Pure red #ff0000 corresponds to RGB 255, 0, 0 and HSL 0°, 100%, 50%. HSL values are rounded to integers, so converting them back can introduce small differences.
Worked example
Pure red #ff0000 corresponds to RGB 255, 0, 0 and HSL 0°, 100%, 50%. HSL values are rounded to integers, so converting them back can introduce small differences.
Limitations
- This converts the selected colour rather than sampling pixels outside the page.
- Contrast ratios and colour-vision simulations are not computed.
Fields
| Field | Guidance and constraints |
|---|---|
| Pick a color | Check the unit and format displayed beside this field. |
| HEX | Check the unit and format displayed beside this field. |
| RGB | Check the unit and format displayed beside this field. |
| HSL | Check the unit and format displayed beside this field. |
Data handling
Processing stays in the current browser tab; the site does not upload tool input for the calculation itself.
Sources
Frequently asked questions
How is red represented in HSL?
Pure red #ff0000 corresponds to RGB 255, 0, 0 and HSL 0°, 100%, 50%. HSL values are rounded to integers, so converting them back can introduce small differences.
Does the chosen colour meet a contrast requirement?
This converts the selected colour rather than sampling pixels outside the page. Contrast ratios and colour-vision simulations are not computed.
