Color Picker & Converter: formats and contrast explained
A short guide to colour formats and accessible contrast — what HEX, RGB and HSL mean, how WCAG ratios work, and how to use the tool.
Open the Color Converter →What this tool does
The Color Picker & Converter lets you pick a colour and instantly read it as HEX, RGB and HSL, copy any format, and check whether two colours have enough contrast for readable text. It all runs in your browser.
HEX, RGB and HSL
- HEX — a six-digit base-16 code like
#4f46e5; two digits each for red, green, and blue. - RGB — the same channels as numbers 0–255, e.g.
rgb(79, 70, 229). - HSL — hue (0–360°), saturation and lightness (%). Great for nudging a colour lighter, darker, or more muted by hand.
How to use it
- Open the Color Converter and pick a colour, or type a HEX value.
- Copy the HEX, RGB, or HSL value you need.
- Set a background colour to check contrast against, and read the ratio and pass/fail badges.
Understanding contrast
Contrast ratio runs from 1:1 (identical) to 21:1 (black on white). The WCAG accessibility guidelines set minimums:
- AA normal text — at least 4.5:1.
- AA large text (≈18pt+ or 14pt bold) — at least 3:1.
- AAA normal text — at least 7:1.
The checker shows the ratio and whether it passes each, with a live text preview.
It runs locally
The picker, conversions, and contrast maths all run in your browser — nothing is uploaded.
FAQ
HEX vs RGB vs HSL?
Different notations for the same colour; HSL is the easiest to adjust by hand.
What ratio do I need?
4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA.
Is anything uploaded?
No — it all runs in your browser.
Ready to try it? Open the Color Converter →