CSS4 color function cheatsheet

color() function

color( <color> <color-adjuster>…)
color( <hue> <color-adjuster>…)

CSS4 comes with color manipulation functions similar to those found in Sass or LESS. The color function takes a color or hue with any number of adjustors to generate a new color.

Example

/* Slightly desaturate the heading text to make it visually appear the same color as the body text */
h1 {
  font-size: 50px;
  
  color: color(var(--text-color) saturation(-5%);
}

/* Make the button lighter when hovered */
button {
  background-color: #0073aa;
}
button:hover {
  background-color: color(#0073aa whiteness(+ 10%));
}

Color-adjustors

alpha/a

alpha(<modifier> <value>)
a(<modifier> <value>)

Alter the alpha channel of a color. The <value> can be either a percentage (35%) or a number (0.1). The <modifier> can be +, -, * or omitted.

base color
rgba(255, 0, 255, 0.5)
alpha(10%)
rgba(255, 0, 255, 0.1)
None: set base color’s alpha channel to the value
(colorbase, abase) alpha(v)  (colorbase, v)
alpha(+.2)
rgba(255, 0, 255, 0.7)
+: add the value to the base color’s alpha channel
(colorbase, abase) alpha(+v)  (colorbase, abase + v)
alpha(-15%)
rgba(255, 0, 255, 0.35)
-: subtract the value from the base color’s alpha channel
(colorbase, abase) alpha(-v)  (colorbase, abase  v)
alpha(*10%)
rgba(255, 0, 255, 0.05)
*: multiply the base color’s alpha channel with the value
(colorbase, abase) alpha(*v)  (colorbase, abase · v)

blend

blend(<given-color> <percentage> <color-space>)

Blend the channels of the base color with the channels of the given-color. The given-color is a color, percentage is how much of the given-color is in the resulting color, and color-space is the color space (default is RGB) to blend the channels in.

The process for blending color is:

(xbase, ybase, zbase) blend((xgiven, ygiven, zgiven) percentage)
    ((100%  percentage)·xbase + percentage·xgiven,
      (100%  percentage)·ybase + percentage·ygiven,
      (100%  percentage)·zbase + percentage·zgiven)

A visual example:

Please note:

  • The alpha channel will not be blended. The base color’s alpha value will be used for the resulting color.
  • Each channel is independently blended.
  • Using different color spaces will result in different colors. The specs give the example of blending equal parts of yellow and blue. In RGB space, the channels are rgb(255, 255, 0) and rgb(0, 0, 255), which when blended result in rgb(128, 128, 128) a gray value. When you do the same blending in HSL space, the channels are hsl(60, 100%, 50%) and hsl(240, 100%, 50%), which when blended results in hsl(150, 100%, 50%) a bright green.

blenda

blenda(<given-color> <percentage> <color-space>)

Just like blend except that it also blends the alpha channel.

red

red(<modifier> <value>)

Alter the red channel of a color in RGB color space. The <value> can be either a percentage (35%) or a number (150). The <modifier> can be +, -, * or omitted.

base color
rgb(180, 0, 0)
red(50)
rgb(50, 0, 0)
None: set base color’s red channel to the value
(rbase, gbase, bbase) red(v)  (v, gbase, bbase)
red(+75)
rgb(255, 0, 0)
+: add the value to the base color’s red channel
(rbase, gbase, bbase) red(+v)  (rbase + v, gbase, bbase)
red(-75)
rgb(105, 0, 0)
-: subtract the value from the base color’s red channel
(rbase, gbase, bbase) red(-v)  (rbase  v, gbase, bbase)
red(*50%)
rgb(90, 0, 0)
*: multiply the base color’s red channel with the value
(rbase, gbase, bbase) red(*v)  (rbase · v, gbase, bbase)

green

green(<modifier> <value>)

Alter the green channel of a color in RGB color space. The <value> can be either a percentage (35%) or a number (150). The <modifier> can be +, -, * or omitted.

base color
rgb(0, 180, 0)
green(50)
rgb(0, 50, 0)
None: set base color’s green channel to the value
(rbase, gbase, bbase) green(v)  (rbase, v, bbase)
green(+75)
rgb(0, 255, 0)
+: add the value to the base color’s green channel
(rbase, gbase, bbase) green(+v)  (rbase, gbase + v, bbase)
green(-75)
rgb(0, 105, 0)
-: subtract the value from the base color’s green channel
(rbase, gbase, bbase) green(-v)  (rbase, gbase  v, bbase)
green(*50%)
rgb(0, 90, 0)
*: multiply the base color’s green channel with the value
(rbase, gbase, bbase) green(*v)  (rbase, gbase · v, bbase)

blue

blue(<modifier> <value>)

Alter the blue channel of a color in RGB color space. The <value> can be either a percentage (35%) or a number (150). The <modifier> can be +, -, * or omitted.

base color
rgb(0, 0, 180)
blue(50)
rgb(0, 0, 50)
None: set base color’s blue channel to the value
(rbase, gbase, bbase) blue(v)  (rbase, gbase, v)
blue(+75)
rgb(0, 0, 255)
+: add the value to the base color’s blue channel
(rbase, gbase, bbase) blue(+v)  (rbase, gbase, bbase + v)
blue(-75)
rgb(0, 0, 105)
-: subtract the value from the base color’s blue channel
(rbase, gbase, bbase) blue(-v)  (rbase, gbase, bbase  v)
blue(*50%)
rgb(0, 0, 90)
*: multiply the base color’s blue channel with the value
(rbase, gbase, bbase) blue(*v)  (rbase, gbase, bbase · v)

hue/h

hue(<modifier> <value>)
h(<modifier> <value>)

Alter the hue channel of a color in both HSL and HWB color spaces. The <value> is an angle around color wheel (90deg). The angle can be expressed in deg, grad, rad or turn. The <modifier> can be +, -, * or omitted.

base color
hsl(90, 100%, 50%)
hue(30deg)
hsl(30, 100%, 50%)
None: set base color’s hue channel to the value
(hbase, xbase, ybase) hue(v)  (v, xbase, ybase)
hue(+120deg)
hsl(150, 100%, 50%)
+: add the value to the base color’s hue channel
(hbase, xbase, ybase) hue(+v)  (hbase + v, xbase, ybase)
hue(-90deg)
hsl(0, 100%, 50%)
-: subtract the value from the base color’s hue channel
(hbase, xbase, ybase) hue(-v)  (hbase  v, xbase, ybase)
hue(*10deg)
???
*: multiply the base color’s hue channel with the value. The spec specifies the value is an angle. Not sure how the multiply two angles would work.

saturation/s

saturation(<modifier> <value>)
s(<modifier> <value>)

Alter the saturation channel of a color in HSL color space. The <value> is a percentage (35%). The <modifier> can be +, -, * or omitted.

base color
hsl(200, 50%, 50%)
saturation(95%)
hsl(200, 95%, 50%)
None: set base color’s saturation channel to the value
(hbase, sbase, lbase) saturation(v)  (hbase, v, lbase)
saturation(+25%)
hsl(200, 75%, 50%)
+: add the value to the base color’s saturation channel
(hbase, sbase, lbase) saturation(+v)  (hbase, sbase + v, lbase)
saturation(-15%)
hsl(200, 35%, 50%)
-: subtract the value from the base color’s saturation channel
(hbase, sbase, lbase) saturation(-v)  (hbase, sbase  v, lbase)
saturation(*20%)
hsl(200, 10%, 50%)
*: multiply the base color’s saturation channel with the value
(hbase, sbase, lbase) saturation(*v)  (hbase, sbase · v, lbase)

lightness/l

lightness(<modifier> <value>)
l(<modifier> <value>)

Alter the lightness channel of a color in HSL color space. The <value> is a percentage (35%). The <modifier> can be +, -, * or omitted.

base color
hsl(250, 50%, 50%)
lightness(95%)
hsl(250, 50%, 95%)
None: set base color’s lightness channel to the value
(hbase, sbase, lbase) lightness(v)  (hbase, sbase, v)
lightness(+25%)
hsl(250, 50%, 75%)
+: add the value to the base color’s lightness channel
(hbase, sbase, lbase) lightness(+v)  (hbase, sbase, lbase + v)
lightness(-15%)
hsl(250, 50%, 35%)
-: subtract the value from the base color’s lightness channel
(hbase, sbase, lbase) lightness(-v)  (hbase, sbase, lbase  v)
lightness(*20%)
hsl(250, 50%, 10%)
*: multiply the base color’s lightness channel with the value
(hbase, sbase, lbase) lightness(*v)  (hbase, sbase, lbase · v)

whiteness/w

whiteness(<modifier> <value>)
w(<modifier> <value>)

Alter the whiteness channel of a color in HWB color space. The <value> is a percentage (35%). The <modifier> can be +, -, * or omitted.

base color
hwb(300, 50%, 0%)
whiteness(95%)
hwb(300, 95%, 0%)
None: set base color’s whiteness channel to the value
(hbase, wbase, bbase) whiteness(v)  (hbase, v, bbase)
whiteness(+25%)
hwb(300, 75%, 0%)
+: add the value to the base color’s whiteness channel
(hbase, wbase, bbase) whiteness(+v)  (hbase, wbase + v, bbase)
whiteness(-15%)
hwb(300, 35%, 0%)
-: subtract the value from the base color’s whiteness channel
(hbase, wbase, bbase) whiteness(-v)  (hbase, wbase  v, bbase)
whiteness(*20%)
hwb(300, 10%, 0%)
*: multiply the base color’s whiteness channel with the value
(hbase, wbase, bbase) whiteness(*v)  (hbase, wbase · v, bbase)

blackness/b

blackness(<modifier> <value>)
(<modifier> <value>)

Alter the blackness channel of a color in HWB color space. The <value> is a percentage (35%). The <modifier> can be +, -, * or omitted.

base color
hwb(40, 0%, 50%)
blackness(95%)
hwb(40, 0%, 95%)
None: set base color’s blackness channel to the value
(hbase, wbase, bbase) blackness(v)  (hbase, wbase, v, bbase)
blackness(+25%)
hwb(40, 0%, 75%)
+: add the value to the base color’s blackness channel
(hbase, wbase, bbase) blackness(+v)  (hbase, wbase, bbase + v)
blackness(-15%)
hwb(40, 0%, 35%)
-: subtract the value from the base color’s blackness channel
(hbase, wbase, bbase) blackness(-v)  (hbase, wbase, bbase  v)
blackness(*20%)
hwb(40, 0%, 10%)
*: multiply the base color’s blackness channel with the value
(hbase, wbase, bbase) blackness(*v)  (hbase, wbase, bbase · v)

contrast

contrast()
contrast(<percentage>)

Get a color that contrast with the base color, 0% is the minimally contrasting color, 100% is the maximum contrasting color which will be either white or black. When the <percentage> is omitted, the <percentage> defaults to 100% resulting in black or white.