CSS Function - lab()

The lab() function in CSS expresses a color in CIE L*a*b color space. It represents all the colors that are visible to human eye.

To add the color transparency, an optional alpha component can be passed to the lab() function.

Possible values

The functional notation for lab() function is lab(L a b[ / A]).

  • L: can contain either of the format(s), that represents the CIE lightness:

    • a <number>: any number between 0 and 100, where 0 corresponds to 0% (black) and 100 corresponds to 100% (white).

    • an <percentage>: any value between 0% and 100%.

    • keyword none

  • a: can contain either of the format(s), that specifies the distance along the a-axis in the CIELAB color space (shows how green/red color is):

    • a <number>: any number between -125 and 125.

    • a <percentage>: any value between -100% and 100%.

    • keyword none

  • b: can contain either of the format(s), that specifies the distance along the b-axis in the CIELAB color space (shows how blue/yellow color is):

    • a <number>: any number between -125 and 125.

    • a <percentage>: any value between -100% 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

In case of lab() function, the value 100% is equal to number 100 for the L value and 125 for a and b values.

Syntax

lab(29.2345% 39.3825 20.0664) | lab(29 39.3825% 20.0664%) | lab(29.2345% 39.3825 20.0664 / 0.5);

CSS lab() - Combination of Values

Following is an example showing the usage of lab() function with different combinations of values:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .lab-b-none {
      background-color: lab(100 125 none);
   }
   .lab-a-none {
      background-color: lab(100 none 125);
   }

   .lab-l-none {
      background-color: lab(none -120 125);
      color: white;
   }
   .lab-l-percent {
      background-color: lab(75% -120 none);
   }

   .lab-ab-negative {
      background-color: lab(0 -120 -120);
   }
   .lab-all-positive {
      background-color: lab(100 -125 -110);
   }

   .lab-alpha {
      background-color: lab(100 -125 -110 / 0.2);
   }
</style>
</head>
<body>
   <div class="lab-b-none">b=none</div>
   <div class="lab-a-none">a=none</div>

   <div class="lab-l-none">L=none</div>
   <div class="lab-l-percent">L=%</div>

   <div class="lab-ab-negative">a&b=-ve values</div>
   <div class="lab-all-positive">all=+ve values</div>

   <div class="lab-alpha">alpha value added</div>
</body>
</html>
Advertisements