Color Converter

Convert between HEX, RGB, and HSL with a live swatch. Accepts #1A9CB0, rgb(26,156,176).

What this tool does

Converts colors between HEX (#3B82F6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)) with a live swatch preview. Enter any one format and instantly get the other two, ready to paste into CSS, design tools, or code.

Typical use cases

The design spec says HEX, but you need transparency in CSS — convert to rgba(). Building a palette of “same hue, different lightness”? In HSL you only move the L value, far more intuitive than nudging RGB channels. A color picked from a screenshot comes out as RGB and usually needs converting to HEX for style-guide documents.

Good to know

In HEX, #F80 is shorthand for #FF8800 (each digit doubles) — three characters saved in CSS. In HSL, H is the angle on the color wheel (0 red, 120 green, 240 blue), S is saturation, L is lightness — which matches human intuition, so “make it lighter” or “mute it” is trivial in HSL. All three formats describe the same color space, so conversion is lossless apart from ±1 rounding.