ColorContrast
🎨 Engineering Calculator

Hex ↔ RGB ↔ HSL Converter

Enter a hex color to see RGB, HSL, and relative luminance — the designer's translation layer.

How the color converter works

Three coordinate systems

  • HEX: #RRGGBB — the web's native format, compact and unambiguous.
  • RGB: three channel values (0–255) — what screens actually display, terrible for human reasoning.
  • HSL: hue (0–360° color wheel), saturation (0–100% gray↔vivid), lightness (0–100% black↔white) — how humans think about color.

Why HSL builds better palettes

  1. Rotate hue for harmony (analogous ±30°, complementary 180°, triadic ±120°) — the relationship lives in the H number.
  2. Tune lightness for contrast: the luminance readout shows whether your adjusted color will pass — design against the target.
  3. Keep saturation families: buttons, alerts, and badges share saturation levels even across hues — HSL makes the family visible.

The luminance line

Relative luminance (WCAG's perceptually weighted measure) appears with every conversion — 0 is black, 1 is white. Pair two colors whose luminances straddle 0.5 widely and the contrast takes care of itself; the contrast checker confirms.