HEX ↔ RGB ↔ HSL Converter + Palette + Contrast

HEX is a hexadecimal notation (#RRGGBB) representing colors in base-16 (compact format for web, base-16 values 00-FF). RGB uses decimal values (0-255) for Red, Green, and Blue channels (additive color model, native format for screens). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%) (perceptual color model, more intuitive for designers). All three can represent the same colors but with different notation systems (same color, different formats). Understanding HEX vs RGB vs HSL helps you see how to choose appropriate format for your needs.

Split the HEX code into pairs (RR, GG, BB) and convert each from base-16 to decimal (base-16 to decimal conversion, each pair represents 0-255). For example, #FF5733: FF = 255, 57 = 87, 33 = 51, giving rgb(255, 87, 51) (FF in base-16 = 255 in decimal, 57 in base-16 = 87 in decimal). For short HEX (#RGB), double each character first (#F53 → #FF5533) (short HEX expansion, double each digit). Understanding HEX to RGB conversion helps you see how to convert hexadecimal colors to RGB format.

The alpha channel represents opacity, ranging from 0 (fully transparent) to 1 (fully opaque) (alpha channel controls transparency, 0 = transparent, 1 = opaque). In HEX, alpha is represented as two additional characters (#RRGGBBAA) where AA is opacity in base-16 (HEX alpha format, two additional characters). A value of 0.5 means 50% opacity, allowing background colors to show through (50% opacity, background visible). Understanding alpha channel helps you see how to control color transparency.

Tints are created by adding white (increasing lightness), making colors lighter and more pastel (tints = lighter colors, increase lightness in HSL). Shades are created by adding black (decreasing lightness), making colors darker (shades = darker colors, decrease lightness in HSL). Tones are created by adding gray (reducing saturation), making colors more muted and sophisticated (tones = muted colors, reduce saturation in HSL). Understanding tints vs shades vs tones helps you see how to create different color variations.

Complementary colors are opposite each other on the color wheel (180° apart in hue) (complementary colors = opposite hues, 180° separation). They create high contrast and visual interest when used together (high contrast combinations, visually striking). For example, blue (#0000FF) and orange (#FF8000) are complementary (blue and orange example, opposite on color wheel). Use complementary colors sparingly for accents rather than large areas (complementary color usage, accents not large areas). Understanding complementary colors helps you see how to create high-contrast color combinations.

Analogous palettes use colors adjacent on the color wheel, typically within 30° of each other (analogous colors = adjacent hues, typically ±30°). Start with a base hue, then add colors at +30° and -30° (or adjust the spread) (analogous palette generation, base hue ± spread). These palettes are harmonious and commonly found in nature (harmonious color combinations, natural palettes). Understanding analogous palettes helps you see how to create harmonious color combinations.

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) (WCAG AA requirement, 4.5:1 for normal text) and 3:1 for large text (18pt+ or 14pt bold) (WCAG AA Large requirement, 3:1 for large text). For enhanced accessibility (AAA level), aim for 7:1 for normal text (WCAG AAA requirement, 7:1 for normal text). Use the contrast checker to verify your color combinations (contrast checking tool, verify accessibility). Understanding WCAG contrast requirements helps you see how to ensure text readability and accessibility compliance.

Colors can appear differently due to: display calibration differences (different displays have different calibrations, affects color appearance), color space variations (sRGB vs Adobe RGB, different color spaces), ambient lighting conditions (lighting affects perceived color, different environments), and screen technologies (LCD vs OLED, different technologies). Always test your colors on multiple devices and consider using color-managed workflows for critical work (color testing, multiple devices, color-managed workflows). Understanding color appearance variations helps you see why colors may look different across devices.

Relative luminance measures the perceived brightness of a color, accounting for how the human eye perceives different wavelengths (relative luminance = perceived brightness, accounts for eye sensitivity). It's calculated using weighted RGB values: 0.2126×R + 0.7152×G + 0.0722×B (after gamma correction) (relative luminance formula, weighted RGB with gamma correction). This is used in WCAG contrast calculations (relative luminance in contrast, WCAG calculations). Understanding relative luminance helps you see how to calculate perceived brightness for contrast calculations.

For dark mode: reduce saturation (highly saturated colors can appear too vibrant on dark backgrounds, reduce saturation for dark mode), increase lightness (colors need to be lighter on dark backgrounds, increase lightness for visibility), and always verify contrast ratios (check contrast for accessibility, verify WCAG compliance). A common approach is to use tints of your light-mode colors rather than the same values (dark mode color strategy, use tints not same values). Understanding dark mode color selection helps you see how to adapt colors for dark mode interfaces.

Triadic palettes use three colors evenly spaced on the color wheel (120° apart in hue) (triadic colors = three hues, 120° separation). For example, red (0°), green (120°), and blue (240°) form a triadic palette (triadic example, RGB colors). These palettes are balanced and colorful, providing good contrast while maintaining harmony (triadic characteristics, balanced and colorful). Understanding triadic palettes helps you see how to create balanced color combinations.

This tool does not account for many factors that affect real-world color design: actual display capabilities (display calibration, color space variations, ambient lighting affect color appearance), color perception (individual differences, color blindness, viewing conditions affect perceived color), design context (brand guidelines, cultural associations, design trends affect color choices), printer capabilities (printer color gamut, paper type, ink quality affect print colors), and many other factors. Real color design accounts for these factors using detailed design services, color testing, design analysis, and comprehensive color planning. Understanding these factors helps you see why professional design services are necessary for comprehensive color design systems.