Why Color Values Matter
Color is one of the most fundamental aspects of web design, influencing everything from brand identity to user experience and accessibility. CSS provides multiple ways to specify colors, from simple named keywords to sophisticated color functions that unlock the full spectrum of visible light. This guide covers every color value type available in modern CSS, helping you choose the right approach for your projects.
Whether you're building a design system, creating accessible interfaces, or simply styling a landing page, understanding CSS color values gives you precise control over your visual presentation. For teams implementing modern web applications, mastering these color functions is essential for creating cohesive, maintainable interfaces that scale across projects.
Understanding Color Models and Color Spaces
Before diving into specific syntax, it's essential to understand the foundation: color models and color spaces. A color model is a mathematical way of representing colors using numbers, while a color space defines the range (gamut) of colors that can be represented within that model.
The RGB (Red, Green, Blue) model has been the foundation of web colors since the beginning, based on how computer monitors create colors by combining light emissions. The sRGB color space became the web standard in 1996 and remains widely supported today. However, sRGB covers a relatively small portion of visible colors.
Modern CSS now supports color spaces based on human perception, providing more intuitive color manipulation and access to wider gamuts like P3, which can display significantly more vibrant colors on capable displays.
Color Gamut and Why It Matters
Color gamut refers to the range of colors that can be displayed or represented. The sRGB gamut, while universally supported, represents only about 35% of visible colors. Wider gamuts like Display P3 and Rec. 2020 can display more saturated and vibrant colors, but require browsers and displays that support these extended ranges.
When working with colors, understanding gamut helps you make informed decisions about when to use traditional sRGB-based methods versus modern color spaces that unlock richer visual experiences, as discussed in Evil Martians' exploration of OKLCH. For professional web development teams, choosing the right color space can significantly impact the visual quality of your digital products.
Named Colors: The Simplest Approach
CSS includes over 160 named color keywords that let you use descriptive names instead of numeric values. These include standard colors like red, blue, and green, as well as more specific shades like tomato, cornflowerblue, and rebeccapurple. Named colors use the RGB model and are associated with the sRGB color space.
According to the HTTP Archive Web Almanac, the most commonly used named colors are white, black, red, blue, and gray. While named colors offer simplicity and readability, their use is limited to the predefined palette.
Special Named Colors
CSS defines several special color keywords that serve specific purposes:
transparent- Fully transparent color (equivalent to rgba(0,0,0,0))currentColor- Takes the value of the element's color property, useful for inheritance patternscurrentcolor- Lowercase variant with the same behavior
System colors like ButtonFace, LinkText, and Canvas reflect the user's operating system theme preferences, adapting to system-level color scheme changes, as documented in the MDN Web Docs CSS color values guide.
1/* Common named colors */2.primary { color: royalblue; }3.secondary { color: tomato; }4.background { background-color: aliceblue; }5 6/* Special named colors */7.overlay { background-color: transparent; }8.icon { color: currentColor; }Human Readable
Easy to understand and remember
No Conversion
No need to convert from design tools
Universally Supported
Works in all browsers
160+ Options
Large palette of predefined colors
Hexadecimal Color Notation
Hexadecimal (hex) notation represents RGB colors using base-16 numbers, providing a compact way to specify precise color values. This format dominates web development due to its balance of brevity and precision.
Hex Syntax Variations
The four hex color formats available in CSS are:
6-digit hex (#RRGGBB): Each pair of characters represents red, green, and blue components from 00 to FF. For example, #FF0000 is pure red.
3-digit hex (#RGB): A shorthand where each digit is doubled. #F00 expands to #FF0000, making it useful for common colors.
8-digit hex (#RRGGBBAA): Adds an alpha channel, where lower values increase transparency. #FF000080 is 50% opaque red.
4-digit hex (#RGBA): Shorthand 8-digit format. #F008 expands to #FF000088.
The hex notation is case-insensitive, though lowercase is commonly used for consistency, as recommended in the MDN Web Docs CSS color values reference.
1/* Full hex notation */2.primary { color: #336699; }3.secondary { color: #4A90E2; }4 5/* Shorthand hex */6.highlight { color: #F00; }7.accent { color: #09F; }8 9/* With alpha channel */10.overlay { background-color: #00000080; }11.ghost { background-color: #FF000040; }| Format | Syntax | Example | Expansion |
|---|---|---|---|
| 6-digit | #RRGGBB | #FF0000 | Full red |
| 3-digit | #RGB | #F00 | #FF0000 |
| 8-digit | #RRGGBBAA | #FF000080 | 50% opacity red |
| 4-digit | #RGBA | #F008 | #FF000088 |
RGB and RGBA Functional Notation
The rgb() function specifies colors using red, green, and blue components, accepting values as numbers (0-255) or percentages. The modern syntax separates components with spaces and uses a slash for the alpha channel, departing from the older comma-separated approach.
RGB Syntax
RGB accepts three values representing the intensity of each color channel. The none keyword can replace any component value and behaves as 0 for color channels and 1 for alpha.
Historical Syntax Considerations
Older CSS used comma-separated syntax that is now discouraged:
/* Legacy syntax - avoid in new code */
.legacy { color: rgb(255, 0, 0); }
.legacy-alpha { color: rgba(255, 0, 0, 0.5); }
Modern browsers support both syntaxes, but the space-separated format is recommended for new projects as it aligns with the CSS Color Level 4 specification.
1/* Modern space-separated syntax */2.primary { color: rgb(51 102 153); }3.secondary { color: rgb(74 144 226); }4 5/* Percentage values */6.accent { color: rgb(100% 50% 0%); }7 8/* With alpha channel using slash */9.translucent { background-color: rgb(255 0 0 / 0.5); }10.opaque { background-color: rgb(0 128 0 / 100%); }11 12/* Using none keyword */13.black { color: rgb(none none none); }14.white { color: rgb(100% 100% 100%); }HSL and HSLA Color Representation
HSL (Hue, Saturation, Lightness) offers a more intuitive way to work with colors by describing them in terms that align with how humans perceive color. The hue represents the position on the color wheel (0-360 degrees), while saturation and lightness control color intensity and brightness.
- Hue: 0-360 degrees on the color wheel (0/360 = red, 120 = green, 240 = blue)
- Saturation: 0-100% (0% = grayscale, 100% = full color)
- Lightness: 0-100% (0% = black, 100% = white, 50% = normal)
The hue value wraps around the color wheel, so hsl(360 ...) equals hsl(0 ...), and values beyond 360 work by taking the modulo. HSL is particularly valuable for creating color palettes, as adjusting the saturation or lightness of a single hue produces harmonious variations, as explained in web.dev's CSS color guide. For developers building scalable design systems, HSL provides an intuitive way to generate color relationships programmatically.
1/* Pure red at full saturation and lightness */2.red { color: hsl(0 100% 50%); }3 4/* Blue with reduced saturation */5.muted-blue { color: hsl(220 60% 50%); }6 7/* Lightness variations */8.light { color: hsl(0 100% 80%); }9.normal { color: hsl(0 100% 50%); }10.dark { color: hsl(0 100% 30%); }11 12/* HSLA with alpha */13.overlay { background-color: hsl(0 100% 50% / 0.5); }14.translucent { background-color: hsla(220 80% 50% / 0.75); }Modern Color Functions: OKLCH and LAB
CSS Color Level 4 introduced color functions based on perceptually uniform color spaces, offering significant advantages over RGB and HSL for design systems and sophisticated color manipulation. Evil Martians provides an in-depth exploration of why teams are adopting these modern color functions for advanced web development projects.
OKLCH Color Space
OKLCH uses three components:
- L (Lightness): Perceptually uniform lightness from 0% to 100%
- C (Chroma): Colorfulness or saturation, with no theoretical upper limit
- H (Hue): Angle on the color wheel in degrees
The key advantage of OKLCH is perceptual uniformity: a 10% change in any component produces a perceptually similar change regardless of the starting color. This makes it ideal for creating accessible color systems and implementing designer-specified color relationships, as covered in CSS-Tricks' OKLCH guide.
LAB Color Space
The LAB color space uses L (Lightness), a (green-red axis), and b (blue-yellow axis). It is also perceptually uniform and provides access to wide-gamut colors, though OKLCH's cylindrical representation with hue and chroma is often more intuitive for color manipulation.
LCH and HWB Functions
LCH is the cylindrical form of LAB, using lightness, chroma, and hue. HWB (Hue, Whiteness, Blackness) specifies a hue, then how much white and black to add, making it useful for creating tints and shades.
1/* Vivid colors in OKLCH */2.vibrant { color: oklch(60% 0.4 30); }3.muted { color: oklch(60% 0.1 200); }4 5/* Accessing P3 colors */6.p3-green { color: oklch(70% 0.3 140); }7 8/* With alpha */9.transparent-oklch { background-color: oklch(50% 0.2 0 / 0.5); }10 11/* LAB syntax */12.lab-color { color: lab(50% 40 20); }13 14/* LCH syntax */15.lch-color { color: lch(60% 70 45); }16 17/* HWB syntax */18.hwb-color { color: hwb(180 30% 20%); }Perceptually Uniform
Equal changes feel equal across colors
Wide Gamut
Access to P3 and beyond
No Clipping
Colors stay within gamut
Intuitive
Lightness and chroma are predictable
CSS Color Level 4 Features
The CSS Color Module Level 4 specification introduced several powerful features that modern browsers now support.
color-mix() Function
The color-mix() function blends two colors together, specifying how much of each color to include. This function enables dynamic color blending in CSS without preprocessor functions, supporting any color space as documented in MDN Web Docs.
Relative Color Syntax
Relative color syntax allows modifying an existing color's components. This powerful feature enables creating color relationships dynamically based on design tokens or CSS custom properties.
light-dark() Function
For implementing light and dark mode themes, the light-dark() function automatically switches between colors based on the user's preferred color scheme.
1/* Mix two colors equally */2.blended { background-color: color-mix(in oklch, blue, red); }3 4/* Custom mix ratio */5.mostly-blue { background-color: color-mix(in oklch, blue 80%, red); }6 7/* Different color spaces */8.p3-mix { background-color: color-mix(in p3, #f00, #00f); }9 10/* Adjust lightness of an existing color */11.lighter { background-color: oklch(from #336699 l + 10% c h); }12 13/* Change color space while keeping appearance */14.in-p3 { color: oklch(from #336699 in p3, l, c, h); }15 16/* Automatic light/dark mode */17.adaptive { color: light-dark(#333, #eee); }18.background { background-color: light-dark(#fff, #111); }Alpha Channels and Transparency
CSS provides consistent ways to specify alpha (transparency) across all color functions. The alpha value can be expressed as a number (0 to 1) or percentage (0% to 100%), with lower values being more transparent.
Alpha Syntax Across Color Functions
All modern color functions use the slash notation for alpha:
.translucent-rgb { background-color: rgb(255 0 0 / 0.5); }
.translucent-hsl { background-color: hsl(0 100% 50% / 0.5); }
.translucent-oklch { background-color: oklch(60% 0.2 0 / 0.5); }
Alpha and Color Interpolation
Alpha becomes important when animating or transitioning between colors. Modern CSS transitions and animations handle alpha smoothly, enabling smooth visual effects without color flickering. When building modern web applications, these transitions create polished user experiences that enhance engagement and usability.
Practical Applications
Creating Color Palettes with CSS Custom Properties
Using OKLCH for design tokens ensures perceptual consistency across your entire palette. The ability to adjust lightness while maintaining perceived color relationships makes OKLCH ideal for creating harmonious color systems for professional web design projects.
Responsive Colors with color-mix
The color-mix() function enables creating color variants dynamically, reducing the need for preprocessor functions and enabling true runtime customization. This approach aligns with modern responsive design practices that adapt to user preferences and device capabilities.
Accessible Color Contrast
When using modern color functions, maintaining WCAG contrast requirements becomes more predictable due to perceptual uniformity. Adjusting lightness with OKLCH produces reliable contrast changes, essential for creating accessible websites that serve all users effectively.
1:root {2 /* Base colors using OKLCH */3 --primary: oklch(65% 0.2 260);4 --primary-light: oklch(75% 0.2 260);5 --primary-dark: oklch(55% 0.2 260);6 7 /* Semantic colors */8 --success: oklch(75% 0.15 140);9 --warning: oklch(80% 0.2 60);10 --error: oklch(65% 0.25 20);11 12 /* Background colors */13 --bg-primary: oklch(98% 0.02 260);14 --bg-secondary: oklch(95% 0.02 260);15}16 17/* Create variants dynamically */18.primary-100 { background-color: color-mix(in oklch, var(--primary), white 90%); }19.primary-500 { background-color: var(--primary); }20.primary-700 { background-color: color-mix(in oklch, var(--primary), black 30%); }| Format | Best For | Example |
|---|---|---|
| Named | Common colors, readability | color: red; |
| Hex | Design tool values, compact | color: #FF5733; |
| RGB/RGBA | Programmatic control | color: rgb(0 128 255); |
| HSL/HSLA | Color palettes, tints/shades | color: hsl(210 100% 50%); |
| OKLCH | Design systems, wide gamut | color: oklch(60% 0.2 200); |
| color-mix() | Dynamic color blending | color-mix(in oklch, blue, red) |
Browser Support
Browser support for modern CSS color features has improved significantly:
| Feature | Chrome | Firefox | Safari |
|---|---|---|---|
| Named colors, hex, RGB, HSL | All | All | All |
| OKLCH, LAB, LCH, HWB | 111+ | 113+ | 15.4+ |
| color-mix() | 111+ | 128+ | 16.4+ |
| Relative color syntax | 119+ | 128+ | 16.4+ |
For production use, check specific feature support or use fallbacks for older browsers. Most legacy features have universal support, while newer Color Level 4 features require relatively recent browser versions.
Frequently Asked Questions
Should I use OKLCH instead of hex colors?
For new projects, OKLCH offers significant advantages for design systems and color manipulation. However, hex remains practical for specific colors from design tools. Consider your project's needs and browser support requirements when making this decision for your [web development project](/services/web-development/).
How do I convert colors between formats?
Modern browsers support `color()` function conversions. For example: `oklch(from #ff0000 in oklch, l, c, h)` converts a hex color to OKLCH format. The [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_values) provides comprehensive coverage of these conversions.
What's the difference between OKLCH and HSL?
OKLCH is perceptually uniform, meaning equal numerical changes produce perceptually similar changes. HSL does not have this property--lightness changes near white or black are perceived differently than in the middle range, as explained in [Evil Martians' analysis](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl).
How do I create accessible color contrasts?
Use OKLCH's perceptual uniformity to adjust lightness predictably. Calculate contrast ratios and ensure text maintains WCAG 2.1 AA (4.5:1) or AAA (7:1) ratios with backgrounds. This approach is essential for creating [accessible digital experiences](/services/accessibility-services/).
Sources
- MDN Web Docs - CSS color values - Comprehensive reference covering all CSS color value types
- web.dev - Learn CSS Color - Google's educational resource on CSS color selection and syntax
- Evil Martians - OKLCH in CSS - Industry perspective on transitioning to perceptually uniform color spaces
- CSS-Tricks - OKLCH - Practical guide to the OKLCH color function
- W3C CSS Color Module Level 4 - The official CSS Color specification