HEX, RGB and HSL Color Converter

Convert a color between HEX, RGB and HSL, and check its contrast.

Runs in your browser — nothing is uploaded

Color

HEX	#10b981
RGB	rgb(16, 185, 129)
HSL	hsl(160, 84%, 39%)
CSS variable	--brand: #10b981;

On white

2.54:1

Sample text

Body text fails (4.5:1) Large text fails (3:1)

On black

8.28:1

Sample text

Body text passes (4.5:1) Large text passes (3:1)

Three ways to say the same color

HEX is compact and what design tools hand you. RGB is the same three numbers in decimal. HSL describes hue, saturation and lightness instead, which is the one to reach for when you want a set of related colors: keep the hue, move the lightness, and you have a consistent scale rather than three guesses.

What the contrast numbers mean

The ratio compares your color against white and against black. WCAG asks for at least 4.5:1 for body text and 3:1 for large text — roughly 24px, or 19px bold. A brand color that fails on both is fine for a logo and a poor choice for a paragraph.

This matters more than it sounds. Low-contrast text is the most common accessibility problem on small business websites, and the one visitors notice first — usually as "your site is hard to read" rather than as a complaint about contrast.

Other free tools

JSON formatter Pretty-print messy JSON, minify it back down, and get the exact line where it breaks.Base64 converter Encode text to Base64 or decode it back, with full Unicode support.URL encoder Percent-encode text for safe use in links and query strings, or decode it back.HTML entities Turn markup into escaped entities so it shows as text, or decode entities back.Meta tag generator Build title, description, Open Graph and Twitter tags, and see how the result looks in search and when shared.robots.txt generator Build a valid robots.txt, including blocking AI crawlers, without memorising the syntax.

Need the whole website, not just the snippet?

Describe it in a sentence and relivo builds it — free until you put it online.

See how