Surveys / State of CSS 2023
This survey closed on July 15, 2023. View Survey Results »

3/13Colors

  1. color()
  2. accent-color
  3. currentColor
  4. color-mix()
  5. Wide Gamut Colors
  6. Relative Colors
  7. Interpolation Color Spaces

css 
.brightest-green {
  background: color(display-p3 0 1 0);
}

css 
input[type='checkbox'] {
  accent-color: tomato;
}

css 
.blue-text {
  color: blue;
}
.blue-text .blue-background {
  background: currentColor;
}

css 
.teal {
  background: color-mix(in lab, white 20%, #34c9eb);
}

lch(), lab(), oklch(), oklab()

css 
.foo {
  background-color: lab(29.2345% 39.3825 20.0664);
  background-color: lch(29.2345% 44.2 27);
}

css 
.foo {
  --color: #4488dd;
  background-color: hsl(from var(--color) h s calc(l * 1.2))
}

css 
.gradient {
  background: linear-gradient(in oklab, hsl(80 90% 50%), red);
}