About This Tool
A comprehensive color toolkit for designers and developers. Convert between HEX, RGB, and HSL formats, generate harmonious color palettes, create CSS gradients, and check WCAG contrast ratios for accessibility compliance.
How to Use
Use the Converter tab to translate colors between HEX, RGB, and HSL formats instantly.
Generate color palettes from a base color — complementary, analogous, triadic, and more.
Build CSS gradients with the Gradient tab — choose colors, direction, and copy the CSS.
Check accessibility with the Contrast tab — test foreground/background combinations against WCAG AA and AAA standards.
Frequently Asked Questions
What is WCAG contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What's the difference between HEX, RGB, and HSL?
HEX uses hexadecimal (#FF5733). RGB uses red, green, blue values (255, 87, 51). HSL uses hue, saturation, lightness (14°, 100%, 60%). They describe the same colors in different ways.
How do color harmonies work?
Color harmonies are combinations that look pleasing together based on their position on the color wheel. Complementary colors are opposite, analogous are adjacent, and triadic colors are evenly spaced.