Color Picker
Pick a color and get its HEX, RGB, and HSL values, instantly in your browser.
How to use the Color Picker
- Click the color swatch to open your browser's color picker.
- Choose a color, or paste a HEX value into the picker.
- Click Run to see the color's HEX, RGB and HSL values.
How the Color Picker works
Your browser's picker returns a HEX code, which the tool splits into red, green and blue channels (0 to 255) for the RGB value. It then converts RGB to HSL: lightness is the average of the largest and smallest channel, saturation measures how far the color is from gray, and hue is the angle on the color wheel from 0° (red) through 120° (green) to 240° (blue).
All three formats describe the same color and can be used interchangeably in CSS, for example #3498DB, rgb(52, 152, 219) and hsl(204, 70%, 53%).
Frequently asked questions
- Is this tool free?
- Yes. Pick colors and convert them at no cost, with no account required.
- What formats does it show?
- HEX, RGB, and HSL representations of the color you pick, ready to paste into your CSS.