Aanbevolen cursus:

CSS color() functie

Definitie en gebruik van color() De functie staat toe om een kleur te specificeren in een specifieke kleurruimte.

Voorbeeld

Voorbeeld 1

Specificeer de achtergrondkleur in de kleurruimte display-p3 (transparantie 0.3):

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

Probeer het zelf uit

Voorbeeld 2

Gebruik de syntaxis van relatieve waarden:

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

Probeer het zelf uit

CSS syntaxis

Syntaxis van absolute waarden

color(colorspace c1 c2 c3 / A)
Waarde Beschrijving
colorspace

Verplicht. Definieert een van de vooraf gedefinieerde kleurruimtes:

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

Verplicht. Vertegenwoordigt de componentwaarden van de kleurruimte.

Elke waarde kan worden geschreven als een getal (tussen 0 en 1), een percentage (tussen 0% en 100%) of een sleutelwoord none.
/ A

Optioneel. Vertegenwoordigt de waarde van het transparantiekanaal van de kleur (0 betekent volledig transparant, 100 betekent volledig ondoorzichtig).

Men kan ook none (geen transparenskanaal) gebruiken.

Standaardwaarde is 100.

Syntaxis van relatieve waarden

color(from color colorspace c1 c2 c3 / A)
Waarde Beschrijving
from color

Begint met het sleutelwoord from, gevolgd door de kleurwaarde die de oorspronkelijke kleur vertegenwoordigt.

Dit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is.
colorspace

Verplicht. Definieert een van de vooraf gedefinieerde kleurruimtes:

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

Verplicht. Vertegenwoordigt de componentwaarden van de kleurruimte.

Elke waarde kan worden geschreven als een getal (tussen 0 en 1), een percentage (tussen 0% en 100%) of een sleutelwoord none.
/ A

Optioneel. Vertegenwoordigt de waarde van het transparantiekanaal van de kleur (0 betekent volledig transparant, 100 betekent volledig ondoorzichtig).

Men kan ook none (geen transparenskanaal) gebruiken.

Standaardwaarde is 100.

Technische details

Versie: CSS Color Module Level 5

Browserondersteuning

Tafelnummers vertegenwoordigen de browserversie die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Gerelateerde pagina's

Referentie:CSS Kleur