Colour Converter
Convert colours between HEX, RGB, HSL, and OKLCH. Includes a WCAG AA/AAA contrast checker. Runs in your browser.
Runs entirely in your browser. Nothing is sent to our servers.
About this tool
Converts a colour between HEX, RGB, HSL, and OKLCH, and tells you whether the pair has enough contrast to meet WCAG accessibility guidelines. Everything runs in your browser.
Which format should you use?
- HEX — most common in design tools and CSS. Compact and
copy-friendly. Use 8-digit form (
#RRGGBBAA) for alpha. - RGB — easiest to mix programmatically. Use modern
space-separated
rgb(200 32 46 / 0.8)syntax in new code. - HSL — best for tweaking hue/saturation/lightness by hand. The cylindrical model maps loosely to perceived attributes.
- OKLCH — perceptually uniform; equal numeric steps in lightness or chroma look like equal visual steps. Excellent for palettes where you want consistent perceived contrast.
WCAG contrast
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold) at level AA, and 7:1 / 4.5:1 at level AAA. UI components and graphical objects need 3:1.
Frequently asked questions
- Why does my OKLCH-converted colour look slightly different than the original?
- OKLCH and the others all describe the same colour exactly, but rounding to 3-4 decimal places introduces tiny precision losses. For display, the difference is invisible. For machine-to-machine round-trips, use more decimal places.
- Does the contrast checker handle alpha channels?
- The check assumes both colours are fully opaque. If either has transparency, compute the visible colour over its actual background first. WCAG's formula doesn't define behavior for translucent foregrounds.
- What's the practical difference between AA and AAA?
- AA is the legal baseline for most accessibility regulations (including AODA in Ontario and the ACA federally in Canada). AAA is stricter and harder to achieve in design — recommended where possible but not required for compliance.
- Can I enter a CSS variable or named colour?
- CSS named colours like "rebeccapurple" or "tomato" work. CSS variables (
var(--accent)) don't — the tool can't resolve them without page context.
Last updated: May 17, 2026