Free · no sign-up · nothing to install
Color Converter
Paste a HEX, RGB or HSL value — get every other format plus ready-to-paste CSS instantly, with a live swatch you can eyeball before you ship.
Convert a color
Preview · click a chip to copy it · labels flip light/dark automatically for contrast.
#4F46E5
rgb(79, 70, 229)
79, 70, 229
hsl(243, 75%, 59%)
--color: #4F46E5;
How it works
Drop in a HEX code from a brand guide, or type the RGB / HSL values you already have.
Every other format is recomputed as you type — no button, no request, no waiting.
One click copies rgb(), hsl(), the raw channels or a CSS custom property straight into your stylesheet.
Built for mid-task CSS work
Chip labels measure relative luminance and flip white / dark so #FFFFFF and #000000 both stay legible.
Every code is set in monospace with tabular digits, so channels line up and digit slips are easy to spot.
Conversion is pure arithmetic in your browser — no uploads, no accounts, no server round trip.
#FFCC00 also appears as #FC0, but only when the short form is a lossless match.
Bad input keeps the last good swatch on screen with a hint, instead of blanking the page.
Prefer eyes to arithmetic? Click the swatch tile and pick visually; the fields fill themselves in.
FAQ
Are the values exact?
HEX is always exact. RGB and HSL are rounded to whole numbers (hue to a degree, saturation and lightness to a percent), so feeding the displayed HSL back in can shift a channel by up to 5 out of 255 — the swatch, HEX and RGB rows always show the true color.
Which input formats do you accept?
HEX as #RGB, #RRGGBB or #RRGGBBAA, with or without the leading #, in any case. RGB takes three numbers from 0 to 255; HSL takes hue 0–360 and saturation / lightness 0–100.
Is my color saved or sent anywhere?
No. The conversion runs in your browser as plain JavaScript — there is no upload, no account and no server call.
The Copy button did nothing. Why?
Some browsers block clipboard access outside secure contexts. In that case the tool falls back to a hidden selection copy, and you can always select the monospace value and press Ctrl / ⌘ + C.