HEX ↔ RGB ↔ HSL Converter + Palette + Contrast

All three describe the same set of colors in sRGB, but they're optimized for different mental models. HEX (#FF5733) is a packed representation: six base-16 digits encoding three 0-255 channels. It's the format most CSS, design tokens, and brand guidelines use because it's compact. RGB (rgb(255, 87, 51)) is the raw additive model with Red, Green, Blue channels, and it's what hardware actually does. HSL (hsl(11, 100%, 60%)) is perceptual (Hue, Saturation, Lightness) and it's how designers think about adjustments ("make it 10% lighter") more naturally than channel manipulation.

Split the six digits into three pairs and convert each from base-16. #FF5733 becomes FF, 57, 33, then 255, 87, 51. Each pair represents 0-255 (00 = 0, FF = 255, every value in between mapped linearly). Three-digit shorthand (#F53) doubles each character first: #F53 = #FF5533 = (255, 85, 51). Eight-digit form (#FF5733CC) adds an alpha channel as the fourth pair (CC = 204 = 80% opacity). The math is straightforward, but most engineers do it twice in their lives and then trust the tool.

Alpha is opacity from 0 (fully transparent) to 1 (fully opaque). In rgba(255, 87, 51, 0.5), the result the user sees is a blend of the foreground color and whatever's underneath: result = foreground × alpha + background × (1 - alpha). This matters for WCAG contrast checks. A semi-transparent text color on a colored background isn't contrasting against the page background, it's contrasting against the composited color, which can be substantially different. Always check contrast against the actual rendered color, not the declared color.

Because they correspond to different perceptual moves. Tint = base color blended with white (raise lightness), which is Photoshop's "Lighten" toward 100% L. Shade = base color blended with black (lower lightness), which is "Darken" toward 0% L. Tone = base color blended with gray (lower saturation), which is "Desaturate" while keeping lightness. UI design uses tints heavily for hover and disabled states, shades for pressed states, and tones for inactive or muted variants. HSL makes all three trivial because each maps to changing one axis.

180° apart on the color wheel (#0066FF and #FF9900, say) is the textbook definition. They work as accent pairs because the high contrast draws the eye. They look terrible when used in equal proportions for large areas (that's where you get the "1995 web page" effect). The rule: use the dominant color for 70 to 80% of the surface, the complement for 5 to 10% as accents (CTAs, highlights, error states). Adobe's color wheel tool walks through the same logic visually.

Pick a base hue, take it ±30° on the wheel, and adjust the lightness and saturation of each variant to maintain visual hierarchy. The mistake is keeping all three colors at identical lightness, which makes them blur together. Push the central hue brightest and taper the analogous variants 10 to 15% down. Material Design's color tooling does exactly this, which is why their palettes feel intentional rather than algorithmic. For UI work, three analogous hues at three lightness levels each gives you a 9-color palette that hangs together.

WCAG 2.1 AA requires 4.5:1 for normal text (under 18pt regular or 14pt bold) and 3:1 for large text (18pt+ regular or 14pt+ bold). AAA, the stricter level, is 7:1 normal and 4.5:1 large. For non-text UI elements (icons, focus indicators, form borders) the requirement is 3:1 against adjacent colors. The calculator emits both AA and AAA assessments. If you're publishing to a regulated audience (US federal, EU public sector, enterprise procurement), AA is the floor and AAA is what your audit will look for.

Three colors evenly spaced 120° apart on the wheel. Pure red, pure green, pure blue is the canonical triad. Triadic palettes are inherently high-energy because they cover the wheel uniformly. They work for playful, bold designs (kids' apps, games, festive marketing) and badly for restrained, professional work. The trick to using a triad without it screaming: pick one as dominant (60 to 70% of the surface), use the other two as accents (15% each), and pull saturation down on at least two of them.

Relative luminance is a weighted sum of the RGB channels after gamma correction: 0.2126 × R + 0.7152 × G + 0.0722 × B. The weights match how the human eye perceives the channels. Green looks much brighter than red or blue at the same numerical value. WCAG uses luminance because perceived contrast is what users actually experience, not channel difference. Two colors with identical luminance but different hues will have effectively zero contrast for low-vision users even if they look distinct to typical vision.

Don't reuse light-mode colors. They're too saturated for dark backgrounds. Lower saturation by 15 to 25% and raise lightness by 10 to 20% on each color. The result is the muted dark mode palette most modern apps use. The other approach: design the dark palette first as the baseline and let the light palette derive from it. Either way, run every dark-mode pair through a contrast checker. Eyeballing dark-on-dark contrast is unreliable, especially for designers who've been staring at their screens for hours.

The browser is doing color-space interpretation that Figma doesn't have to. Figma renders in its own canvas at sRGB by default. Browsers render in whatever color profile the OS hands them. On a wide-gamut display (P3 panels on recent Macs, most modern phones), the browser maps sRGB values to the wider gamut, often making colors look more saturated than the file specified. CSS `color-gamut: srgb` media queries and the newer `color()` syntax give you control, but most production CSS still leaves color management implicit. If precise cross-environment matching matters, declare sRGB explicitly.

Color management. Figma assumes sRGB by default but can be configured for Display P3. Browsers render sRGB unless the page declares a wider color space via CSS color-gamut media queries or the `color()` function. Wide-gamut displays (Apple Pro Display, recent MacBook Pros) amplify the difference because they can show colors sRGB can't represent. If pixel-accurate cross-tool color matching matters, set both Figma and your browser's color profile to sRGB explicitly, and stay in HEX or RGB rather than HSL. HSL conversions can introduce 1-bit drift on saturation transitions.