The same color can be written several ways in CSS. Knowing what each format is good for, and converting between them quickly, makes building consistent palettes much easier.
The three formats
- HEX (
#3DDA85): compact, the most common in design handoffs. Hard to tweak by hand. - RGB (
rgb(61, 218, 133)): red, green, blue channels. Useful when you need an alpha channel withrgba(). - HSL (
hsl(146, 68%, 55%)): hue, saturation, lightness. The easiest to reason about for humans.
They all describe the same colors; they just slice them differently.
Convert in two steps
- Open the Color Converter.
- Enter a color in any format and read it back in HEX, RGB, and HSL.
Why HSL is worth learning
HSL makes color variations trivial:
- Want a darker shade for a hover state? Lower the lightness.
- Want a muted version? Lower the saturation.
- Want a matching accent? Shift the hue and keep the rest.
This is far easier than nudging hex digits and hoping. Many design systems define a base color in HSL and derive the rest from it.
Accessibility check
Whatever format you use, text needs enough contrast against its background. Pick your colors, then verify the pair passes WCAG before shipping.
Related tools
- Building a full set of shades? Use the Color Palette Generator.
- Need a gradient from two colors? Try the CSS Gradient Generator.
- Checking text contrast? See the WCAG Contrast Checker.
Work in HSL when you are designing, export to HEX for handoff, and reach for RGB when you need alpha.