Recommandation de cours :

CSS color() fonction

Définition et utilisation de color() La fonction permet de spécifier une couleur dans un espace de couleur spécifique.

Exemple

Exemple 1

Définissez la couleur de fond dans l'espace de couleur display-p3 (transparence 0.3) :

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

Essayez-le vous-même

Exemple 2

Utilisez la syntaxe des valeurs relatives :

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

Essayez-le vous-même

Syntaxe CSS

Syntaxe des valeurs absolues

color(colorspace c1 c2 c3 / A)
Valeur Description
colorspace

Obligatoire. Définit l'un des espaces de couleur prédéfinis :

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

Obligatoire. Représente la valeur des composants de l'espace de couleur.

Chaque valeur peut être écrite sous forme de nombre (entre 0 et 1), pourcentage (entre 0% et 100%) ou mot-clé none.
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0 pour une transparence complète, 100 pour une opacité complète).

none (représentant un canal de transparence absent) peut également être utilisé.

La valeur par défaut est 100.

Syntaxe des valeurs relatives

color(from color colorspace c1 c2 c3 / A)
Valeur Description
from color

Commence par le mot-clé from, suivi de la valeur de la couleur de la couleur originale.

C'est la couleur originale sur laquelle se basent les couleurs relatives.
colorspace

Obligatoire. Définit l'un des espaces de couleur prédéfinis :

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

Obligatoire. Représente la valeur des composants de l'espace de couleur.

Chaque valeur peut être écrite sous forme de nombre (entre 0 et 1), pourcentage (entre 0% et 100%) ou mot-clé none.
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0 pour une transparence complète, 100 pour une opacité complète).

none (représentant un canal de transparence absent) peut également être utilisé.

La valeur par défaut est 100.

Détails techniques

Version : Module de couleur CSS niveau 5

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Pages connexes

Référence :Couleurs CSS