Color converter

HEX ↔ RGB ↔ HSL with a live swatch, plus automatically generated tints and shades of your color for palette building.

HEX R, G, B H, S%, L%

Tints & shades (mix with white / black)

How it works

All three formats describe the same color: HEX packs RGB into six hex digits; RGB states the channel amounts 0–255; HSL describes hue (0–360°), saturation and lightness — the model designers think in, because L=50% plus a hue rotation gives predictable harmonies. Conversions run on every keystroke and stay in sync whichever field you edit.

Frequently asked questions

Why do my HSL values differ slightly from Photoshop's?

Some tools round hue to whole degrees or use slightly different RGB→HSL math. Values within ±1–2 are equivalent.

What are tints and shades?

Tints mix the color with white (higher lightness); shades mix with black (lower). The strip generates both from your base color for instant palette building.

Written and maintained by Steven Huang · Last reviewed October 29, 2026.