Color Converter

Convert colors between HEX, RGB, HSL, and other formats.

Enter a color (any format)

Supports HEX, RGB, RGBA, HSL, HSLA, and color names

All Formats (click to copy)

HEX

#2563eb

RGB

rgb(37, 99, 235)

RGBA

rgba(37, 99, 235, 1)

HSL

hsl(217, 91%, 53%)

HSLA

hsla(217, 91%, 53%, 1)

CSS Filter

Why colors have so many formats

Web color is a small mess that exists for historical reasons. CSS supports four ways to write the same color — HEX, RGB, HSL, and named keywords — and each has its moment. This tool converts between the formats so you don't have to do the math yourself, and it shows you a live swatch as you type.

HEX (`#2563eb`)

Six hex digits encoding three channels: red, green, blue, each from 0 to 255. The most compact format, the one designers paste from Figma, the one source code is full of. The four-digit shorthand #abc expands to #aabbcc — useful when each channel happens to be a doubled pair. An eight-digit form #2563ebff adds an alpha channel.

RGB and RGBA

Same channels, written in decimal. rgb(37, 99, 235). Slightly more readable than hex when you're tweaking values by hand, and RGBA adds a fourth value for alpha (transparency) from 0 to 1. Modern CSS also accepts space-separated syntax with a slash for alpha: rgb(37 99 235 / 0.5).

HSL and HSLA

Hue, saturation, lightness. The format that actually maps to how humans think about color. Hue is an angle from 0 to 360 around the color wheel: 0 is red, 120 is green, 240 is blue. Saturation is a percentage from gray (0%) to vivid (100%). Lightness is from black (0%) through the pure color (50%) to white (100%). HSL is the format you want when you're building a design system or tweaking a single color — want a more saturated version of this blue? Bump the saturation. Want a darker blue? Drop the lightness. The same operations in hex or RGB are guesswork.

Practical uses

Building a hover state. Take your base color in HSL, drop the lightness by 8%, and you have a darker variant that stays in the same hue family. Doing the same in hex requires three independent subtractions, all of which can drift the hue.
Generating palette variants. Same hue, different lightness values gives you a tonal scale. Same lightness, different hues gives you a monochrome palette. HSL makes both trivial.
Reading designs. Hex codes from a designer mean nothing in your head. The HSL conversion immediately tells you "this is a desaturated, dark blue" or "a warm, mid-saturation orange."
Accessibility checks. WCAG contrast ratios depend on relative luminance, which is closer to (but not identical to) HSL lightness. A glance at the L value catches obvious problems — a 95% L color will not be readable on white.

Things to know

HSL is not perceptual

Two HSL colors with the same lightness can look very different in brightness. Yellow at L=50% looks much brighter than blue at L=50%. This is why modern design tools and CSS are slowly moving toward perceptual color spaces like LCH and OKLCH, which fix this. HSL is still everywhere because it's older, simpler, and good enough for most cases.

Alpha vs. opacity

The alpha channel inside a color (RGBA, HSLA) and the CSS opacity property look similar but compose differently. opacity applies to an entire element including its children. RGBA alpha applies only to that one color value. Reach for alpha when you want a translucent background but solid foreground text on top of it.

Named colors

CSS has 147 named colors — tomato, cornflowerblue, papayawhip. Fine for prototypes, almost never the right answer for production: they're inflexible and have no relationship to a design system. The names are also a historical accident, mostly inherited from a 1989 X11 color list.