Color Converter translates colors between HEX, RGB, and HSL formats with a visual preview. Also calculates WCAG contrast ratios against white and black backgrounds, and shows complementary and analogous color harmonies.
How to use this tool
Enter a color in any format — hex (#ff6600), rgb(255,102,0), hsl(24,100%,50%), or a name (coral).
See the color displayed with a preview swatch.
Get the conversion in all three formats: HEX, RGB, HSL.
Check WCAG accessibility contrast against white and black backgrounds.
See complementary and analogous colors for your palette.
Frequently asked questions
What's the difference between HEX, RGB, and HSL?
HEX is a 6-digit code (#FF6600). RGB specifies red, green, blue values 0-255. HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). HSL is most intuitive for humans to adjust.
What is WCAG contrast ratio?
A measure of readability between text and background colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Essential for accessible web design.
How do I pick accessible colors?
Start with your brand color, then adjust lightness in HSL to meet contrast requirements. Dark text on light backgrounds is easier to make accessible. This tool shows contrast ratios to help you check.
What are complementary colors?
Colors opposite each other on the color wheel (180° apart in HSL). They create strong visual contrast. Analogous colors are adjacent (30° apart) and create harmonious, subtle combinations.