TextArray
100% local

Color converter

Convert colors between HEX, RGB and HSL, with alpha and a tint palette.

Input
4
Output
Related tools
Hex to text and backEncoding & conversionHash generatorDeveloper toolsSlug generatorDeveloper toolsQR code generatorDeveloper tools
Color converter
Paste a color in any notation CSS understands — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — and the other two come back instantly. Short hex like #f00 is expanded, the leading hash is optional, and both the old comma syntax and the newer space syntax are read without being told which one you used. Put one color per line and a whole palette converts at once, which is exactly what you want when a design hand-off arrives as a column of hex codes and your stylesheet is written in HSL.
Alpha survives the trip however you write it: rgba(59, 130, 246, 0.5), rgb(59 130 246 / 50%) and the 8-digit hex #3b82f680 all describe the same half-transparent blue, and each converts to the others. Turn off “Keep alpha channel” when you only want the opaque color. The output format menu narrows the result to hex, RGB or HSL alone — handy for bulk lists — and the syntax menu decides between rgb(255, 0, 0) and rgb(255 0 0 / 0.5), so what you copy pastes straight into the codebase you already have. Uppercase hex is one checkbox away.
Switch the tint palette on and every color gains a table of lighter and darker variants, mixed evenly toward white and toward black. It is a quick way to derive hover states, borders and disabled styles from one brand color without opening a design tool. Pick one to eight steps per side; the base color sits in the middle at 0%.
Everything runs in your browser — no upload, no server round-trip, no account. Unreleased brand colors stay on your machine. Lines that aren't colors are left in place as a CSS comment and counted in the tally, so one typo never hides the rest of a long list. Named CSS colors such as rebeccapurple are not supported; convert those to hex first.
FAQ
Which color notations does it read?
Hex in 3, 4, 6 and 8 digits, with or without the leading hash; rgb() and rgba(); hsl() and hsla(). Comma and space syntax both work, and the hue accepts deg, rad, grad and turn. Named colors like rebeccapurple are not supported.
How is the alpha channel handled?
Alpha is read from the fourth argument, from the slash form and from an 8-digit hex, then printed back in the notation you chose. Turn off "Keep alpha channel" to get the opaque color instead.
Why does a color shift by one digit when I convert it back?
HSL is printed as whole degrees and whole percent, so reading that rounded value again can land on the neighbouring 8-bit color: hsl(217, 91%, 60%) comes back as #3c83f6, not #3b82f6. Browsers round the same way. Keep hex as your source of truth when the exact byte matters.
What does the tint palette do?
It mixes the color toward white and toward black in even lightness steps and lists each variant, so you can build hover, border and disabled shades from one base color. Choose one to eight steps per side.
Is my text uploaded anywhere?
No. The conversion runs entirely in your browser and nothing you paste leaves your device.