Zellio.io

HEX ⇄ RGB ⇄ HSL Color Converter

Convert color formats and verify accessibility contrast instantly.

Processed locally — nothing is uploaded

About Color Converter

The contrast readout is the useful half, scoring a foreground and background pair against WCAG thresholds while you adjust them. You find out a combination fails at the point you can still change it, rather than in an audit months later.

Convert a HEX colour to its RGB and HSL values and back, and check the WCAG contrast ratio against a background for accessibility. Every value updates live in your browser.

Convert colours between HEX, RGB and HSL in both directions and check WCAG contrast ratios for accessibility as you work. Designers and developers use it to translate brand colours across formats and to confirm text is readable against its background.

Pair a foreground and background colour to see whether the combination clears AA or AAA. The thresholds differ by size — large text passes at 3:1 where body text needs 4.5:1 — which is why a heading can survive a tint its own paragraph cannot.

Learn how this works

A Practical Guide to Everyday Developer Encoding & FormattingHow and when to use Base64, JSON formatting, hashing, JWTs, regex and cron — with free in-browser tools for each task.11 min read

Frequently asked questions

How does a hex colour map to RGB?

Each pair of hex digits is one channel: #FF8800 is red FF (255), green 88 (136), blue 00 (0). Because each pair is base-16, every channel covers exactly 0 to 255.

What does a three-digit hex code mean?

It is shorthand where each digit is doubled, so #F80 expands to #FF8800. It only works when both digits of every channel match, which is why not every colour has a short form.

What about the eight-digit codes I sometimes see?

The last pair is alpha — opacity. #FF880080 is the same colour at roughly 50% opacity. Support is universal in modern browsers, though older design tools may not read it.

Common Use Cases

  • •Converting a brand hex code into the rgb() value a CSS variable needs
  • •Translating a colour between a design tool and code
  • •Getting channel values to tweak one component of a colour

More Color Converter tools

Color Converter

Related tools

Base64 Encode / DecodeConvert text or files to and from Base64 instantly in your browser.Code FormatterBeautify, minify and validate JSON, HTML, CSS, SQL, XML and YAML.Regex Tester & BuilderTest patterns against text and build common regex from presets.Slug / URL EncoderClean broken URLs or turn any title into a safe URL slug.