CSS color() funktion

Definition og brug

CSS' color() Funktionen tillader at specificere farver i et bestemt farverum.

Eksempel

Eksempel 1

Angiv baggrundsfarven i display-p3-farverummet (gennemskinnelighed 0.3):

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

Prøv det selv

Eksempel 2

Brug relative værdisprog:

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

Prøv det selv

CSS-sprog

Absolut værdisprog

color(colorspace c1 c2 c3 / A)
Værdi Beskrivelse
colorspace

Obligatorisk. Definerer en af de prædefinerede farverum:

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

Obligatorisk. Angiver værdien for komponenterne i farverummet.

Hver værdi kan skrives som et tal (mellem 0 og 1), en procent (mellem 0% og 100%) eller et nøgleord none.
/ A

Valgfri. Angiver værdien for farveens gennemskinnelighedskanal (0 betyder fuldstændig gennemsigtig, 100 betyder fuldstændig uigennemsigtig).

Man kan også bruge none (som betyder ingen gennemskinnelighedskanal).

Standardværdien er 100.

Relative værdisprog

color(from color colorspace c1 c2 c3 / A)
Værdi Beskrivelse
from color

Begynder med nøgleordet from, efterfulgt af farveværdien, der repræsenterer den oprindelige farve.

Dette er den oprindelige farve, som relative farver er baseret på.
colorspace

Obligatorisk. Definerer en af de prædefinerede farverum:

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

Obligatorisk. Angiver værdien for komponenterne i farverummet.

Hver værdi kan skrives som et tal (mellem 0 og 1), en procent (mellem 0% og 100%) eller et nøgleord none.
/ A

Valgfri. Angiver værdien for farveens gennemskinnelighedskanal (0 betyder fuldstændig gennemsigtig, 100 betyder fuldstændig uigennemsigtig).

Man kan også bruge none (som betyder ingen gennemskinnelighedskanal).

Standardværdien er 100.

Tekniske detaljer

Version: CSS Color Module Level 5

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Relaterede sider

Reference:CSS farver