Hex / RGB / HSL Color Converter
Convert any colour code between HEX, RGB, and HSL instantly — no sign-up, no uploads, nothing to install. Type a value or use the colour picker, then copy the CSS-ready output in one click. Everything runs right in your browser.
Live preview
#3a7bd5
hsl(215, 65%, 53%)
HEX
RGB
HSL
How It Works
The Color Converter lets you translate any colour between HEX, RGB, and HSL in seconds — no sign-up, no uploads, nothing to install. Everything happens right here in your browser.
Pick your input format
Select the HEX, RGB, or HSL tab — whichever format your colour is already in. You can switch tabs at any time and the values stay in sync.
Type or pick a colour
Enter your value in the text fields, or click the colour picker to choose visually. The preview swatch updates instantly as you type.
All formats appear at once
The converted HEX, RGB, and HSL values appear immediately below. Each card shows both the plain value and the CSS-ready string — no button to press.
Copy and use straight away
Click any row to copy it to your clipboard. Paste the value directly into your CSS file, Figma, Tailwind config, or wherever you need it.
Why users love this tool
- Your data never leaves your device — all conversions run locally using JavaScript, so no colour values are ever sent to a server.
- Results in under a second — because nothing is uploaded or downloaded, the converted values appear the instant you type.
- No account needed — just open the page and start converting.
- Works on any device — desktop, tablet, or mobile, any modern browser.
Frequently Asked Questions
Is my data sent to a server?
What is a HEX colour code?
# symbol — for example
#3a7bd5.
Values range from 00 (0 in decimal) to
ff (255 in decimal) per channel.
What is RGB?
rgb(58, 123, 213)
is the RGB equivalent of #3a7bd5.
What is HSL?
How do I convert HEX to RGB?
#3a7bd5
breaks into 3a → red = 58,
7b → green = 123, and
d5 → blue = 213.
This tool does the conversion instantly — just type your HEX value in the HEX tab.
Can I use this to get CSS colour values?
color: #3a7bd5; or
color: rgb(58, 123, 213);).
Click either row to copy it straight to your clipboard.