Color Picker / Color Code Converter
Convert between HEX, RGB, HSL and HSV, with an interactive picker and eyedropper.
What is the Color Picker / Color Code Converter?
This tool keeps a color's HEX, RGB, HSL and HSV representations in sync — edit any one of the four formats (or the swatch itself) and the other three update instantly, so you never have to convert by hand or reach for a separate calculator.
Why four formats?
- HEX (e.g.
#3366ff) is the compact format used everywhere in CSS and design tools. - RGB (red, green, blue, 0–255 each) maps directly to how screens actually mix light, and is what most graphics APIs expect.
- HSL (hue, saturation, lightness) is often more intuitive for humans adjusting a color — "make it lighter" or "less saturated" map directly to one number.
- HSV/HSB (hue, saturation, value/brightness) is similar to HSL but models how a color mixes with black and white slightly differently, and is the model behind most color-picker wheel-and-triangle UIs in design software.
The eyedropper
On browsers that support the EyeDropper API (Chrome and Edge, desktop, at the time of writing), the "Pick from screen" button lets you sample any pixel color from anywhere on your screen — not just within this page — and load it directly into the converter. On browsers without support (currently Firefox and Safari), that button is hidden automatically; use the color swatch or type values in manually instead.
How to use it
- Click the color swatch to open your browser's native color picker, use the eyedropper, or type directly into any HEX/RGB/HSL/HSV field.
- Every other field and the swatch update live to match.
- Copy whichever format your code or design tool needs.