CSS valeur de couleur valide

Les valeurs de couleur légales en CSS peuvent être spécifiées de plusieurs façons, notamment les couleurs nommées, l'hexadécimal, RGB, RGBA, HSL, HSLA et les fonctions de couleur.

Voici plusieurs formats courants de valeurs de couleur légales :

Couleurs nommées :Utilisez directement les noms de couleurs, par exemple : red, blue, green, etc.

color: red;

Couleur hexadécimale :Utilisation#RRGGBBou#RGBvaleur hexadécimale de la forme.

color: #FF0000; /* 红色 */
color: #f00;    /* 简写形式，红色 */

Couleur RGB :Utilisationrgb()Une fonction spécifie les valeurs de rouge, vert et bleu, chaque valeur entre 0 et 255.

color: rgb(255, 0, 0); /* 红色 */

Couleurs RGBA :similaire àrgb(), mais ajoute un canalalpha, utilisé pour spécifier l'opacité, avec des valeurs allant de 0 (entièrement transparent) à 1 (entièrement opaque).

color: rgba(255, 0, 0, 0.5); /* 半透明红色 */

Couleur HSL :Utilisationhsl()La fonction spécifie la teinte (0-360°), la saturation (0%-100%) et la luminosité (0%-100%).

color: hsl(0, 100%, 50%); /* 红色 */

Couleurs HSLA :similaire àhsl(), mais ajoute un canal alpha pour contrôler l'opacité.

color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */

Fonctions de couleur CSS.color()：Définissez des couleurs à l'aide d'un espace colorimétrique, tel que color(display-p3 1 0 0). Cette méthode permet d'utiliser un espace colorimétrique plus large.

color: color(display-p3 1 0 0);

Couleur hexadécimale

Tous les principaux navigateurs prennent en charge les valeurs de couleur hexadécimales.

Une couleur hexadécimale est spécifiée comme suit : #RRGGBB, où RR (rouge), GG (vert) et BB (bleu). Toutes les valeurs doivent être comprises entre 0 et FF.

Par exemple, #0000FF est rendu en bleu car la composante bleue est définie à sa valeur la plus élevée (FF) et les autres sont définies à 0.

Exemple

p {
    background-color:#ff0000;
}

Essayez-le vous-même »

Couleurs RGB

Les valeurs de couleur RGB sont prises en charge dans tous les principaux navigateurs.

Les valeurs de couleur RGB sont spécifiées comme suit : rgb(rouge, vert, bleu). Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur et peut être un entier entre 0 et 255, ou une valeur en pourcentage (de 0% à 100%).

Par exemple, rgb(0,0,255) est rendu en bleu car le paramètre bleu est défini à sa valeur la plus élevée (255) et les autres sont définis à 0.

De plus, les valeurs suivantes définissent la même couleur : RGB (0,0,255), RGB (0%,0%,100%).

Exemple

p {
    background-color:rgb(255,0,0);
}

Essayez-le vous-même »

Couleur RGBA

Valeur de couleur RGBA prise en charge par IE9, Firefox3+, Chrome, Safari et Opera10+.

Les valeurs de couleur RGBA sont une extension des valeurs de couleur RVB avec un canal alpha - spécifiant l'opacité d'un objet.

Les valeurs de couleur RGBA sont spécifiées comme suit : rgba(red, green, blue, alpha). Le paramètre alpha est un paramètre compris entre 0.0 (entièrement transparent) et 1.0 (entièrement opaque).

Exemple

p {
    background-color:rgba(255,0,0,0.5);
}

Essayez-le vous-même »

Couleur HSL

IE9, Firefox, Chrome, Safari et Opera 10+ prennent en charge les valeurs de couleur HSL.

HSL signifie teinte, saturation et luminosité - représenté à l'aide d'un modèle de couleur en coordonnées cylindriques.

Les valeurs de couleur HSL sont spécifiées comme suit : hsl(hue, saturation, lightness).

La teinte est le degré sur le cercle chromatique (de 0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu. La saturation est une valeur en pourcentage ; 0% signifie une nuance de gris et 100% est la couleur pleine. La luminosité est également un pourcentage ; 0% est noir, 100% est blanc.

Exemple

p {
    background-color:hsl(120,65%,75%);
}

Essayez-le vous-même »

Couleur HSLA

Les valeurs de couleur HSLA sont prises en charge par IE9, Firefox3+, Chrome, Safari et Opera10+.

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha - spécifiant l'opacité d'un objet.

Spécifiez les valeurs de couleur HSLA : hsla(hue, saturation, lightness, alpha), où alpha est l'opacité définie par le paramètre Alpha. Le paramètre alpha est un paramètre compris entre 0.0 (entièrement transparent) et 1.0 (entièrement opaque).

Exemple

p {
    background-color:hsla(120,65%,75%,0.3);
}

Essayez-le vous-même »

Noms de couleurs prédéfinis/multi-navigateurs

Il existe 147 noms de couleurs prédéfinis dans les spécifications de couleurs HTML et CSS. Vous pouvez consulter notreTable des noms de couleurs prédéfinis。

autres extensions