Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method below:

<color-interpolation-method> - CSS | MDN

Baseline 2023

Newly available

The <color-interpolation-method> CSS data type represents the color space used for interpolation between <color> values. It can be used to override the default interpolation color space for color-related functional notations such as color-mix() and linear-gradient().

When interpolating <color> values, the interpolation color space defaults to Oklab.

The <color-interpolation-method> specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method:

in <rectangular-color-space>
// or
in <polar-color-space>[ <hue-interpolation method>]

<rectangular-color-space>

One of the keywords srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, or xyz-d65.

<polar-color-space>

One of the keywords hsl, hwb, lch, or oklch.

<hue-interpolation-method> Optional

The algorithm for hue interpolation. It defaults to shorter hue.

<custom-color-space>

A <dashed-ident> referring to a custom @color profile.

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  
<rectangular-color-space> = 

  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  <xyz-space>   
<polar-color-space> = 

  hsl    |
  hwb    |
  lch    |
  oklch  
<hue-interpolation-method> = 

  [ shorter | longer | increasing | decreasing ] hue  
<xyz-space> = 

  xyz      |
  xyz-d50  |
  xyz-d65  

The following example shows the effect of using different interpolation color spaces for linear-gradient().

<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>

.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}

The following example shows how to specify a color space when interpolating colors in repeating gradients. Three boxes show different types of repeating gradients using the repeating-conic-gradient(), repeating-linear-gradient(), and repeating-radial-gradient() functions. The first box uses the Lab color space to interpolate between two color values. The second and third boxes use Oklch and additionally provide a <hue-interpolation-method> to specify how to interpolate between hue values.

<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>

We used the same two colors in each gradient to demonstrate the different effects of <hue-interpolation-method> and color space on color interpolation in gradients.

.gradient {
  height: 200px;
  width: 200px;
  display: inline-block;
  font-family: monospace;
  margin: 10px;
  font-size: 16px;
}

.conic {
  background-image: repeating-conic-gradient(
    in lab,
    burlywood,
    blueviolet 120deg
  );
}

.linear {
  background-image: repeating-linear-gradient(
    in oklch,
    burlywood,
    blueviolet 75px
  );
}

.radial {
  background-image: repeating-radial-gradient(
    in oklch longer hue,
    blueviolet 50px,
    burlywood 100px
  );
}

Comparing the first and second boxes demonstrates the difference of interpolating between two colors in differing color spaces. Comparing the second and third boxes shows the difference between <hue-interpolation-method>s, with the linear gradient using the shorter method (default) and the radial gradient using the longer method.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4