sRGB Hex vs rgb() vs hsl(): Same Triple, Three Spellings
Hex, rgb(), and hsl() are three spellings of one 8-bit opaque sRGB triple. CSS Color Module Level 4 (W3C CRD, 9 October 2026) expands #RGB by duplicating each nibble: #36c is #3366cc, which is rgb(51, 102, 204) and hsl(220, 60%, 50%). Convert on /color-converter/. #36c and 36C convert to that same triple. HSL uses the Level 4 hslToRgb / rgbToHsl sample functions; bytes are Math.round(channel * 255). Not named colors, not Display P3, not alpha. Encoding UTF-8 text as RFC 4648 §8 hex (foobar → 666F6F626172) is /base16/, not this color converter. Nothing is uploaded.
A hex code is not a different color model from rgb(). Both name the same three 0–255 channels. HSL is a cylindrical view of that same sRGB cube, not P3 or Lab. The live color converter maps those three spellings in the browser. This page names the expansion, the legacy comma syntax, and the 8-bit round-trip. Encoding the letters of a string as RFC 4648 §8 hex is a different algorithm — that output is foobar → 666F6F626172 on /base16/.
Three-digit hex duplicates nibbles
#36c is #3366cc, not #00306c
Level 4 §5.2 in the dated 9 October 2026 CRD: a 3-digit #RGB token is the 6-digit form obtained by duplicating each digit. The spec example is #123 → #112233 (rgb(17, 34, 51)). The example #3366cc Convert writes #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%) — the same triple as #36c or 36C (the # is optional here; CSS itself requires it). Letters are case-insensitive: #00ff00 equals #00FF00. Output hex is lowercase #RRGGBB. Three-digit hex names 4096 colors; six-digit hex names 16,777,216.
4-digit and 8-digit hex carry alpha
Level 4 also defines #RGBA and #RRGGBBAA. Those expand the same way, but the extra nibble is opacity. This page converts opaque sRGB only, so a 4-digit or 8-digit body is rejected before any expand. rgba() and hsla() are rejected for the same reason.
Legacy commas, not modern spaces
rgb() here is integers 0–255 with commas
CSS Color Level 4 keeps a legacy color syntax for Web compatibility: components separated by commas. The converter accepts only rgb(51, 102, 204) — integers, inclusive 0–255, not clamped. rgb(300, 0, 0) is an error, not #ff0000. Modern space-separated rgb(51 102 204), percentages, and slash-alpha rgb(51 102 204 / 0.5) are rejected. Click Convert to run. Copy writes the hex, rgb(), and hsl() lines.
hsl() hue is a unitless degree, then wrapped
Legacy hsl() here is hsl(220, 60%, 50%): a unitless hue in degrees, then percent saturation and lightness (0–100, not clamped). Hue wraps with ((h % 360) + 360) % 360, so hsl(-140, 60%, 50%) and hsl(580, 60%, 50%) are the same sample blue. Units such as deg / rad / turn are rejected. HSL → sRGB uses the Level 4 §7.1 hslToRgb sample (f(0), f(8), f(4)); 0–1 channels become bytes with Math.round(channel * 255).
8-bit round-trip, missing hue
50% lightness is not a 127.5 byte
sRGB → HSL uses Level 4 §7.2 rgbToHsl. For #3366cc the channels are 51/255, 102/255, 204/255 — hue 220, saturation 60, lightness 50 — so the three spellings round-trip. Gray is different: hsl(0, 0%, 50%) has light 0.5, and Math.round(0.5 * 255) is 128, which is #808080. 128/255 is 50.196…%, serialized to one decimal as hsl(0, 0%, 50.2%). The swatch is background-color set to that computed hex.
Achromatic hue is missing, written as 0
When saturation is about 0, rgbToHsl sets hue to NaN (the spec’s missing / powerless hue; any hue would look the same). Legacy comma serialization cannot write none, so this page uses 0: #000000 is hsl(0, 0%, 0%) and #ffffff is hsl(0, 0%, 100%). That 0 is a serialization choice, not a stored red. Copy writes the three lines. The sample fills #3366cc; clicking Convert writes #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%). This is not a named-color table, not color(), not Display P3, and not a WCAG contrast checker.
sRGB hex is not RFC 4648 Base16
#3366cc is a color; foobar → 666F6F626172 is bytes
Hex on this page is an 8-bit sRGB triple, not an encoding. Example: Convert returns #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%) because #36c duplicates each nibble. The Base16 encoder writes RFC 4648 §8 (0–9 A–F, no padding) of UTF-8 bytes. Encoding ASCII foobar writes 666F6F626172. Integer hex ff → 255 on /number-base/ is a radix, not a color. A SHA-256 output on /hash-generator/ is also hex, but it is an unkeyed digest, not an sRGB triple and not Base16 of typed text. The live color converter does not encode text.
Convert an opaque sRGB color in the browser
Hex, rgb(), and hsl() of the same 8-bit triple. Nothing is uploaded.
Use Color Converter →FAQ
- What is the difference between Hex, RGB, and HSL?
- Hex uses #RRGGBB notation. RGB uses rgb(r,g,b) with 0-255 values. HSL uses hue, saturation, lightness.
- Which format should I use in CSS?
- All three work in CSS. Hex is compact, RGB is intuitive, HSL makes color manipulation easier.
- Are they all sRGB?
- Yes, standard CSS colors use sRGB color space. Display P3 and other spaces need different syntax.
- Does this tool upload my data?
- No. All conversion runs in your browser using JavaScript. Nothing is sent to a server.