Color Converter

The Color Converter is a free online color converter that keeps HEX, RGB and HSL in sync — change any one of them and the other two, plus a live swatch, update immediately. Type a value directly, or pick visually with the built-in color picker; the tool also runs a hex to rgb and rgb to hex conversion automatically as you type, so you never have to do the arithmetic by hand.

HEX (#3b82f6) is the compact format used in CSS and design handoffs, RGB (rgb(59, 130, 246)) is what canvas APIs and many image libraries expect, and HSL (hsl(217, 91%, 60%)) describes a color by hue, saturation and lightness — the format designers reach for when they want to nudge a color lighter, darker or more saturated without changing its hue. Converting between all three by hand is tedious and easy to get wrong; this tool makes it a copy-paste job while showing the actual rendered color so you can confirm it's right before it goes into code.

Below the converter sits a built-in WCAG contrast checker: it computes the contrast ratio of your current color against pure white and pure black text (and vice versa), using the same relative-luminance formula from the WCAG 2.x spec, and labels each result AAA, AA or Fail. That's directly useful for accessibility work — picking a background color and immediately seeing whether white or black text will actually be legible on it, without switching to a separate contrast tool.

Every calculation — the HEX/RGB/HSL conversion and the contrast math — runs locally in JavaScript in your browser as you type, so there's no lag waiting on a server and no color values are ever transmitted anywhere. One thing to note: the color picker and swatch preview are HEX-based, so entering an out-of-range HSL or RGB value (like a saturation over 100%) will show a validation message rather than silently clamping it.