🎨 color() — The Modern CSS Color Function

🌐 What is the color() Function?

color() is a powerful CSS function that allows you to specify colors from any supported color space (like srgb, display-p3, a98-rgb, prophoto-rgb, rec2020) and even perform adjustments like modifying lightness, saturation, or alpha.

>>“color() unlocks wide-gamut, high-fidelity colors — beyond the limits of hex and rgb().”

Note

✔ Supported in all modern browsers ✔ Essential for modern UI design, high-quality gradients, and advanced color management

🎯 Why Use color()?

  • Access wide-gamut colors (much richer than standard sRGB)
  • Use color spaces used in photography and cinema
  • Fine-tune colors with alpha + adjustment syntax
  • Create consistent color systems across displays

📌 Basic Syntax

color() Syntax

color(<color-space> <component1> <component2> <component3> / <alpha>)

Example spaces:srgb, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz-d50, xyz-d65.

🎨 Example 1 — sRGB (Standard Web Color)

sRGB example

.box {
  background: color(srgb 1 0 0); /* Red */
}

Values range from 0 → 1 (not 0 → 255).

🎨 Example 2 — display-p3 (Wide Gamut)

display-p3 example

.bright {
  background: color(display-p3 1 0.4 0.2);
}

This produces brighter, more saturated colors on P3 screens (most modern phones).

Note

💡 A display-p3 color often looks “juicier” than its sRGB equivalent.

🎨 Example 3 — With Alpha Channel

Alpha example

.overlay {
  background: color(srgb 0 0 0 / 0.5); /* 50% transparent black */
}

📌 Supported Color Spaces

Color SpaceDescription
srgbStandard web color space
srgb-linearBetter mathematical blending
display-p3Wide gamut (brighter colors)
a98-rgbAdobe RGB — photography-oriented
prophoto-rgbVery wide gamut — photography
rec2020Ultra wide gamut — TV and cinema
xyz-d50 / xyz-d65Absolute scientific color spaces

Note

🌈 If you want colors that pop on modern displays — use display-p3.

🧠 Why Use Values Between 0 and 1?

Because these color spaces use **fractional values**, giving greater precision than hex or rgb() values.

>>“color() gives you photographic-level color accuracy in CSS.”

🔥 Example — Wide Gamut Gradients

P3 Gradient

.gradient {
  background: linear-gradient(
    to right,
    color(display-p3 1 0 0),
    color(display-p3 1 0.8 0)
  );
}

Gradients become smoother and more vibrant on supported displays.

📐 Example — Theme with color()

Theme Tokens

:root {
  --brand: color(display-p3 0.8 0.2 0.5);
}

button {
  background: var(--brand);
}

Themes scale beautifully across different monitor types.

🎯 Using Color Adjustments

The color() function allows future-level adjustments, such as tweaking lightness, saturation, or hue (coming with Level 5 syntax).

Experimental Adjustments

color(display-p3 1 0 0 / 1 adjust(lightness 20%))

Note

🚧 Adjustments are cutting-edge and experimental in many browsers.

🧪 Mixing with color-mix()

Combine with color-mix()

.soft-brand {
  background: color-mix(
    in oklab,
    color(display-p3 1 0.2 0.3) 70%,
    white 30%
  );
}

You can mix advanced color spaces for perfect UI shades.

⚠️ Common Mistakes

  • ❌ Assuming color() supports hex inside the function (it doesn't)
  • ❌ Mixing srgb and p3 values incorrectly
  • ❌ Forgetting values must be 0–1
  • ❌ Expecting P3 colors on non-P3 screens

Note

🧠 Always test wide-gamut colors on devices that support them (modern phones, Mac displays).

🔥 Summary

The color() function brings modern, wide-gamut, high-precision color management to CSS. It enables vibrant themes, accurate gradients, color transformations, and future-friendly UI color systems far beyond classic hex or rgb().

>>“color() is the future of CSS color — richer, brighter, and beautifully accurate.”

Learn more →MDN Docs 📘