Hex to RGB Converter

Understanding Color Formats

HEX uses a six-digit hexadecimal code (#RRGGBB) and is the most common format in CSS. RGB defines colors by their red, green, and blue components (0-255 each). HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%), making it more intuitive for adjusting colors.

WCAG Contrast Accessibility

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for readable text. AA level requires 4.5:1 for normal text and 3:1 for large text. AAA level requires 7:1 for normal text. This tool calculates contrast ratios between any two colors to help you meet accessibility standards.

Tips for Developers

Use HSL when you need to create color variations — adjusting lightness gives you consistent tints and shades. Use HEX for CSS shorthand. Use RGB when working with canvas or image manipulation APIs. Always check contrast ratios against WCAG standards for accessibility compliance.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX (#FF5733) uses hexadecimal notation and is the most common CSS format. RGB (rgb(255, 87, 51)) defines colors by red, green, and blue channels (0-255). HSL (hsl(11, 100%, 60%)) uses hue (color wheel degree), saturation (intensity), and lightness (brightness). HSL is the most intuitive for adjusting colors programmatically.

What WCAG contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text (under 18px) and 3:1 for large text (18px+ bold or 24px+ regular). WCAG AAA requires 7:1 for normal text. This tool calculates the exact ratio between any two colors and shows whether they pass AA and AAA standards.

How do I create accessible color schemes?

Start with your brand color and use HSL to generate variations: increase lightness for backgrounds, decrease for borders. Always test text color against background color using the WCAG checker. Dark text on light backgrounds typically provides the best readability. Avoid pure red/green combinations for colorblind accessibility.

Can I input RGB values directly?

Yes. This tool supports bidirectional conversion. Type a HEX value and RGB/HSL auto-fill, or type an RGB value like rgb(255, 87, 51) and HEX/HSL auto-fill. You can also use the native color picker or click Random for inspiration.