Color picker and contrast checker
Pick a color and copy it as HEX, RGB or HSL. Get tints, shades and harmony palettes, export them as CSS variables, and check text contrast against WCAG.
Pick a color
The color picker cannot set transparency. Type it instead (for example #1e88e580 or rgba(30, 136, 229, 0.5)); the alpha is kept when you change the color with the picker.
- HEX
#1e88e5- RGB
rgb(30, 136, 229)- HSL
hsl(208, 79%, 51%)
Recent colors
Nothing yet. Colors you settle on with the picker or the palette appear here, up to 10 (cleared when you close the page).
Palette
Press a swatch to make it the current color. Use the Copy buttons to copy. Palette colors are fully opaque.
Tints and shades
#d2e7fa#a5cff5#78b8ef#4ba0ea#1e88e5#186db7#125289#0c365c#061b2e
Complementary
#1e88e5#e57b1e
Analogous (±30°)
#1ee5de#1e88e5#1e25e5
Split complementary (150°, 210°)
#1e88e5#e51e25#e5de1e
Triadic (120° apart)
#1e88e5#e51e88#88e51e
Export the palette
Contrast checker
Sample of normal text (16px)
Large text sample (24px)
Contrast ratio
4.48:1
| Level | Result |
|---|---|
| AA normal text (4.5:1) | ✗ Fail |
| AA large text (3:1) | ✓ Pass |
| AAA normal text (7:1) | ✗ Fail |
| AAA large text (4.5:1) | ✗ Fail |
The translucent text color is blended over the background before the ratio is calculated.
The background transparency is ignored: the background is treated as opaque.
Checked against the WCAG 2.2 thresholds of success criteria 1.4.3 (AA) and 1.4.6 (AAA). Large text means at least 18pt (24px), or 14pt (about 18.66px) bold. The ratio is not rounded up before checking (4.49:1 is below 4.5:1).
How to use
- Choose a color with the picker or type one into "Color value", for example #1e88e5, rgb(30, 136, 229) or hsl(208, 79%, 51%).
- Press the Copy button next to HEX, RGB or HSL.
- The palette shows tints, shades and harmony colors. Press a swatch to make it the current color, or Copy to copy its code.
- Under "Export the palette", choose CSS variables, SCSS variables or JSON and a name prefix, then copy the result.
- In the contrast checker, set a text and a background color to see the ratio and the AA and AAA results.
Notes and limits
- The browser color picker cannot set transparency. Type it as #rrggbbaa or rgba() instead.
- Named colors (such as red), hwb(), lab() and oklch() are not recognized.
- Palettes are opaque. Harmonies rotate the hue in HSL, so they may not match how the colors look to the eye.
- The background in the contrast checker is treated as opaque; its alpha is ignored.
- The result compares numbers with the WCAG thresholds only and does not cover accessibility as a whole. Recent colors are not saved and disappear when you close the page.
How it works
Tints mix the color with 20%, 40%, 60% and 80% white, and shades with the same amounts of black, in sRGB.
Complementary rotates the hue by 180°, analogous by ±30°, split complementary by 150° and 210°, and triadic by 120° and 240°, keeping saturation and lightness.
The contrast ratio uses WCAG 2.2 relative luminance: (lighter + 0.05) / (darker + 0.05). A translucent text color is blended over the background first.
Levels follow success criterion 1.4.3 (AA: 4.5:1 normal text, 3:1 large text) and 1.4.6 (AAA: 7:1 normal, 4.5:1 large).
FAQ
Does a contrast ratio of 4.48:1 pass AA?
Not for normal text, which needs at least 4.5:1. It passes for large text (3:1). WCAG does not allow rounding up, so anything below 4.5 is shown as a fail.
Can I use transparent colors?
Yes. Type something like #1e88e580 or rgba(30, 136, 229, 0.5). In the contrast checker a translucent text color is blended over the background.
How do I use the exported CSS variables?
Paste the :root block into your stylesheet and reference a value such as color: var(--color-base);. You can change the prefix.
Are my colors sent anywhere?
No. Everything is calculated in your browser and nothing is saved or uploaded.
Related tools
Last updated: