Utilities Processed locally

Color Converter

Convert a colour between HEX, RGB, HSL and OKLCH, or paste two colours on separate lines to score them for WCAG 2.1 contrast - the exact ratio plus pass or fail at AA and AAA for normal and large text. Eight-digit hex with alpha, CSS colour names and all four function notations are accepted. The Tints & shades tab generates a full ramp from any base colour.

Converts as you type. Ctrl+Enter to re-run.

Guide & FAQ

A colour converter and contrast checker in one. Enter any CSS colour and get every other notation ready to copy, including OKLCH - the perceptually uniform space where two colours with the same lightness value actually look equally light, which is why OKLCH palettes need far less hand-tuning than HSL ones. Enter two colours and the pair is scored against WCAG 2.1, so an accessibility question is answered with a number rather than a guess. Everything runs in your browser.

What it does
  • Converts between notations: #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), oklch() and CSS colour names.
  • Scores contrast for a foreground/background pair against WCAG 2.1: AA normal (4.5:1), AA large (3:1), AAA normal (7:1) and non-text UI (3:1).
  • Reports relative luminance and the contrast the colour achieves on white and on black.
  • Generates tints and shades - an eleven-step ramp with each step's contrast on white.
  • Converts a whole palette - paste three or more colours for a conversion table.
  • Handles alpha in both eight-digit hex and the slash syntax of modern CSS.
When to use it
  • Checking whether body text passes AA contrast on a brand background before shipping.
  • Converting a designer's HEX palette into the HSL or OKLCH values your CSS tokens use.
  • Building a tint and shade scale from a single brand colour.
  • Fixing an accessibility audit finding that quotes a contrast ratio.
  • Translating rgb() values from a screenshot picker into hex for a stylesheet.
  • Deciding whether white or black text is more readable on a given surface.
How to use it
  1. Paste a colour in any notation - #0af, rgb(124 92 255), hsl(252 100% 68%), oklch(60% 0.23 286) or a name such as tomato.
  2. Read the conversions in the output panel, each ready to copy.
  3. For contrast, put the foreground colour on the first line and the background on the second.
  4. Open Tints & shades for a generated ramp with contrast values.
  5. Paste three or more colours to convert a whole palette at once.
FAQ

FAQ

  • What contrast ratio does WCAG require? 4.5:1 for normal text at AA, 3:1 for large text (18pt, or 14pt bold), and 7:1 for AAA. Non-text UI elements such as input borders and icons need 3:1 under WCAG 2.1.
  • Why use OKLCH instead of HSL? OKLCH is perceptually uniform - two colours with the same L value look equally light. In HSL, a yellow and a blue at 50% lightness look nothing alike, which is why HSL palettes need constant manual correction.
  • How do I convert HEX to RGB? Paste the hex value and read the RGB line. Three-digit shorthand (#0af) and eight-digit hex with alpha (#7c5cffcc) are both expanded correctly.
  • What is eight-digit hex? #RRGGBBAA - the last two characters are the alpha channel. 80 is roughly 50% opacity and FF is fully opaque. Every current browser supports it.
  • Does contrast depend on which colour is the background? No - the ratio is symmetric, so swapping foreground and background gives the same number. What changes is perception: light text on a dark background reads slightly thinner, so err on the generous side for body copy.
  • Can I check contrast for a whole palette? Paste two colours to score a pair. For a palette, use the Tints & shades tab, which lists each step's contrast against white.
  • Is my palette uploaded? No. Colour conversion is arithmetic performed in your browser - nothing is sent to a server.

Runs locally in your browser. No uploads. Share links use an encrypted URL fragment.