Every format of a color, in sync
Pick a color visually or paste it in any format — the HEX, RGB, and HSL values stay synchronized with a live swatch. Each has its own copy button, ready for CSS, design tools, or brand docs.
Need a color from an image instead? Try the image color picker.
Frequently asked questions
Which format should I use in CSS?
All three work everywhere. HEX is the compact convention; HSL is easiest for humans to adjust (change lightness without touching the hue); RGB matches what design tools and image data report.
Can I paste a color in any format?
Yes — type or paste into any field (with or without #, rgb(), or hsl() wrappers) and the other formats plus the preview update as soon as the value is valid.
What is HSL exactly?
Hue (0–360° around the color wheel), saturation (0% gray to 100% vivid), and lightness (0% black to 100% white). It maps to how people actually think about adjusting a color.