Color Converter

Converts a color between the three formats most common in CSS and design tools — HEX (`#rrggbb`), RGB (`rgb(r, g, b)`), and HSL (`hsl(hue, saturation%, lightness%)`) — updating all three the moment you change any one of them, plus a color picker for choosing visually.

Type a value into the HEX, RGB, or HSL field, or click the color picker swatch to choose a color visually; the other two fields update automatically to match. Copy whichever format you need with the copy button.

A pure medium blue like `#3366CC` corresponds to `rgb(51, 102, 204)` and `hsl(220, 60%, 50%)` — the same color, described three different ways depending on whether you're thinking in hexadecimal bytes, red/green/blue channels, or hue/saturation/lightness.

HEX and RGB both describe a color as amounts of red, green, and blue light, just written differently (hexadecimal pairs vs. decimal 0–255 values); HSL instead describes a color by its position on a color wheel (hue), how vivid it is (saturation), and how light or dark it is (lightness), which many people find more intuitive for adjusting shades.

HEX is the most common format in CSS and design software for a compact, exact color; RGB is common in canvas/graphics code and where individual channels matter; HSL is often preferred when generating color variations, since sliding the lightness or saturation value produces predictable lighter, darker, or more muted versions of the same hue.

This tool converts fully opaque colors between these three formats; it does not handle alpha transparency (RGBA/HSLA), named CSS colors, or other color spaces like CMYK or LAB.

Conversion runs entirely in your browser via client-side JavaScript; the colors you enter are never uploaded to a server or stored.