Hex, RGB, and HSL are three ways of writing the same thing: an sRGB color value. Hex is compact (#3b82f6), RGB is what the screen actually does (three 8-bit channels), and HSL reorganises the same information into hue, saturation, and lightness so humans can reason about color changes more intuitively. This tool lets you edit any of the three and see the other two update instantly, with a native color picker and a visible swatch to boot.
Pick a color in any of the editors. The hex field takes typed input; the RGB and HSL sections have individual sliders for each channel; the native picker is the quickest way to eyeball a color without typing. Every format is kept synchronized to a single underlying value, so there’s no risk of the editors drifting out of sync.
When to use each format
Hex is the CSS default. It’s compact (seven characters including the hash), unambiguous, and every design tool exports it. Use it for stylesheets, design tokens, documentation, and anywhere you need to write a color once and read it in the future.
RGB is what pixels actually are. A single pixel on a modern monitor holds a red, green, and blue channel, each with 256 possible values, and the combination is what the screen shows. Use RGB when you’re doing math on pixels — image processing, color manipulation in canvas code, or anywhere you want the raw channel values because you need to modify them directly.
HSL separates the perceptual dimensions of color. Hue is “which color is it” (angle around the color wheel), saturation is “how colorful is it”, lightness is “how bright is it”. If you want to make a color slightly darker without changing its hue, HSL makes that easy — just reduce L. Doing the same thing in RGB is a pain because you have to scale all three channels together while watching for clipping. Use HSL when you’re designing variations of a brand color, generating tints and shades, or thinking about color in human terms. For picking complementary or triadic partners from a base hue, the harmony visualizer runs the angle math automatically.
The conversion math
RGB to hex is trivial — each channel is a byte, and each byte is two hex digits. rgb(255, 128, 0) becomes #ff8000 by converting each decimal number to its two-digit hex equivalent.
RGB to HSL is where it gets interesting. The formula is in the CSS Color 4 spec but the key idea is:
Lightness is the midpoint between the highest and lowest channel values. Saturation is how far apart the highest and lowest are, scaled by L. Hue is which channel is highest — red, green, or blue — mapped onto the color wheel by how much the other two channels are offset from it.
The inverse, HSL to RGB, runs the same logic backwards. When saturation is zero, R = G = B = L (it’s a shade of grey regardless of hue). When saturation is positive, the three channels are computed by walking around the color wheel from the chosen hue.
Both conversions are lossless for colors that fit in the 8-bit sRGB gamut, which is every color CSS natively supports. Round-tripping hex → HSL → hex always gives you back the same hex value for the primary colors (red, green, blue, cyan, magenta, yellow, black, white, and mid-grey). For non-primary colors, rounding at the integer boundaries can cause a one-step drift in some channels, but the round-tripped color is always indistinguishable by eye.
Example: generating a hover state from a brand color
You have a brand color #3b82f6 (a Tailwind blue) and you want a slightly darker hover state. In hex or RGB this is awkward — you’d have to darken each channel by some amount and hope the result still looks balanced. In HSL it’s one operation: convert to HSL (216, 91%, 60%), reduce the lightness by 10 to 50, convert back. The result is #1d6ddd, a darker version of the same blue with identical hue and saturation.
Doing it in HSL preserves the “blueness” of the color because the hue and saturation are locked in place. Try the same operation in RGB by subtracting 25 from each channel and you’ll get a slightly different color — still blue, but the shift is uneven because the human visual system weights the channels unequally. Before committing the hover shade, check its contrast against the button background — a darker hover that passes AA on white may quietly fail on a coloured surface.
Example: converting a designer’s HSL spec into hex for CSS
Your design system spec says “primary is hsl(216, 91%, 60%)”. CSS accepts HSL directly (hsl(216 91% 60%)), but many codebases still use hex for consistency with legacy systems. Paste the HSL values into the slider inputs and read off the hex equivalent: #3b82f6. Copy-paste into your stylesheet and you’re done.
What this tool does not do
It does not handle alpha channels — color picking here is strictly opaque. For rgba and hsla with alpha, most of the conversion logic is the same, and you can just append your alpha value to the output; the tool doesn’t add it automatically because most users want the opaque form.
It does not support display-P3, Lab, LCH, Oklch, or any of the other wider-gamut or perceptually-uniform color spaces that CSS Color 4 is rolling out. Those are more complex conversions that benefit from their own dedicated tool. For the sRGB triangle, which still covers almost all web design work, this converter has you covered.