Zellio.io

Color Converter

Convert HEX, RGB and HSL and check WCAG contrast in real time.

Runs locallyWorks offlineShare link carries settings, never your data
Send output toBase64 Encode / DecodeCode FormatterRegex Tester & BuilderBuild a workflow from thisOutput stays on this page until you send it.

Frequently asked questions

What is a WCAG contrast ratio?

It measures the luminance difference between text and its background. WCAG recommends at least 4.5:1 for normal text (AA) so content stays readable for everyone. A ratio of 7:1 (AAA) is preferred for maximum accessibility, especially for users with low vision or color blindness. The contrast ratio is calculated from the relative luminance values of the foreground and background colors, with higher ratios indicating better readability. Testing your color combinations against WCAG guidelines ensures your website complies with accessibility standards and remains usable for users with various vision abilities.

Which colour formats are supported?

HEX, RGB and HSL, converted both ways in real time, plus a live contrast check between two colours. HEX (hexadecimal) format like #FF5733 is compact and widely supported in web design; RGB (0-255 per channel) is intuitive and commonly used in code; HSL (hue, saturation, lightness) is the most human-friendly for understanding color relationships. The converter instantly translates between all three formats as you edit, so you can work in whichever format suits your workflow. The live contrast ratio checker helps you verify accessibility compliance by testing any two colors together before implementing them in your design.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro tips

  • Adjust colours in HSL and export in HEX. Making something 10% darker is one number in HSL and three educated guesses in hex.
  • Check contrast against the actual background the text will sit on, including any overlay or gradient, rather than against plain white.
  • Remember the 3:1 threshold applies to large text only — a heading can pass a tint that the paragraph beneath it fails.
  • Test your palette's contrast before it is signed off. Retrofitting accessibility across a finished design is far more work than choosing a slightly deeper shade now.
  • Do not rely on colour alone to convey state; a red and green pair can be identical to a colourblind reader even at a passing contrast ratio.

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 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.

The three notations describe the same colour and are not equally easy to reason about. HEX and RGB both specify amounts of red, green and blue, which is how a screen emits light but not how anyone thinks about colour: nudging #1E90FF slightly darker means adjusting three values and guessing. HSL re-parameterises the same space as hue, saturation and lightness, so darker is one number down and the hue is untouched. That is why palettes are usually built in HSL and shipped in HEX.

Contrast is the part that has consequences beyond taste. WCAG expresses it as a ratio between the relative luminance of two colours, and the thresholds depend on text size: normal body text needs 4.5:1 to pass AA, while large text clears at 3:1. Luminance is weighted toward green and is not the same as how bright a colour looks, which is why two colours that feel similarly dark can score very differently and why checking beats guessing.

Common use cases

  • Developers translating a brand colour from a style guide's HEX into the RGB or HSL a component expects.
  • Designers checking a text and background pairing clears WCAG AA before a design review rather than after an audit.
  • Teams building a tint and shade scale from a base colour by stepping lightness in HSL.
  • Anyone matching a colour picked out of a screenshot to the nearest value in an existing palette.
  • Accessibility reviewers documenting which combinations in an interface pass and which need changing.
How it comparesCoolors and Adobe Color are stronger for generating a palette from scratch, and neither foregrounds the contrast check. Browser devtools show contrast for an element already on a page; this is the version you can use while the colour still only exists in a document.