Every screen color is three bytes — red, green, blue — but developers and designers read those bytes in different dialects. This converter keeps HEX, RGB and HSL in sync, with a live swatch and the accessibility check most color tools forget.
The three notations
HEX (#3B82F6) is the compact web-native form: two hex digits per channel, shorthand #abc doubling to #aabbcc. RGB spells the same bytes in decimal — rgb(59, 130, 246). HSL reorganizes them for humans: hue on the 0–360° color wheel, saturation, lightness — so "same blue, lighter" is a single number edit instead of hex surgery.
Contrast: the check that matters
WCAG accessibility guidelines require text contrast of 4.5:1 (AA) against its background — the difference between readable and squint-worthy for millions of users. The two badges rate your color as a background under white and black text using the official relative-luminance formula; ✓ AA means normal text passes, "(large only)" means 3:1 headline territory.
Why HSL earns its place
Design systems build palettes by holding hue fixed and stepping lightness — exactly what HSL exposes. A 10-shade blue ramp is one hue, ten lightness values. Complementary colors sit 180° apart on the hue wheel; triads at 120°. None of that is visible in hex.
Neighbors in the toolbox
Hex digits themselves — why B is 11 and F is 15 — unfold in the number base converter; byte-level encodings in the binary translator. Screen dimensions to go with your colors: the aspect ratio calculator.
Opaque colors (no alpha); WCAG 2.x contrast math.