Docify

Color converter

Convert colors between hex, RGB, and HSL in your browser. CSS Color Module Level 4. Opaque sRGB only. Nothing uploaded.

Docify's color converter maps opaque sRGB hex, rgb(), and hsl() in your browser. Hex is CSS Color Module Level 4 (W3C CRD, 9 October 2026): #RGB / #RRGGBB (3-digit form duplicates each nibble; the spec example is #123 → #112233). HSL uses the Level 4 hslToRgb / rgbToHsl sample functions; 0–1 channels become bytes with Math.round(channel * 255). Converting the sample produces #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%). #36c and 36C convert to that same triple. Click Convert to run the conversion. Not named colors, not Display P3, and not alpha. This page does not encode UTF-8 text as RFC 4648 §8 hex. For text-to-hex encoding, see /base16/. Nothing is uploaded.

Color
Converted sRGB

Swatch and values appear after Convert.

Hex
—
rgb()
—
hsl()
—

How it works

  1. Enter a color value and click Convert. For example, #3366cc produces #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%). Copy writes those three lines. Nothing is uploaded.
  2. Hex is CSS Color Module Level 4 (W3C CRD, 9 October 2026): #RGB or #RRGGBB, optional #. Three digits expand by duplicating each nibble (the spec example is #123 → #112233). #36c and 36C convert to the same triple. Output hex is lowercase #RRGGBB.
  3. rgb() is legacy commas and integers 0–255. hsl() is legacy commas with a unitless hue (degrees; wrapped with ((h % 360) + 360) % 360) and percent saturation and lightness. rgb(51, 102, 204) and hsl(220, 60%, 50%) convert to that same triple. hsl(-140, 60%, 50%) and hsl(580, 60%, 50%) wrap to the same sample blue. HSL uses the Level 4 hslToRgb / rgbToHsl sample functions. Bytes are Math.round(channel * 255).
  4. This is not named colors, not rgba() / 8-digit hex, not modern space-separated functions, not Display P3, and not a contrast checker. The swatch sets background-color to the computed hex. This page does not encode UTF-8 text as RFC 4648 §8 hex. For text-to-hex encoding, see /base16/.

sRGB Hex vs rgb() vs hsl()

This page maps one 8-bit opaque sRGB triple among three CSS Color Module Level 4 spellings. Hex and rgb() name the same 0–255 channels. hsl() is a cylindrical view of that same cube via the Level 4 hslToRgb / rgbToHsl sample functions; 0–1 channels become bytes with Math.round(channel * 255). Hue wraps with ((h % 360) + 360) % 360. For the longer comparison, see sRGB Hex vs rgb() vs hsl(): Same Triple, Three Spellings.

AspectHexrgb()hsl()
Algorithm8-bit sRGB as #RRGGBB (optional #)Legacy commas, integers 0–255Level 4 hslToRgb / rgbToHsl; hue degrees, percent S/L
Sample triple#3366ccrgb(51, 102, 204)hsl(220, 60%, 50%)
Shorthand / wrap#36c and 36C expand to #3366cc; spec example #123 → #112233No 3-digit formhsl(-140, 60%, 50%) and hsl(580, 60%, 50%) wrap to the same blue
Out of rangeInvalid hex is rejectedrgb(300, 0, 0) is an error, not #ff0000Saturation and lightness must be 0–100; values are not clamped
Alpha4-digit / 8-digit rejectedrgba() rejectedhsla() rejected
Typical useCompact tokensChannel mathHue, saturation, lightness

#3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%) are one triple. Output hex is lowercase #RRGGBB. Achromatic colors serialize as hsl(0, 0%, L%) because the spec leaves hue undefined — #000000 is hsl(0, 0%, 0%) and #ffffff is hsl(0, 0%, 100%). hsl(0, 0%, 50%) round-trips through #808080 to hsl(0, 0%, 50.2%) because Math.round(0.5 * 255) is 128. Space-separated rgb(51 102 204), percentages in rgb(), and hue units (deg / rad / turn) are rejected. Named colors, Display P3, Lab, and color() are out of scope. Encoding UTF-8 as RFC 4648 §8 hex belongs on Base16, not this converter.

Color conversion in Python

The snippet below maps an 8-bit sRGB triple to HLS and back with CPython colorsys.rgb_to_hls and hls_to_rgb. Those calls use 0–1 floats. Hue is a fraction of the circle (HLS argument order is hue, lightness, saturation — not CSS hsl(h, s%, l%) degrees and percents). For #3366cc / rgb(51, 102, 204), the HLS tuple is the same color this page writes as hsl(220, 60%, 50%). Node has no stdlib color converter — Buffer encodings are hex, base64, and base64url, not HSL. For the three CSS spellings of one sRGB triple, see sRGB Hex vs rgb() vs hsl(): Same Triple, Three Spellings.

Python with colorsys.rgb_to_hls

Divide each channel by 255 first — colorsys does not parse #3366cc or rgb(). Round the reverse channels with round(c * 255) to get the same bytes this page shows:

import colorsys

h, l, s = colorsys.rgb_to_hls(51 / 255, 102 / 255, 204 / 255)
# (0.6111111111111112, 0.5, 0.6000000000000001)
# CSS hsl() uses degrees and percents: hsl(220, 60%, 50%)

rf, gf, bf = colorsys.hls_to_rgb(h, l, s)
rgb_bytes = tuple(round(c * 255) for c in (rf, gf, bf))
# (51, 102, 204)

hex_srgb = '#{:02x}{:02x}{:02x}'.format(*rgb_bytes)
# '#3366cc'

colorsys is not a CSS parser and is not the Level 4 hslToRgb / rgbToHsl sample functions this page runs. The sample triple matches; other colors can differ after rounding. Hue wraps modulo 1.0, so -140 / 360 and 580 / 360 are the same blue as 220 / 360 — this page wraps degrees the same way. Achromatic input returns hue 0.0; this page serializes those as hsl(0, 0%, L%) because the spec leaves hue undefined. rgb_to_hsv is HSV, not HSL — a different cylinder, and not this tool. rgb_to_yiq is YIQ, not this tool. bytes.hex() and bytes.fromhex encode UTF-8 as RFC 4648 §8 hex — that belongs on Base16, not this converter. Named colors, Display P3, Lab, and alpha are out of scope here too.

FAQ

Does this converter upload my color?
No. Convert and copy run in your browser. The page does not send the color string to a server.
Which color syntax is accepted?
Opaque sRGB only: #RGB or #RRGGBB (the # is optional; CSS Color Module Level 4 (W3C CRD, 9 October 2026, https://www.w3.org/TR/2026/CRD-css-color-4-20261009/) expands 3-digit hex by duplicating each nibble, so #36c is #3366cc; the spec’s own example is #123 → #112233), rgb(r, g, b) with integers 0–255, or hsl(h, s%, l%) with a unitless hue in degrees and percent saturation and lightness. The sample color #3366cc Convert writes #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%). #36c and 36C convert to that same triple. Click Convert to run the conversion. 4-digit / 8-digit hex, rgba(), hsla(), slash-alpha, space-separated modern functions, percentages in rgb(), hue units (deg/rad/turn), named colors, and color() are rejected.
How are hex, RGB, and HSL converted?
Hex and rgb() are the same 8-bit sRGB triple. HSL uses the CSS Color Module Level 4 sample functions: hslToRgb (hue degrees 0–360, sat/light 0–100 → sRGB 0–1) and rgbToHsl (the reverse). 0–1 channels become bytes with Math.round(channel * 255). Hue wraps with ((h % 360) + 360) % 360. Converting the sample produces hex #3366cc, rgb(51, 102, 204), and hsl(220, 60%, 50%). rgb(51, 102, 204) and hsl(220, 60%, 50%) convert to that same triple. hsl(-140, 60%, 50%) and hsl(580, 60%, 50%) wrap to the same sample blue. Achromatic colors (saturation about 0) serialize as hsl(0, 0%, L%) because the spec leaves hue undefined. Output hex is lowercase #RRGGBB.
Is this Display P3, Lab, or a contrast checker?
No. There is no ICC profile, no Display P3 / Rec.2020, no Lab / LCH / OKLCH / HWB, no relative color syntax, and no WCAG contrast or accessibility audit. The swatch is background-color set to the computed hex in the browser’s sRGB handling. Not a color picker, not an eyedropper, and not a palette generator. This page does not encode UTF-8 text as RFC 4648 §8 hex. For text-to-hex encoding, see /base16/.

Related