HEX to RGB Color Converter

Convert HEX color codes to RGB, HSL, and HSV format with WCAG contrast checking.

R 79

G 140

B 255

HEX

#4f8cff

RGB

rgb(79, 140, 255)

HSL

hsl(220, 100%, 66%)

HSV

hsv(220°, 69%, 100%)

Contrast

4.5:1 (AA ✅) / 4.6:1 (AA ✅)

Free Online HEX to RGB Converter

Convert HEX color codes to RGB, HSL, and HSV formats instantly. Includes WCAG contrast checking for accessibility validation.

Perfect for web designers, developers, and anyone working with colors. All conversions happen instantly in your browser — no data sent to servers, complete privacy.

Understanding Color Formats

HEX Format: A 6-digit hexadecimal code representing colors, commonly used in CSS and design tools. Format: #RRGGBB where RR=red, GG=green, BB=blue (00-FF). Example: #4f8cff produces a bright blue.

RGB Format: Three decimal values (0-255) for red, green, and blue channels. Used in CSS rgb() function and image editing software. More intuitive than HEX for color mixing.

HSL Format: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Hue represents the color wheel position (0=red, 120=green, 240=blue). Saturation controls color intensity. Lightness controls brightness from black (0%) to white (100%).

HSV Format: Hue (0-360°), Saturation (0-100%), Value/Brightness (0-100%). Similar to HSL but Value represents pure color intensity regardless of lightness. Popular in graphics software like Photoshop and Figma.

WCAG Contrast Checking

The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios for text readability:

AA Level: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold)
AAA Level: 7:1 for normal text, 4.5:1 for large text
Non-text elements: 3:1 minimum for UI components and graphical objects

This tool calculates contrast ratios against both white (#ffffff) and black (#000000) backgrounds, showing pass/fail status for AA compliance. Use it to ensure your color choices meet accessibility standards.

When to Use Each Format

HEX: Web development (CSS), design handoffs, compact color representation
RGB: Image editing, CSS animations, when you need individual channel control
HSL: Creating color variations (tints, shades, tones), adjusting saturation/lightness independently
HSV: Graphics software workflows, color picking interfaces, intuitive color adjustment

Common Use Cases

Web Design: Convert HEX codes from design tools to RGB for CSS animations or HSL for theme generation
Accessibility Auditing: Check if your brand colors meet WCAG contrast requirements
Design Systems: Generate color palettes by adjusting HSL lightness (e.g., 50%, 60%, 70% variants)
Theme Development: Convert between formats for light/dark mode color transformations
Cross-Platform Consistency: Ensure colors match across web, mobile, and desktop applications

How It Works

Enter a HEX code (#RRGGBB or 6 digits) to convert to RGB (0-255 per channel), HSL (hue, saturation, lightness), and HSV (hue, saturation, value). The tool also calculates WCAG contrast ratios for accessibility — AA requires 4.5:1 for normal text, 3:1 for large text.

Use the RGB sliders to adjust colors visually. The contrast checker shows whether your color meets accessibility standards for both white and black text. All calculations happen instantly in your browser.

Frequently Asked Questions

What is HEX color format?

HEX is a hexadecimal color code using six digits (e.g., #4f8cff). The first two digits represent red, the next two green, and the last two blue. Each pair ranges from 00 (0) to FF (255).

What is RGB color format?

RGB uses three values for red, green, and blue, each ranging from 0 to 255. For example, rgb(79, 140, 255) means 79 red, 140 green, and 255 blue.

What is HSL color format?

HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). It's more intuitive for adjusting colors. For example, hsl(220, 100%, 66%) is a bright blue.

What is HSV color format?

HSV uses hue (0-360°), saturation (0-100%), and value/brightness (0-100%). Similar to HSL but value ranges from pure black to pure color, regardless of lightness.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures text readability against a background. AA requires 4.5:1 for normal text and 3:1 for large text. The tool checks both white and black text.

Is this converter free to use?

Yes, this converter is completely free. No registration or signup is required. Just open the page and start converting colors.

Related Tools

Color Picker RGB to HEX HSL to RGB