Color Converter

Hex, rgb(), and hsl() are three spellings of one sRGB color. CSS Color Module Level 4 says sRGB is the default color space for CSS and is used for all of these legacy color forms, citing IEC 61966-2-1:1999 for its definition. That definition fixes the red, green, and blue primaries at the same chromaticities as ITU-R BT.709 HDTV (red at x 0.640, y 0.330, green at 0.300, 0.600, and blue at 0.150, 0.060), a D65 white point, and a transfer curve that is linear up to an encoded value of 0.04045 and follows a 2.4 power with a 0.055 offset above it. A hex code stores the encoded values, not light intensity, and every conversion on this page works on those encoded values. The curve only matters when you need physical light, as in the contrast math further down.

Section 5.2 of CSS Color 4 defines #rrggbb as three base-16 pairs, where 00 is the minimum and ff, or 255, is the maximum. That gives each channel 256 levels, and six digits give 256 × 256 × 256 = 16,777,216 colors. The 3-digit form doubles each digit, so #123 is #112233, and the spec notes it reaches only 4,096 colors. The 4- and 8-digit forms add an alpha pair, which this tool rejects. Hex to RGB is exact in both directions because it only changes the base.

HSL rearranges the same encoded values. With each channel scaled to 0 to 1, lightness is (max + min) / 2, saturation is (max - lightness) / min(lightness, 1 - lightness), and hue is the 60-degree sector of the largest channel plus how far the other two pull it. CSS Color 4 publishes sample code for both directions in sections 7.1 and 7.2. This tool's sector method is algebraically the same, though the two can land on different sides of an exact half because of floating point. Because lightness is a plain average of encoded channels, the spec warns that it does not track how light a color looks. Yellow and blue are both hsl lightness 50%, yet their WCAG relative luminance is 0.9278 and 0.0722.

Whole-number HSL is coarser than hex. The tool prints hue in whole degrees and saturation and lightness in whole percents, which allows 361 × 101 × 101 = 3,682,561 HSL inputs. Running every one of them through the converter reaches only 2,037,749 distinct hex codes, 12.1 percent of the 16,777,216. Going the other way, 1,775,549 hex colors (10.6 percent) come back unchanged after hex to HSL to hex. For 54.4 percent the largest channel change is 1, for 32.1 percent it is 2, and the worst 108 colors move by 5. CSS Color 4 asks browsers to keep sRGB values precise enough to round-trip 8-bit channels and to round toward +∞ rather than truncate, a bar whole-number HSL cannot meet. This tool rounds exact halves up the same way, so in hsl(0, 100%, 5%), whose red channel is exactly 25.5, the result is #1a0000. Keep hex or RGB as the stored value.

Two limits sit outside the format math. The first is gamut. Hex, rgb(), and hsl() can only name colors inside sRGB. CSS Color 4 adds color(display-p3 r g b) for the wider Display P3 space, whose red and green primaries (x 0.680, y 0.320 and x 0.265, y 0.690) sit outside the sRGB triangle, and it notes that modern displays, laptop screens, and phone screens can show all or nearly all of that space. A Display P3 color outside sRGB has no exact hex code, and bringing it into sRGB takes gamut mapping, which this tool does not do. The second is contrast. WCAG 2.2 Success Criterion 1.4.3 asks for 4.5:1 between normal text and its background and 3:1 for large text, using relative luminance computed from linearized channels as 0.2126 R + 0.7152 G + 0.0722 B. White text on this page's default #3b82f6 measures 3.68:1, fine for large headings but short of 4.5:1 for body copy.