Colour Palette & Contrast
Nothing leaves your browser
Convert a colour to every CSS format, build a palette from it, and check whether two colours meet WCAG contrast, with the nearest colour that does.
Convert colours, build palettes and check WCAG contrast. Everything is calculated in this tab.
Convert a colour
| Format | Value | Copy |
|---|---|---|
| HEX | #3b82f6 | |
| RGB | rgb(59 130 246) | |
| HSL | hsl(217.2 91.2% 59.8%) | |
| OKLCH | oklch(62.3% 0.188 259.8) | |
| CSS name | (no CSS name for this colour) | |
| CSS variable | --color: #3b82f6; |
Palette from this colour
- 50#f2f7ff
- 100#e3eeff
- 200#c6dcff
- 300#a2c6ff
- 400#77abff
- 500#3b82f6 (your colour)
- 600#276ee0
- 700#1857bb
- 800#0c4295
- 900#063172
- 950#021e4d
Complementary
- Base#3b82f6
- 2#b07d00
Split complementary
- Base#3b82f6
- 2#d26200
- 3#8d8d00
Triadic
- Base#3b82f6
- 2#e24956
- 3#3ba01b
Analogous
- 1#0094c3
- 2#3b82f6
- 3#886cee
Exported palette
:root {
--brand-50: #f2f7ff;
--brand-100: #e3eeff;
--brand-200: #c6dcff;
--brand-300: #a2c6ff;
--brand-400: #77abff;
--brand-500: #3b82f6;
--brand-600: #276ee0;
--brand-700: #1857bb;
--brand-800: #0c4295;
--brand-900: #063172;
--brand-950: #021e4d;
}
Contrast check (WCAG)
Contrast ratio 4.47 : 1
| Requirement | Needs | Result |
|---|---|---|
| AA, normal text | 4.5 : 1 | Fail |
| AA, large text (18 pt, or 14 pt bold, and bigger) | 3 : 1 | Pass |
| AA, UI components and graphics | 3 : 1 | Pass |
| AAA, normal text | 7 : 1 | Fail |
| AAA, large text | 4.5 : 1 | Fail |
The ratio is rounded down to two decimals, and a result is judged on the exact value: 4.499 fails 4.5. A transparent text colour is laid over the background, and a transparent background over white.
Closest text colour that passes
- AA normal text (4.5 : 1)
#7676764.54 : 1 - AAA normal text (7 : 1)
#5959597.00 : 1
The suggestion keeps the hue and saturation of your text colour and only changes its lightness.
Large heading sample
Normal paragraph text sample: the quick brown fox jumps over the lazy dog.
The preview uses your colours as they are, so it can fail contrast on purpose. The colour-vision views are approximations, not a medical test.