Color Converter

HEX, RGB and HSL — same color, three notations

All three formats describe the same 16.7 million sRGB colors, just from different angles. #a78bfa packs the red, green and blue channels into three hex byte pairs; rgb(167, 139, 250) spells out the same channels in decimal 0–255. hsl(255, 89%, 76%) is the human-friendly view: a hue angle on the color wheel (0° red, 120° green, 240° blue), saturation from grey to vivid, and lightness from black to white. Because they're equivalent, conversion is pure math — this tool implements it directly, handling 3-digit shorthand hex like #abc (which expands to #aabbcc) as well as the full 6-digit form.

Why designers reach for HSL

HEX and RGB are what browsers and design files store, but they're opaque to humans — you can't look at #a78bfa and know how to make it darker. In HSL the operations become obvious: lower the lightness for a hover state, drop the saturation for a disabled state, shift the hue by 180° for a complementary accent. A common workflow is to pick a brand color visually, convert it here, derive the variants in HSL, and copy the HEX back into your stylesheet. The generated CSS variable snippet gives you both the HEX value and the raw RGB channel triplet — the latter is useful for alpha composition patterns like rgba(var(--brand-color-rgb), 0.5).

FAQ

What's the difference between 3-digit and 6-digit hex?

#abc is shorthand where each digit is doubled: it equals #aabbcc. It can only express colors whose channel bytes have repeated digits, so pickers output the 6-digit form. Both are valid CSS and this tool accepts both, with or without the leading #.

Why don't my HSL values round-trip to exactly the same numbers?

HSL values here are rounded to whole degrees and percent for readability, and several nearby HSL triplets can map to the same RGB color. The displayed color is always exact — only the human-readable HSL representation is rounded, which is the standard behavior of design tools and browser dev-tools.

Does this handle alpha/transparency?

The converter works on opaque colors — the 6-digit HEX, rgb() and hsl() forms. To add transparency in CSS, append an alpha channel to any of them: #a78bfa80, rgb(167 139 250 / 0.5) or hsl(255 89% 76% / 0.5) — the color part is exactly what you copy from here.