CSS Function - color()

Quiz

The color() function in CSS permits the usage of a color, that can be specified in a particular colorspace, instead of the default sRGB colorspace, which is used by most of the color functions.

color-gamut CSS media feature can be used to check the support for a particular colorspace.

Possible values

The functional notation for color() function is color(colorspace c1 c2 c3[ / A]).

colorspace: its an <ident> (string) representing the name of the colorspaces:
- a srgb
- a srgb-linear
- a display-p3
- a a98-rgb
- a prophoto-rgb
- a rec2020
- a xyz
- a xyz-d50
- a xyz-d65
c1, c2, c3: can contain either of the format(s), that represents the component values in the colorspace:
- a <number>: any value between 0 and 1.
- a <percentage>: any value between 0% and 100%.
- keyword none
A: represents the transparency of the color. It is an optional value.
- <alpha-value>: any number between 0 and 1, where 1 corresponds to full opacity and 0 corresponds to full transparency.
- keyword none

Syntax

color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)

CSS color() - Using pre-defined colorspaces

Following is an example showing the usage of predefined colorspaces with color() function with varying values of lightness, a-axis and b-axis:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   
   .color-srgb {
      background-color: color(srgb 1 0 0);
   }  

   .color-srgb-linear {
      background-color: color(srgb-linear 0 1 0);
   }  

   .color-display-p3 {
      background-color: color(display-p3 0.4 0.6 35%);
   }  

   .color-a98-rgb {
      background-color: color(a98-rgb 1 1 0);
   }  

   .color-prophoto-rgb {
      background-color: color(prophoto-rgb 0 0 1);
      color: white ;
   }

   .color-rec2020 {
      background-color: color(rec2020 0.6 0.1 1 / 0.4);
   }
</style>
</head>
<body>
   <div class="color-srgb">color(srgb 1 0 0)</div>
   <div class="color-srgb-linear">color(srgb-linear 0 1 0)</div>
   <div class="color-display-p3">color(display-p3 0.4 0.6 35%)</div>
   <div class="color-a98-rgb">color(a98-rgb 1 1 0)</div>
   <div class="color-prophoto-rgb">color(prophoto-rgb 0 0 1)</div>
   <div class="color-rec2020">color(rec2020 0.6 0.1 1 / 0.4)</div>
</body>
</html>

CSS color() - Using xyz colorspaces

Following is an example showing the usage of xyz colorspaces with color() function with varying values of lightness, a-axis and b-axis:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   
   .color-xyz {
      background-color: color(xyz 1 0 0);
   }  

   .color-xyz-d50 {
      background-color: color(xyz-d50 1 1 0);
   }  

   .color-xyz-d65 {
      background-color: color(xyz-d65 1 0 75% / 0.3);
   }  
</style>
</head>
<body>
   <div class="color-xyz">color(xyz 1 0 0)</div>
   <div class="color-xyz-d50">color(xyz-d50 1 1 0)</div>
   <div class="color-xyz-d65">color(xyz-d65 1 0 75% / 0.3)</div>
</body>
</html>

Print Page