Color Palette
Color picker with HEX/RGB/HSL, harmonious palettes and a WCAG contrast checker.
Color picker
- HEX
- #3b82f6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91%, 60%)
Harmonic palette
#c5fce7
#77e9f9
#3c83f6
#1d00f5
#6b00ad
Contrast checker (WCAG)
Sample text in large
This is what normal body text looks like.
The color tool for designers and developers: pick a color via the picker or HEX input and instantly get the values in HEX, RGB and HSL – each with a copy button. The palette generator creates harmonious 5-color palettes by color theory: complementary, analogous or triadic.
The built-in contrast checker tests text and background color against the WCAG accessibility guidelines and shows whether the combination meets levels AA and AAA for normal and large text – including a live preview.
Frequently asked questions
What contrast is needed for accessibility?
Per WCAG, normal text needs at least 4.5:1 (AA) or 7:1 (AAA). For large text (from about 24 px), 3:1 (AA) or 4.5:1 (AAA) is enough.
What do complementary, analogous and triadic mean?
These are harmony rules from color theory: complementary colors sit opposite each other on the color wheel, analogous colors sit next to each other, triadic colors form an equilateral triangle on the wheel.