Introduction
Hex (#ff6600) and RGB (rgb(255, 102, 0)) are device-dependent and describe color as light mixes. HSL (hsl(24, 100%, 50%)) maps to human perception: hue is the color family, saturation is intensity, and lightness is brightness. OKLCH (oklch(0.62 0.19 35)) is a newer perceptually-uniform space ideal for gradients and color interpolation — unlike HSL, a lightness of 50% in OKLCH is truly halfway between black and white visually.
Color Spaces a Developer Should Know
Hex (#ff6600) and RGB (rgb(255, 102, 0)) are device-dependent and describe color as light mixes. HSL (hsl(24, 100%, 50%)) maps to human perception: hue is the color family, saturation is intensity, and lightness is brightness. OKLCH (oklch(0.62 0.19 35)) is a newer perceptually-uniform space ideal for gradients and color interpolation — unlike HSL, a lightness of 50% in OKLCH is truly halfway between black and white visually.
Building a Color System with CSS Custom Properties
Define your palette using HSL so you can generate variants by adjusting lightness. For example: --primary-h: 220; --primary-s: 80%; --primary-l: 50%; then compute --primary-light: hsl(var(--primary-h), var(--primary-s), 75%). This approach keeps your design tokens maintainable and makes dark mode trivial — just flip the lightness values.
Accessible Color Contrast
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Use relative luminance (not just hex brightness) to compute this. Our color converter includes contrast ratio calculation so you can verify your palette meets accessibility standards before writing CSS.
Frequently Asked Questions
What is the difference between HSL and OKLCH?
HSL (Hue, Saturation, Lightness) is intuitive for picking colors but produces perceptually uneven gradients — two colors with the same lightness value can appear very different in brightness. OKLCH is perceptually uniform, meaning equal lightness values look equally bright. Use OKLCH for gradients and color interpolation, and HSL for defining your initial palette.
Why is my hex color not matching between design tools?
Different tools may use different color profiles (sRGB vs Display P3 vs Adobe RGB). Hex and RGB values are device-dependent, so the same hex code can look different on different monitors. Ensure all your tools are set to the sRGB color space for consistency, or use OKLCH which is more consistent across devices.
What contrast ratio do I need for WCAG compliance?
WCAG 2.1 Level AA requires 4.5:1 contrast ratio for normal text (under 18px) and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Always test both your text colors and background colors together, not individually.
How do I implement dark mode with CSS custom properties?
Define your color tokens using HSL values stored in CSS custom properties. For dark mode, create a media query or class that overrides the lightness values while keeping hue and saturation the same. For example, change --primary-l from 50% to 75% for a lighter variant. This approach maintains color harmony across themes.
Which color format should I use in CSS?
Use HSL for human-readable color definitions in your stylesheets — it is easier to create variants by adjusting lightness. Use hex for quick color values from design tools. Use OKLCH for gradients where perceptual uniformity matters. Modern browsers support all three formats, so choose based on readability and use case.
How many colors should a web design system have?
A typical design system needs 5-8 base colors, each with 9-11 shades (from lightest to darkest). This gives you enough range for backgrounds, text, borders, hover states, and alerts. Start with a primary, secondary, neutral, success, warning, error, and info palette. Use HSL to generate shade ranges by adjusting lightness systematically.
What is the safest approach to color in responsive design?
Test your color palette on both light and dark backgrounds, on low-end mobile screens (which may have limited color gamut), and in outdoor sunlight conditions. Avoid relying solely on color to convey meaning — always pair color with text labels, icons, or patterns for accessibility. Use tools to simulate color blindness and verify your palette works for all users.
Do OKLCH gradients really look better than HSL gradients?
Yes, especially for gradients between very different hues. HSL interpolation often passes through muddy intermediate colors because it rotates through the hue wheel at constant saturation. OKLCH maintains perceptual brightness throughout the gradient, producing smoother and more visually pleasing transitions. The difference is most noticeable in blue-to-red or green-to-purple gradients.
Conclusion
Understanding color spaces, contrast ratios, and CSS custom properties is essential for building accessible, maintainable color systems in modern web applications. By leveraging HSL for palette definition and OKLCH for gradients, developers can create visually consistent designs that work across devices and meet WCAG accessibility standards. Invest time in your color system early — it pays dividends in design consistency and user experience.
Frequently asked questions
What is the difference between HSL and OKLCH?
HSL (Hue, Saturation, Lightness) is intuitive for picking colors but produces perceptually uneven gradients — two colors with the same lightness value can appear very different in brightness. OKLCH is perceptually uniform, meaning equal lightness values look equally bright. Use OKLCH for gradients and color interpolation, and HSL for defining your initial palette.
Why is my hex color not matching between design tools?
Different tools may use different color profiles (sRGB vs Display P3 vs Adobe RGB). Hex and RGB values are device-dependent, so the same hex code can look different on different monitors. Ensure all your tools are set to the sRGB color space for consistency, or use OKLCH which is more consistent across devices.
What contrast ratio do I need for WCAG compliance?
WCAG 2.1 Level AA requires 4.5:1 contrast ratio for normal text (under 18px) and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Always test both your text colors and background colors together, not individually.
How do I implement dark mode with CSS custom properties?
Define your color tokens using HSL values stored in CSS custom properties. For dark mode, create a media query or class that overrides the lightness values while keeping hue and saturation the same. For example, change --primary-l from 50% to 75% for a lighter variant. This approach maintains color harmony across themes.
Which color format should I use in CSS?
Use HSL for human-readable color definitions in your stylesheets — it is easier to create variants by adjusting lightness. Use hex for quick color values from design tools. Use OKLCH for gradients where perceptual uniformity matters. Modern browsers support all three formats, so choose based on readability and use case.
How many colors should a web design system have?
A typical design system needs 5-8 base colors, each with 9-11 shades (from lightest to darkest). This gives you enough range for backgrounds, text, borders, hover states, and alerts. Start with a primary, secondary, neutral, success, warning, error, and info palette. Use HSL to generate shade ranges by adjusting lightness systematically.
What is the safest approach to color in responsive design?
Test your color palette on both light and dark backgrounds, on low-end mobile screens (which may have limited color gamut), and in outdoor sunlight conditions. Avoid relying solely on color to convey meaning — always pair color with text labels, icons, or patterns for accessibility. Use tools to simulate color blindness and verify your palette works for all users.
Do OKLCH gradients really look better than HSL gradients?
Yes, especially for gradients between very different hues. HSL interpolation often passes through muddy intermediate colors because it rotates through the hue wheel at constant saturation. OKLCH maintains perceptual brightness throughout the gradient, producing smoother and more visually pleasing transitions. The difference is most noticeable in blue-to-red or green-to-purple gradients.