HEX / RGB / HSL Colour Converter

The same colour has a different name in every context: hex in a style sheet, RGB in a design tool, HSL in a modern CSS variable, CMYK at the printer. This converter shows all of them at once, along with a lightness ramp you can lift straight into a palette.

How it works

• Hex pairs → decimal 0–255 gives the RGB values.
• HSL derives hue from which channel is strongest, saturation from the spread between the highest and lowest channels, and lightness from their midpoint.
• CMYK is calculated as K = 1 − max(R,G,B), with the remaining inks scaled against it.
• Contrast against white and black uses the same WCAG luminance formula as our contrast checker.

A worked example

#2563EB is RGB 37, 99, 235 — plenty of blue, moderate green, very little red. In HSL that's 217°, 83%, 53%: a blue hue, highly saturated, near mid-lightness. Because it sits at 53% lightness, white text clears 4.5:1 on it while black text doesn't — a decision that takes one glance in HSL and a lot of trial and error in hex.

How to interpret your result

Use hex for CSS and design handoff, HSL when you're generating tints and shades systematically, and CMYK only as a rough guide before a printer produces a proof. The two contrast figures tell you immediately whether white or black text belongs on the colour.

Common real-world uses

• Converting brand colours between design tools, code and print.
• Generating consistent tint and shade ramps for a design system.
• Producing CSS custom properties in HSL for theming.
• Matching a colour sampled from a screenshot or logo.
• Deciding whether white or black text belongs on a brand colour.

Related tools: Colour Contrast Checker · Text Case Converter · JSON Formatter & Validator · UUID Generator