Convert colors between HEX, RGB, HSL, and HSB. Check WCAG contrast and generate palettes.
Complementary
Analogous
Triadic
Split-Complementary
This color converter tool lets you instantly translate colors between HEX, RGB, HSL, and HSB/HSV formats. Whether you're writing CSS, working in a design tool, or building a brand style guide, having accurate color values in every format saves time and prevents mistakes.
The tool also includes a WCAG contrast checker to help you build accessible interfaces. According to the World Health Organization, over 2.2 billion people have vision impairment, making color contrast a critical aspect of inclusive design. The built-in palette generator helps you explore shades, tints, and color harmonies to build cohesive color schemes.
Web Design
Pick and convert colors for websites, landing pages, and UI designs
CSS Development
Get ready-to-use CSS values in hex, rgb(), and hsl() formats
Accessibility
Check WCAG contrast ratios to ensure text readability for all users
Brand Colors
Convert brand colors between formats for style guides and design systems
How do I convert HEX to RGB?
Enter your HEX color code (e.g., #3b82f6) in the HEX input field. The tool instantly converts it to RGB, HSL, and HSB values. You can also use the color picker to visually select a color.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) both describe colors using hue and saturation, but differ in the third component. HSL uses lightness (0% = black, 100% = white, 50% = pure color), while HSB uses brightness (0% = black, 100% = pure color). HSL is more common in CSS, while HSB is popular in design tools like Photoshop and Figma.
What WCAG contrast ratio do I need for accessible text?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 3:1 for large text (AA level). For enhanced accessibility (AAA level), you need 7:1 for normal text and 4.5:1 for large text. Use the Contrast tab to check your color combinations.
How do color harmonies work?
Color harmonies are combinations of colors based on their position on the color wheel. Complementary colors are opposite each other (180 degrees apart), analogous colors are adjacent (30 degrees apart), triadic colors are evenly spaced (120 degrees apart), and split-complementary uses the two colors adjacent to the complement.
Can I generate a color palette from a single color?
Yes! Go to the Palette tab to see shades (darker) and tints (lighter) of your selected color. The tool generates 9 evenly spaced variations from light to dark. You can also view harmony-based palettes (complementary, analogous, triadic, split-complementary) on both the Converter and Palette tabs.
Privacy First
All color conversions happen in your browser. Your data never leaves your device.
Free online JSON formatter, validator, and beautifier. Format, minify, validate, and prettify JSON data instantly. No signup required. Works offline in your browser.
Convert JavaScript object literals to valid JSON
Free online JSON merge tool. Combine two JSON objects with deep or shallow merge strategies. Perfect for config files, API responses, and data manipulation.