Color Tools & Contrast Checker
Pick a colour and convert it between HEX, RGB, HSL and HSV, generate a full shade and tint scale, check WCAG contrast against any background, and pull a palette from an image. Everything runs in your browser — nothing is uploaded.
Colour
Pick or paste any formatShades & tints
Click a swatch to copy its hexHarmonies
Click a swatch to copy its hexComplementary
Analogous
Triadic
Tetradic
Monochromatic
Export palette
Generated from the shades above:root {
--brand-50: #f9ffeb;
--brand-100: #f3ffd6;
--brand-200: #e6ffad;
--brand-300: #d5ff75;
--brand-400: #c6ff42;
--brand-500: #b8ff14;
--brand-600: #a3eb00;
--brand-700: #87c200;
--brand-800: #6b9900;
--brand-900: #557a00;
--brand-950: #395200;
}{
"50": "#f9ffeb",
"100": "#f3ffd6",
"200": "#e6ffad",
"300": "#d5ff75",
"400": "#c6ff42",
"500": "#b8ff14",
"600": "#a3eb00",
"700": "#87c200",
"800": "#6b9900",
"900": "#557a00",
"950": "#395200"
}@theme {
--color-brand-50: #f9ffeb;
--color-brand-100: #f3ffd6;
--color-brand-200: #e6ffad;
--color-brand-300: #d5ff75;
--color-brand-400: #c6ff42;
--color-brand-500: #b8ff14;
--color-brand-600: #a3eb00;
--color-brand-700: #87c200;
--color-brand-800: #6b9900;
--color-brand-900: #557a00;
--color-brand-950: #395200;
}WCAG contrast checker
Text colour
Background colour
AA · normal
Pass
needs 4.5:1
AA · large
Pass
needs 3:1
AAA · normal
Pass
needs 7:1
AAA · large
Pass
needs 4.5:1
Large text sample
Normal body text sample — this is how this pair reads together.
#0b1020 reaches 18.10:1 against this background — enough for AA.
#0b1020 reaches 18.10:1 against this background — enough for AAA.
Ratios use the WCAG 2.x relative luminance formula. Large text means at least 24px, or at least 18.66px when bold.
Palette contrast matrix
AA normal text · needs 4.5:1| Swatch | On white | On black |
|---|---|---|
| 50 | 1.02:1Fail | 20.53:1Pass |
| 100 | 1.05:1Fail | 20.09:1Pass |
| 200 | 1.09:1Fail | 19.27:1Pass |
| 300 | 1.14:1Fail | 18.39:1Pass |
| 400 | 1.18:1Fail | 17.78:1Pass |
| 500 | 1.21:1Fail | 17.35:1Pass |
| 600 | 1.45:1Fail | 14.44:1Pass |
| 700 | 2.15:1Fail | 9.75:1Pass |
| 800 | 3.40:1Fail | 6.18:1Pass |
| 900 | 5.04:1Pass | 4.17:1Fail |
| 950 | 8.82:1Pass | 2.38:1Fail |
Palette from an image
Stays on your deviceWhat Color Tools & Contrast Checker does
- HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH conversion
- A 50–950 shade-and-tint scale and colour harmonies
- WCAG AA/AAA contrast checker with a full contrast matrix
- A suggested AAA-passing text colour
- On-screen eyedropper and random / nearest-named colour
- Extract a palette from an image (with size control)
- Export as CSS variables, JSON or Tailwind @theme
How to use it
- 01
Open the Color Tools.
- 02
Pick a colour or paste a value to convert between formats.
- 03
Check a text/background pair against WCAG AA and AAA.
- 04
Copy a swatch, or drop in an image to pull its palette.
Common questions
- Are colours and images uploaded?
- No. Colour values and images are processed on your device.
- Can I check accessibility contrast?
- Yes. Check any text/background pair against the WCAG AA and AAA rules, with a full contrast matrix and a suggested accessible alternative colour.
- What formats can I convert between?
- HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH, with a 50–950 shade scale and colour harmonies. You can pick a colour with the on-screen eyedropper, extract a palette from an image, and export as CSS variables, JSON or Tailwind theme tokens.
More tools