palette Color Converter star

How It Works

These three notations all describe the exact same underlying color — they simply encode the red, green and blue light levels a screen mixes to produce it. RGB stores each channel as a decimal number from 0 to 255. HEX is just RGB written in base 16: each channel becomes a two-digit hexadecimal pair, so rgb(255, 128, 0) becomes #ff8000 (ff = 255, 80 = 128, 00 = 0). No color information is gained or lost in this translation — it is pure notation.

HSL is different: it re-derives the color along three perceptual axes — hue, saturation and lightness — calculated mathematically from the RGB channels. Hue (0–360°) is the angle on a color wheel, computed from which channel is largest and how far apart the channels are: for #ff8000, red is maximum (255) and blue is minimum (0), and the formula 60 × ((green − blue) / (max − min)) gives 60 × (128/255) ≈ 30°, placing it in the orange band. Lightness is the average of the highest and lowest channel — here (255 + 0) / 2 ≈ 50%. Saturation measures how far the color sits from gray at that lightness — 100% here, since one channel is at full intensity and another at zero. Together they read as hsl(30, 100%, 50%) — the same orange as #ff8000, described differently.

This is exactly why designers reach for HSL over RGB: to make a color 20% darker while keeping its hue, HSL only needs the lightness value lowered — RGB would require recalculating all three channels proportionally. Pick a color with the picker or type any HEX code and this tool converts to both notations instantly.

What You Should Know

Short 3-digit HEX (#f80) and 4/8-digit forms with an alpha channel (#ff8000cc, rgba(255,128,0,0.8)) are common variants; this tool works with standard 6-digit opaque HEX and its RGB/HSL equivalents. Color names like orange map to fixed HEX values defined in the CSS specification, but not every named color has a memorable HEX code, which is another reason developers convert back and forth. Two colors that look identical on one monitor can render slightly differently on another, because consumer displays vary in color gamut and calibration — HEX/RGB/HSL values are exact numbers, but the light they produce is not guaranteed to be identical across screens. When choosing text and background colors, remember that HSL's lightness value is not the same as perceptual contrast — a saturated yellow and a saturated blue can share the same L value yet look very different against white, so accessibility checks should use a proper contrast ratio calculation, not just the L number.

CSS also accepts percentage-based RGB, such as rgb(100%, 50%, 0%), as an exact equivalent to rgb(255, 128, 0) — useful when working with design tools that express color as percentages rather than 0–255 integers. Newer CSS color functions like oklch() and lab() go a step further than HSL: they are built to be perceptually uniform, meaning equal numeric steps in lightness look equally different to the human eye across every hue, which plain HSL does not fully guarantee. For everyday web and UI work, though, HEX, RGB and HSL remain the three formats you will meet in nearly every codebase, style guide and design tool.