Hex to RGB Converter
Convert hex color codes to RGB and HSL values, preview the color swatch, and check text-contrast accessibility — essential for web and graphic design.
Frequently Asked Questions
How does a hex color code convert to RGB?
A 6-digit hex code is three pairs of hexadecimal digits, each pair representing one color channel (0–255): the first pair = Red, second = Green, third = Blue. Convert each pair from base-16 to base-10: #3B82F6 → R = 3B₁₆ = 59, G = 82₁₆ = 130, B = F6₁₆ = 246. The result: rgb(59, 130, 246) — a medium blue. #000000 = black (all channels 0); #FFFFFF = white (all channels 255); #FF0000 = pure red.
What is HSL color and how does it differ from RGB?
HSL (Hue, Saturation, Lightness) is an alternative color model designed to be more intuitive than RGB. Hue (0–360°) selects the base color on the color wheel (0° = red, 120° = green, 240° = blue). Saturation (0–100%) controls colour intensity — 0% is greyscale, 100% is fully vivid. Lightness (0–100%) controls brightness — 0% is black, 50% is the pure color, 100% is white. HSL makes it easy to create color variations: same hue, varying lightness for a button's hover/active states.
What are WCAG contrast ratio requirements for accessible web design?
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios: AA standard (widely required): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). AAA standard (stricter): 7:1 for normal text, 4.5:1 for large text. UI components (buttons, icons) require 3:1 against adjacent colors. The contrast ratio formula compares relative luminance — #FFFFFF on #000000 is 21:1 (maximum). Many countries' accessibility laws (ADA, EN 301 549) reference WCAG AA as the legal minimum.
What is the difference between hex, RGB, RGBA, and CSS color names?
These are all ways to specify colors in web development. Hex (#RRGGBB) is the most compact. RGB (rgb(R,G,B)) uses decimal values 0–255. RGBA adds an alpha (opacity) channel: rgba(59,130,246,0.5) = 50% transparent blue. HSLA is HSL with alpha. CSS color names (like "tomato", "cornflowerblue") are human-friendly aliases. CSS also supports oklch() and color() functions for wider display gamuts. Hex and RGB are most portable; RGBA is needed for transparency; HSL is best for programmatic color manipulation.
How do I create a color palette from a single hex color?
Start from one base color and systematically vary it: Tints — increase Lightness in HSL (same hue, same saturation, lighter). Shades — decrease Lightness (darker versions). Tones — decrease Saturation (more muted/greyed). Complementary color — rotate Hue by 180°. Analogous palette — 3 colors ±30° around the base hue. Triadic — 3 colors at 120° intervals. Tools like Tailwind CSS generate 50–950 shade scales from a base. Using HSL for palette generation ensures colors feel visually related.