Color picker
Convert between HEX, RGB, and HSL.
- HEX
- #2979ff
- RGB
- rgb(41, 121, 255)
- HSL
- hsl(218, 100%, 58%)
Everything runs in your browser. Nothing is uploaded.
How it works
Pick or paste
Use the native color picker, or paste a HEX, RGB, or HSL value into the matching field.
See all formats
Every other format updates in lock-step. The big swatch shows the current colour at a glance.
Copy
Hit copy next to any format to grab the CSS-ready string. Nothing is sent to a server.
Questions
What does this tool do?
The Color Picker lets you choose a color visually or paste a HEX, RGB, or HSL value, then shows the same color in all three formats at once, updating in lock-step as you adjust it. A large swatch previews the current color, and each format has a copy button that hands you a CSS-ready string. HEX accepts both short (#abc) and long (#aabbcc) forms, with or without the # prefix.
Is anything sent to a server?
Yes. Conversions run in the browser using standard CSS Color Module Level 3 formulas. No network calls.
What's the difference between HEX, RGB, and HSL?
The same colour expressed three different ways. HEX is a compact 6-character form most used in design tools and CSS. RGB names each red/green/blue channel from 0 to 255. HSL describes hue (0–360°), saturation, and lightness — handy when you want to tweak "the same colour but lighter".
Short or long HEX?
Both 3-character (`#abc`) and 6-character (`#aabbcc`) HEX are accepted, with or without the `#` prefix.
Are conversions exact?
RGB↔HSL has small rounding when going through integers — that's normal for the formats. Round-tripping HEX↔RGB is exact.