Color Converter

Convert colors between HEX, RGB, and HSL formats. Includes a WCAG contrast ratio checker for accessibility compliance.

What is a Color Converter?

A color converter translates color values between different notation systems used in web development and design. The three most common formats are HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), and HSL (e.g., hsl(11, 100%, 60%)). Each format represents the same color differently, and developers often need to convert between them depending on the context.

This tool converts colors between HEX, RGB, and HSL formats, includes a visual color picker, and checks WCAG contrast ratios for accessibility compliance.

How to Use This Color Converter

Enter a color value — Type a color in HEX, RGB, or HSL format in the input field.

Or use the picker — Click the color picker to visually select a color.

View all formats — The tool instantly shows the equivalent value in all three formats (HEX, RGB, HSL).

Check contrast — Enter a foreground and background color to check WCAG contrast ratios for accessibility.

Copy any value — Use the copy buttons to grab the color value in your preferred format.

Common Use Cases

CSS development — Convert between HEX and RGB/HSL when different CSS properties or design tools use different formats.

Accessibility testing — Check that text and background color combinations meet WCAG AA or AAA contrast requirements.

Design handoff — Convert colors from design tool formats (often HEX) to CSS-friendly HSL for easier manipulation.

Theme creation — Use HSL format to create consistent color palettes by adjusting hue while keeping saturation and lightness constant.

Frequently Asked Questions

How do I convert HEX to RGB?

Enter your HEX color code (e.g., #FF5733) in the HEX input field and the RGB values will be calculated automatically. Each pair of hex digits represents the red, green, and blue channels respectively.

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

HEX uses hexadecimal notation (#RRGGBB) and is most common in web development. RGB defines colors by red, green, and blue channel values (0-255). HSL uses hue (0-360 degrees), saturation (0-100%), and lightness (0-100%), which is often more intuitive for adjusting colors.

What is a WCAG contrast ratio?

The WCAG contrast ratio measures the luminance difference between two colors. A minimum ratio of 4.5:1 is required for normal text (AA level) and 7:1 for enhanced accessibility (AAA level). This tool calculates the ratio between your chosen foreground and background colors.