Color Converter hex rgb hsl
Convert colors between HEX, RGB, and HSL notation with a live preview swatch.
What this tool does
The web offers several ways to specify a color. HEX writes the red, green, and blue channels in hexadecimal, as in #22c55e, and is the notation used by design tools and CSS. RGB writes each channel as a decimal number from 0 to 255, which is convenient in code. HSL describes hue, saturation, and lightness, which makes adjusting brightness within one color family or finding a complementary hue far more intuitive.
Enter a color in any notation and this tool shows the others alongside a preview swatch. Typical uses are converting a HEX value from a design file into rgba for use with transparency, or switching to HSL to derive a hover state by changing only the lightness.
When to use it
Use it to move design colors into CSS rgba values, to build slightly lighter or darker variants of an existing color, to organise a theme palette, or to see what a color value found in code actually looks like.
Input and output examples
#22c55e
rgb(34, 197, 94) / hsl(142, 71%, 45%)
The same color expressed in three notations.
rgb(0, 0, 0)
#000000 / hsl(0, 0%, 0%)
For colors without saturation the hue value carries no meaning.
Notes and limitations
Rounding during conversion can shift values slightly. HEX and RGB map to each other as integers, but HSL involves floating point arithmetic, so converting HEX to HSL and back can change the final digits. Colors on screen also depend on the display profile and brightness, so verify on real devices when exact color matters, and check contrast separately if you must meet accessibility requirements.
Frequently asked questions
Converting back and forth changes the value slightly.
HSL conversion involves floating point arithmetic and rounding. The difference is normally imperceptible.
How do I set transparency?
In CSS use a fourth value, as in rgba(34, 197, 94, 0.5), or the eight-digit HEX form such as #22c55e80.