CSS Data Type - <color>

CSS <color> data type specifies a color for an element. It can also have an alpha-channel transparency value that determines how the color blends with its background.

Possible Values

<named-color> − Color names, such as red, blue, yellow, etc.
<hex-color> − A six-digit hexadecimal code representing RGB (Red, Green, and Blue) values, such as #ff0099.
RGB − The RGB() function represents red, green, and blue values that ranges from 0 to 255 or as percentages, such as rgb(0, 47, 255), rgb(50%, 10%, 100%).
HSL − The HSL() function represents the color based on the Hue, Saturation, and Lightness. such as hsl(0, 50%, 100%).
HWB − The HWB() function represents the color based on the Hue, Whiteness, and Blackness. such as hwb(5 20% 0%).
LAB − The LAB() color space represents the color based on the Lightness, A-axis, and B-axis. such as lab(50% 40 59.5).
LCH − The LCH() color space represents the color based on the Lightness, Chroma, and Hue. such as lch(52.2% 72.2 50).
Oklab − The Oklab() color space represents the color based on the Lightness, A-axis, and B-axis. such as oklab(59% 0.1 0.1).
Oklch − The Oklch() color space represents the color based on the Lightness, Chroma, and Hue. such as oklch(60% 0.15 50).
The color-mix() function is used to combine two different colors.
The light-dark() specifies two colors, the first for light color schemes and the second for dark color schemes.

Syntax

color = <named-color> | <hex-color> | RGB | HSL | HWB | LAB | LCH | Oklab | Oklch;

CSS <color> - currentcolor Keyword

The following example demonstrates the parent element with class "box" sets the text color to red and the border property uses currentcolor keyword, which inherits the red color.

The child element with class "box1" inherits the color from its parent (.box), which is red. Add a blue border and a yellow background.

<html>
<head>
<style>
   .box {
      color: red;
      border: 3px dashed currentcolor;   /* Create a border with 3px dashed style using the currentcolor (red). */
   }
   .box1 {
      color: currentcolor;       /* Inherit the text color from its parent (.box), which is red. */
      border: 5px solid blue;
      background-color: yellow; 
   }
</style>
</head>
<body>
   <div class="box">
      The text color is red. The border property uses currentcolor, which takes the value red from the color property.
      <div class="box1">The text color set to currentcolor, which inherits the red color. Add a blue border and a yellow background.</div>
   </div>
</body>
</html>

CSS <color> - Missing Color Components

You can use the none keyword to denote a missing component within CSS color functions (except for legacy comma-separated syntax).

color: oklab(50% none -0.30); is equivalent to color: oklab(50% 0 -0.30);
background-color: hsl(none 50% 80%); is equivalent to background-color: hsl(0deg 50% 80%);

<html>
<head>
<style>
   div {
      color: oklab(50% none -0.30);
      background-color: hsl(none 50% 80%);
      padding: 5px;
   }
</style>
</head>
<body>
   <div>color: oklab(50% none -0.30); and background-color: hsl(none 50% 80%);</div>
</body>
</html>

CSS <color> - Interpolation

Color interpolation is used in gradients, transitions, and animations.

When interpolating <color> values, they are converted to a specified color space, and their components are linearly interpolated with the interpolation speed determined by the easing function, which defaults to Oklab but can be overridden by <color-interpolation-method> in specific color-related functional notations.

CSS <color> - Interpolating Colors In The Same Space

When interpolating colors within the same color space, missing components in one color are replaced by matching values from the other. The following two expressions are equal:

color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));

Both expressions give the same result in the same final color with 60% lightness and 0.2 chroma, but different hues: 120° and 180°.

Here is an example −

<html>
<head>
<style>
   div {
      color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
   }
   p {
      color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));
   }
</style>
</head>
<body>
   <div>color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));</div>
   <p>color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));</p>
</body>
</html>

CSS <color> - Interpolating Colors From Different Spaces

When interpolating colors, if one of the colors doesn't belong to the interpolation color system, its missing components are adjusted based on similar components from the same category as shown in the following table:

Category	Analogous Components
Reds	R, X
Greens	G, Y
Blues	B, Z
Lightness	L
Colorfulness	C, S
Hue	H
a	a
b	b

For example

X (0.2) in colour (xyz 0.2 0.1 0.6) corresponds to R (50%) in RGB (50% 70% 30%).
H (0deg) in hsl(0deg 100% 80%) corresponds to H (140) in oklch(80% 0.1 140).

The preprocessing procedure for color interpolation using Oklch as the color space:

step 1: Replace missing components with zero.

lch(80% 30 0);
color(display-p3 0.7 0.5 0);

step 2: Convert both colors into Oklch.

oklch(83.915% 0.0902 0.28);
oklch(63.612% 0.1522 78.748);

step 3: Reset components analogous to missing ones.

oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)

step 4: Replace missing components with values from the other color.

oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)

The following example demonstrates that if a component is missing in one color, use the corresponding component from the other color during interpolation −

<html>
<head>
<style>
   div {
      color: oklch(83.915% 0.0902 78.748);
   }
   p {
      color: oklch(63.612% 0.1522 78.748);
   }
</style>
</head>
<body>
   <div>color: oklch(83.915% 0.0902 78.748);</div>
   <p>color: oklch(63.612% 0.1522 78.748);</p>
</body>
</html>

CSS <color> - Color Value Tester

The following example shows a simple webpage where users can enter a color name into a text field. If the entered color name is correct, the background color changes; otherwise, the message "Invalid colour name" is displayed −

<html>
<head>
<style>
   div {
      height: 200px;
      width: 200px;
      margin: 10px;
   }
</style>
</head>
<body>
   <label for="color">Enter color name:</label>
   <input type="text" id="color" />
   <div></div>
   <script>
      const inputColor = document.querySelector("input");
      const colorBox = document.querySelector("div");

      function validTextColor(stringToTest) {
      if (stringToTest === "inherit" || stringToTest === "transparent") {
         return false;
      }

      const colorDiv = document.createElement("div");
      colorDiv.style.color = stringToTest;
      return !!colorDiv.style.color;
      }

      inputColor.addEventListener("input", () => {
      if (validTextColor(inputColor.value)) {
         colorBox.style.backgroundColor = inputColor.value;
         colorBox.textContent = "";
      } else {
         colorBox.removeAttribute("style");
         colorBox.textContent = "Invalid color name";
      }
      });
   </script>
</body>
</html>

CSS <color> - Fully Saturated sRGB Colors

The following example demonstrates the fully saturated sRGB colors within the sRGB color space −

<html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      height: 50px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0 100% 50%);
   }
   div:nth-child(2) {
      background-color: hsl(51, 86%, 60%);
   }
   div:nth-child(3) {
      background-color: hsl(60 100% 50%);
   }
   div:nth-child(4) {
      background-color: hsl(90 100% 50%);
   }
   div:nth-child(5) {
      background-color: hsl(150, 71%, 42%);
   }
   div:nth-child(6) {
      background-color: hsl(109, 39%, 28%);
   }
   div:nth-child(7) {
      background-color: hsl(182, 78%, 64%);
   }
   div:nth-child(8) {
      background-color: hsl(270, 51%, 46%);
   }
   div:nth-child(9) {
      background-color: hsl(300 100% 50%);
   }
   div:nth-child(10) {
      background-color: hsl(330, 89%, 48%);
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>

CSS <color> - Reds of Different Shades

The following example demonstrates the different shades of the red color using sRGB color space −

<html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      box-sizing: border-box;
      height: 50px;
      margin: 10px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0 100% 0%);
   }
   div:nth-child(2) {
      background-color: hsl(0, 85%, 32%);
   }
   div:nth-child(3) {
      background-color: hsl(0, 98%, 47%);
   }
   div:nth-child(4) {
      background-color: hsl(0, 100%, 73%);
   }
   div:nth-child(5) {
      background-color: hsl(0, 83%, 84%);
   }
   div:nth-child(6) {
      background-color: hsl(0 100% 100%);
      border: solid;
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>

CSS <color> - Reds of Different Saturations

The following example demonstrates the different saturations of the red color using sRGB color space −

<html>
<head>
<style>
   body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: 10px;
   }
   div {
      box-sizing: border-box;
      height: 50px;
      margin: 10px;
      width: 50px;
   }
   div:nth-child(1) {
      background-color: hsl(0, 1%, 46%);
   }
   div:nth-child(2) {
      background-color: hsl(0, 18%, 50%);
   }
   div:nth-child(3) {
      background-color: hsl(0, 36%, 51%);
   }
   div:nth-child(4) {
      background-color: hsl(0, 72%, 45%);
   }
   div:nth-child(5) {
      background-color: hsl(0, 88%, 51%);
   }
   div:nth-child(6) {
      background-color: hsl(0, 100%, 51%);
   }
</style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>