HEX to RGB & HSL: CSS Color Tokens, WCAG Contrast & Dark Mode
Designers search hex to rgb, rgb to hex, and hsl color picker while engineers implement design tokens in CI. Browsers still default to sRGB, but OKLCH, display-p3, and CSS color-mix() are reshaping theme systems. This guide ties classic #RRGGBB notation to rgba(), hsla(), alpha in 8-digit hex, and accessibility: WCAG 2.2 contrast, focus ring colors, and sensible neutrals for dark mode surfaces.
sRGB foundations: channels, gamma, and why 50% gray isn't “half brightness”
RGB stores linear-light values after gamma encoding for display. That is why interpolating hex channels naively can produce muddy blends—use perceptual spaces (OKLab/OKLCH) for gradients when browsers support them, or test visually.
HSL for UI states
HSL separates hue from saturation/lightness—ideal for hover/active/disabled ramps. Pair with token names like --color-surface-raised instead of scattering raw hex across components.
Accessibility pitfalls
Test focus-visible outlines against adjacent surfaces—not only body text.
Design tokens, Figma handoff, and CSS variables
Modern stacks expose palettes as design tokens (JSON) consumed by Tailwind, Style Dictionary, or vanilla postcss pipelines. Map semantic names—color.text.primary—to actual HEX or OKLCH values so re-theming does not require grep across apps. When designers export SVG icons, align stroke and fill colors with the same tokens so inlined assets stay on-brand. For marketing pages, coordinate hero imagery contrast with QR code placement so scanners still read black modules on tinted backgrounds.
Gradients, color-mix(), and perceptual uniformity
Linear gradients in sRGB can show ugly mid-tones—browsers that support color-mix() and OKLCH interpolation produce smoother ramps. Always test fallbacks: older engines may snap to hex stops. For data visualization, pick colorblind-safe ramps (Viridis-style) instead of rainbow scales that confuse WCAG checks and scientific readers alike.
SEO and social: OG images, theme-color, and dark reader mode
Open Graph images should respect brand colors while maintaining text contrast. The theme-color meta tag influences mobile chrome tint—verify against both light and dark themes. Reader modes strip custom CSS; semantic HTML and logical heading order matter more than clever chroma tricks. Clean URLs for color docs help discovery; see URL slugs for SEO.
Recommended tools on Universal Dev Tools
Jump between HEX, RGB, and HSL when debugging CSS or design tokens.
Explore complementary schemes before committing to a product theme.
Inspect raw channel values when integrating with hardware or embedded UIs.
Pretty-print stylesheets that declare custom properties and color profiles.
Related guides on this blog
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX encodes sRGB channels as #RRGGBB (optional alpha as #RRGGBBAA). RGB expresses red/green/blue 0–255 or percentages. HSL uses hue (0–360) with saturation and lightness—intuitive for theming because you adjust lightness without touching hue.
How do I convert HEX to RGB for CSS?
Split the hex pairs into integers, divide by 255 if you need 0–1 for WebGL, or use modern CSS color-mix() and relative color syntax where supported.
What is WCAG contrast ratio?
WCAG defines contrast between text and background using relative luminance. Aim for 4.5:1 for normal text and 3:1 for large text—use automated checkers when picking brand palettes.
Does CSS support wide-gamut colors now?
color(display-p3 …) and OKLCH expand beyond sRGB. Fall back to sRGB hex for older browsers or provide layered themes.
Why do designers still use HSL?
Tweaking lightness for hover states preserves perceptual hue better than naively adding to RGB channels—especially for UI neutrals.
What is 8-digit HEX with alpha?
The last two hex digits encode alpha (00–FF). Supported in modern CSS alongside rgba() and hsla().
Wrapping up
Centralize conversions in utilities or design tokens, then snapshot screenshots in CI for visual regressions when palettes shift.