Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
What is a colour converter?
The same colour can be written in several notations: HEX (#3366ff) for CSS and design handoff, RGB (51, 102, 255) for screens and APIs, and HSL (hue, saturation, lightness), which is far easier to reason about when you want to lighten or desaturate a shade. A converter moves between those notations without changing the colour itself.
Worked example: #3366FF means R=0x33=51, G=0x66=102 and B=0xFF=255, that is rgb(51, 102, 255). With max=255 and min=51, lightness is L=(255+51)/2/255=60%. The blue channel dominates, so saturation is 100% and the hue lands in the blue sector at 225°, giving hsl(225, 100%, 60%). White text on this blue reaches a WCAG contrast ratio of about 4.7:1 — just above the 4.5:1 needed for AA body text.
How to use the colour converter
- Type or paste a colour as #hex, rgb() or hsl(), or pick one from the colour wheel.
- Read the converted values in the other notations and copy the one you need.
- Switch between complementary and triadic harmony to explore matching palettes.
- Enter foreground and background colours to check the WCAG contrast ratio for normal and large text.
Frequently asked questions about colour and contrast
What contrast ratio do I need for accessibility?
WCAG 2 AA requires at least 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold). Level AAA raises this to 7:1 and 4.5:1. The checker shows both thresholds live.
What is the difference between HEX, RGB and HSL?
They encode the same colour differently. HEX is compact and common in CSS, RGB maps straight to the screen channels, and HSL describes hue, saturation and lightness, which is far easier to adjust in code.
What are complementary and triadic colours?
The complementary colour sits 180° opposite yours on the wheel and creates strong contrast; a triadic palette takes three colours spaced 120° apart for a vibrant but balanced scheme.
