CSS color() funktion

Definition och användning

CSS: color() Funktionen tillåter att specificera färgen i en specifik färgrymd.

Exempel

Exempel 1

Specificera bakgrundsfärgen i display-p3-färgrymden (genomskinlighet 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Prova själv

Exempel 2

Använd relative värdesyntax:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Prova själv

CSS-syntax

Absolut värdesyntax

color(colorspace c1 c2 c3 / A)
Värde Beskrivning
colorspace

Obligatoriskt. Definierar en av de fördefinierade färgrymdarna:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Obligatoriskt. Anger komponentvärdet för färgrymden.

Varje värde kan skrivas som ett nummer (mellan 0 och 1), en procentandel (mellan 0% och 100%) eller ett nyckelord none.
/ A

Valfritt. Anger genomskinlighetskanalvärdet för färgen (0 betyder helt genomskinlig, 100 betyder helt opåverkad).

Man kan också använda none (som betyder ingen genomskinlighet).

Standardvärdet är 100.

Relative värdesyntax

color(from color colorspace c1 c2 c3 / A)
Värde Beskrivning
from color

Börjar med nyckelordet from, följt av färgvärdet som representerar den ursprungliga färgen.

Detta är den ursprungliga färgen som relativa färger är baserade på.
colorspace

Obligatoriskt. Definierar en av de fördefinierade färgrymdarna:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Obligatoriskt. Anger komponentvärdet för färgrymden.

Varje värde kan skrivas som ett nummer (mellan 0 och 1), en procentandel (mellan 0% och 100%) eller ett nyckelord none.
/ A

Valfritt. Anger genomskinlighetskanalvärdet för färgen (0 betyder helt genomskinlig, 100 betyder helt opåverkad).

Man kan också använda none (som betyder ingen genomskinlighet).

Standardvärdet är 100.

Tekniska detaljer

Version: CSS Color Module Level 5

Webbläsarstöd

Tabellen siffror indikerar den första webbläsarversionen som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Relaterade sidor

Referens:CSS färger