Color picker
Pick a color on a visual field and get its HEX, RGB and HSL code.
- Instant
- Free
- Private (processed locally)
- No sign-up
One color, all its codes
Visually pick a color, adjust hue and opacity, and get the HEX, RGB and HSL codes ready to paste into your CSS. Click a value to copy it.
-
Set the hue
The rainbow slider chooses the base color.
-
Refine on the field
Saturation horizontally, brightness vertically.
-
Copy the code
HEX, RGB or HSL, with opacity if needed.
Example: a vivid orange
| Format | Value |
|---|---|
| HEX | #FF8800 |
| RGB | rgb(255, 136, 0) |
| HSL | hsl(32, 100%, 50%) |
Standard sRGB conversions, values rounded to integers. Everything is computed in your browser.
Frequently asked questions
How does the color field work?
The large square shows saturation (left to right) and brightness (bottom to top) for the hue chosen with the slider. Click or drag to select; the HEX/RGB/HSL readout updates live.
What is the difference between HEX, RGB and HSL?
HEX is a compact hexadecimal code (#FF8800). RGB describes the color by its red, green, blue components (rgb(255, 136, 0)). HSL describes it by hue, saturation, lightness (hsl(32, 100%, 50%)) — more intuitive to tweak a shade.
What is opacity for?
It controls transparency (alpha channel). Below 100%, codes become rgba()/hsla() and HEX gains two characters (e.g. #FF8800CC). Useful for overlays and shadows.
Is the color accurate for the web?
Yes: values are computed with standard sRGB conversions and rounded to integers. Copy the format that fits your CSS. Everything is computed locally, nothing is sent.