Color Converter

How to use Color Converter

1. Use the picker or type a colour value.
2. See the live swatch and the converted HEX, RGB and HSL.
3. Press copy to paste it into your stylesheet.

Colour formats on the web

HEX, RGB and HSL describe the same colours in different ways. HEX is compact and the most common in design handoffs. RGB mirrors how screens mix red, green and blue light. HSL is the friendliest for humans: to get a darker shade, simply lower the lightness.

Working with HSL

• Hue picks the base colour: 0 is red, 120 green, 240 blue.
• Saturation 0% is grey; 100% is fully vivid.
• Lightness 0% is black, 50% is the pure colour, 100% is white.
• Build a palette by keeping hue and saturation fixed while changing lightness.

Accessibility reminder

Whatever format you use, check that text colours contrast enough with their background. WCAG recommends a contrast ratio of at least 4.5:1 for normal body text. A colour that looks fine to you can be unreadable for people with low vision or in bright sunlight.

Choosing colours for the web

Pick a small palette: one primary colour, one accent and a set of neutrals. Convert the primary to HSL and create lighter and darker variations by changing only the lightness, which keeps the shades visually related. Use darker shades for text and lighter tints for backgrounds.

Check combinations for contrast before shipping. As a rough guide, text and background lightness values that differ by less than about 40 points in HSL often fail accessibility checks, though a proper contrast ratio calculation is the reliable test.

Why use this color converter tool

• Three formats. HEX, RGB and HSL in one view.
• Flexible input. Accepts #abc, #aabbcc, rgb() and hsl().
• CSS-ready. Includes a custom property line.

Frequently asked questions

More free tools