1. Pick or paste
Use the native color picker, or paste a HEX, RGB, or HSL value into the matching field.
Back to tools
Color Picker
Convert between HEX, RGB, and HSL.
- HEX
- #2979ff
- RGB
- rgb(41, 121, 255)
- HSL
- hsl(218, 100%, 58%)
Conversions are computed in this browser tab. Nothing is uploaded.
How it works
2. See all formats
Every other format updates in lock-step. The big swatch shows the current colour at a glance.
3. Copy
Hit copy next to any format to grab the CSS-ready string. Nothing is sent to a server.
About the Color Picker tool
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.
It is a daily tool for designers and front-end developers: grabbing the HEX for a brand color, converting a designer's RGB into HSL so you can make "the same color but lighter", or translating a value between the formats your design tool and your stylesheet each prefer. Conversions follow the standard CSS Color Module formulas and run entirely in your browser with no network calls, so the tool is free, needs no account, and works offline once the page has loaded.
Frequently asked questions
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.
Is anything sent to a server?
Yes. Conversions run in the browser using standard CSS Color Module Level 3 formulas. No network calls.
Are conversions exact?
RGB↔HSL has small rounding when going through integers — that's normal for the formats. Round-tripping HEX↔RGB is exact.