Color Converter — HEX, RGB, HSL

HEX, RGB, HSL: one source of truth for design tokens

Converting between cylindrical (HSL) and cube-root models helps when a design system stores tokens in HEX but animation tweens in HSL for perceptual smoothness.

Gamut differences between displays mean on-screen matches are approximate; print workflows need CMYK profiles not covered here.

HEX, RGB and HSL describe the same colour

All three formats specify a colour in the sRGB colour space used by browsers. HEX is RGB written in base 16: #6366F1 means red 0x63 = 99, green 0x66 = 102 and blue 0xF1 = 241, so it is identical to rgb(99, 102, 241). HSL re-expresses the same colour as hue (an angle around the colour wheel, 0–360°), saturation and lightness (0–100%) — here hsl(239, 84%, 67%).

The converter accepts six-digit hex codes and the three-digit CSS shorthand, in which each digit is doubled: #FFF is #FFFFFF and #3A7 is #33AA77. Upper and lower case are equivalent.

Why HSL values do not always round-trip

HSL is shown in whole degrees and percentages, which is coarser than RGB. Converting #6366F1 to hsl(239, 84%, 67%) and back gives #6467F2 — one step brighter in each channel. The difference is invisible, but if you are matching a brand colour exactly, keep the HEX value as the source of truth and use HSL only for adjustments.

Using HSL to build a palette

• Lighter and darker shades: keep hue and saturation, change lightness — hsl(239, 84%, 90%) for a background tint, hsl(239, 84%, 40%) for hover states.
• Muted versions: lower the saturation while keeping hue and lightness.
• Complementary colour: add 180° to the hue. Triadic colours sit 120° apart, analogous colours 30° either side.
• Equal HSL lightness does not mean equal perceived brightness: yellow at 50% looks much lighter than blue at 50%. Check contrast rather than trusting the L value.

Checking text contrast

The Web Content Accessibility Guidelines (WCAG 2) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). Indigo #6366F1 on white measures 4.47:1 — just short for body text, though fine for large headings and buttons. A slightly darker #4F46E5 reaches 6.29:1. For neutral greys, #767676 is the lightest that passes 4.5:1 on white.

Screen and print

HEX, RGB and HSL describe light from a screen. Printing uses CMYK inks with a smaller range of reproducible colours, so very saturated screen colours — bright blues and greens especially — print duller. Ask your printer for their colour profile, or specify a Pantone reference, when an exact printed match matters.

Modern CSS colour syntax

Current CSS accepts space-separated values with an optional alpha after a slash — rgb(99 102 241 / 50%) and hsl(239 84% 67% / 0.5) — alongside the comma forms this tool outputs. Eight-digit hex adds alpha as the last two digits (#6366F180 is about 50% opacity); this converter works with opaque colours, so drop those two digits before pasting. Newer spaces such as oklch() describe colours more evenly for the eye and can reach wider-gamut displays, but HEX and RGB remain the common currency of design tools.