CSS
Couleurs

Syntaxe

• couleur: #rgb
• couleur: #rrggbb
• couleur: rgb [a] (<red>, <green>, <blue> [, <alpha>])
• couleur: hsl [a] (<hue>, <saturation%>, <lightness%> [, <alpha>])
• couleur: colorkeyword / * vert, bleu, jaune, orange, rouge, ..etc * /

Mots-clés de couleur

La plupart des navigateurs utilisent des mots-clés en couleur pour spécifier une couleur. Par exemple, pour définir la color d'un élément sur bleu, utilisez le mot-clé blue :

.some-class {
    color: blue;
}

Mots - clés CSS ne sont pas les majuscules sensitive- blue , Blue et BLUE generera dans #0000FF .

Mots-clés de couleur

Nom de la couleur	Valeur hexadécimale	Valeurs RVB	Couleur
AliceBlue	# F0F8FF	rgb (240,248,255)
Blanc antique	# FAEBD7	rgb (250,235,215)
Aqua	# 00FFFF	rgb (0,255,255)
Bleu vert	# 7FFFD4	rgb (127,255,212)
Azur	# F0FFFF	rgb (240 255 255)
Beige	# F5F5DC	rgb (245,245,220)
Bisque	# FFE4C4	rgb (255.228.196)
Noir	# 000000	rgb (0,0,0)
BlanchiAlmond	#FFEBCD	rgb (255,235,205)
Bleu	# 0000FF	rgb (0,0,255)
BlueViolet	# 8A2BE2	rgb (138,43,226)
marron	# A52A2A	rgb (165,42,42)
Bois bohu	# DEB887	rgb (222,184,135)
CadetBlue	# 5F9EA0	rgb (95,158,160)
Chartreuse	# 7FFF00	rgb (127 255,0)
Chocolat	# D2691E	rgb (210,105,30)
corail	# FF7F50	rgb (255,127,80)
Bleuet	# 6495ED	rgb (100 149 237)
Soie de maïs	# FFF8DC	rgb (255 248 220)
cramoisi	# DC143C	rgb (220,20,60)
Cyan	# 00FFFF	rgb (0,255,255)
Bleu foncé	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0,139,139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
Gris foncé	# A9A9A9	rgb (169,169,169)
Gris foncé	# A9A9A9	rgb (169,169,169)
Vert foncé	# 006400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189,183,107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
Orange sombre	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
Rouge foncé	# 8B0000	rgb (139,0,0)
DarkSalmon	# E9967A	rgb (233,150,122)
DarkSeaGreen	# 8FBC8F	RVB (143 188 143)
DarkSlateBlue	# 483D8B	rgb (72,61,139)
DarkSlateGray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
DarkTurquoise	# 00CED1	rgb (0,206,209)
DarkViolet	# 9400D3	rgb (148,0,211)
Rose profond	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0,191,255)
DimGray	# 696969	rgb (105,105,105)
DimGrey	# 696969	rgb (105,105,105)
DodgerBlue	# 1E90FF	rgb (30,144,255)
FireBrick	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255 250 240)
Forêt verte	# 228B22	rgb (34,139,34)
Fuchsia	# FF00FF	rgb (255,0,255)
Gainsboro	#DCDCDC	rgb (220 220 220)
GhostWhite	# F8F8FF	rgb (248,248,255)
Or	# FFD700	rgb (255,215,0)
GoldenRod	# DAA520	rgb (218,165,32)
Gris	# 808080	rgb (128,128,128)
Gris	# 808080	rgb (128,128,128)
vert	# 008000	rgb (0,128,0)
Vert jaune	# ADFF2F	rgb (173 255,47)
Miellat	# F0FFF0	rgb (240 255 240)
Rose vif	# FF69B4	rgb (255,105,180)
IndianRed	# CD5C5C	rgb (205,92,92)
Indigo	# 4B0082	rgb (75,0,130)
Ivoire	# FFFFF0	rgb (255,255,240)
Kaki	# F0E68C	rgb (240,230,140)
Lavande	# E6E6FA	rgb (230 230 250)
LavandeBlush	# FFF0F5	rgb (255,240,245)
LawnGreen	# 7CFC00	rgb (124,252,0)
Citronchiffon	#FFFACD	rgb (255 250 205)
Bleu clair	# ADD8E6	rgb (173,216,230)
LightCoral	# F08080	rgb (240,128,128)
Cyan clair	# E0FFFF	rgb (224,255,255)
LightGoldenRodYellow	# FAFAD2	rgb (250 250 210)
Gris clair	# D3D3D3	rgb (211,211,211)
Gris clair	# D3D3D3	rgb (211,211,211)
Vert clair	# 90EE90	rgb (144.238.144)
Rose clair	# FFB6C1	rgb (255,182,193)
LightSalmon	# FFA07A	rgb (255,160,122)
LightSeaGreen	# 20B2AA	rgb (32,178,170)
LightSkyBlue	# 87CEFA	rgb (135 206 250)
LightSlateGray	# 778899	rgb (119,136,153)
LightSlateGrey	# 778899	rgb (119,136,153)
LightSteelBlue	# B0C4DE	rgb (176,196,222)
Jaune clair	# FFFFE0	rgb (255,255,224)
Citron vert	# 00FF00	rgb (0,255,0)
Vert citron	# 32CD32	rgb (50,205,50)
Lin	# FAF0E6	rgb (250,240,230)
Magenta	# FF00FF	rgb (255,0,255)
Bordeaux	# 800000	rgb (128,0,0)
MoyenAquaMarine	# 66CDAA	rgb (102,205,170)
MediumBlue	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
MediumPurple	# 9370DB	rgb (147,112,219)
MediumSeaGreen	# 3CB371	rgb (60,179,113)
MediumSlateBlue	# 7B68EE	rgb (123,104,238)
MediumSpringGreen	# 00FA9A	rgb (0,250,154)
MediumTurquoise	# 48D1CC	rgb (72,209,204)
MediumVioletRed	# C71585	rgb (199,21,133)
Bleu nuit	# 191970	rgb (25,25,112)
MintCream	# F5FFFA	rgb (245 255 250)
MistyRose	# FFE4E1	rgb (255,228,225)
Mocassin	# FFE4B5	rgb (255.228.181)
Navajo Blanc	#FFDEAD	rgb (255,222,173)
Marine	# 000080	rgb (0,0,128)
OldLace	# FDF5E6	rgb (253,245,230)
olive	# 808000	rgb (128,128,0)
OliveDrab	# 6B8E23	rgb (107 142,35)
Orange	# FFA500	rgb (255,165,0)
Rouge-orange	# FF4500	rgb (255,69,0)
Orchidée	# DA70D6	rgb (218,112,214)
PaleGoldenRod	# EEE8AA	rgb (238,232,170)
Vert pâle	# 98FB98	rgb (152,251,152)
PaleTurquoise	#AFEEEE	rgb (175,238,238)
PaleVioletRed	# DB7093	rgb (219,112,147)
PapayaWhip	# FFEFD5	rgb (255,239,213)
PeachPuff	# FFDAB9	rgb (255 218 185)
Pérou	# CD853F	rgb (205,133,63)
Rose	# FFC0CB	rgb (255,192,203)
prune	# DDA0DD	rgb (221,160,221)
Poudre bleue	# B0E0E6	rgb (176,224,230)
Violet	# 800080	rgb (128,0,128)
RebeccaPurple	# 663399	rgb (102,51,153)
rouge	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	RVB (188 143 143)
Bleu royal	# 4169E1	rgb (65,105,225)
SaddleBrown	# 8B4513	rgb (139,69,19)
Saumon	# FA8072	rgb (250,128,114)
SandyBrown	# F4A460	rgb (244,164,96)
SeaGreen	# 2E8B57	rgb (46,139,87)
SeaShell	# FFF5EE	rgb (255,245,238)
Terre de sienne	# A0522D	rgb (160,82,45)
argent	# C0C0C0	rgb (192,192,192)
Bleu ciel	# 87CEEB	rgb (135 206 235)
SlateBlue	# 6A5ACD	rgb (106,90,205)
Gris ardoise	# 708090	rgb (112,128,144)
Gris ardoise	# 708090	rgb (112,128,144)
Neige	#FFFAFA	rgb (255 250 250)
Vert printanier	# 00FF7F	rgb (0,255,127)
SteelBlue	# 4682B4	rgb (70 130 180)
bronzer	# D2B48C	RVB (210,180,140)
Sarcelle	# 008080	rgb (0,128,128)
Chardon	# D8BFD8	rgb (216,191,216)
Tomate	# FF6347	rgb (255,99,71)
Turquoise	# 40E0D0	rgb (64,224,208)
Violet	# EE82EE	rgb (238,130,238)
Blé	# F5DEB3	rgb (245,222,179)
blanc	#FFFFFF	rgb (255,255,255)
Fumée blanche	# F5F5F5	rgb (245,245,245)
Jaune	# FFFF00	rgb (255,255,0)
Vert jaunâtre	# 9ACD32	rgb (154,205,50)

En plus des couleurs nommées, il y a aussi le mot-clé transparent , qui représente un noir entièrement transparent: rgba(0,0,0,0)

Valeur hexadécimale

Contexte

Les couleurs CSS peuvent également être représentées sous la forme d'un triplet hexadécimal, où les membres représentent les composants rouge, vert et bleu d'une couleur. Chacune de ces valeurs représente un nombre compris entre 00 et FF , ou 0 à 255 en notation décimale. Des valeurs Hexidécimales majuscules et / ou minuscules peuvent être utilisées (par exemple, #3fc = #3FC = #33ffCC ). Le navigateur interprète #369 comme #336699 . Si ce n'est pas ce que vous vouliez, mais plutôt le #306090 , vous devez le spécifier explicitement.

Le nombre total de couleurs pouvant être représentées avec une notation hexadécimale est 256 ^ 3 ou 16 777 216.

Syntaxe

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

La notation hexadécimale est utilisée pour spécifier les valeurs de couleur dans le format de couleur RVB, conformément aux «valeurs de couleur numériques» du W3C .

De nombreux outils sont disponibles sur Internet pour rechercher des valeurs de couleur hexadécimales (ou simplement hexadécimales).

Recherchez " palette de couleurs hexadécimales " ou " sélecteur de couleurs hexadécimal " avec votre navigateur Web préféré pour trouver un tas d'options!

Les valeurs hexadécimales commencent toujours par un signe dièse (#), durent jusqu'à six "chiffres" et ne sont pas sensibles à la casse: elles ne se soucient pas de la capitalisation. #FFC125 et #ffc125 sont de la même couleur.

rgb () Notation

RVB est un modèle de couleur additif qui représente les couleurs sous forme de mélanges de lumière rouge, verte et bleue. Essentiellement, la représentation RVB est l’équivalent décimal de la notation hexadécimale. En hexadécimal, chaque nombre est compris entre 00-FF, ce qui équivaut à 0-255 en décimal et 0% à 100% en pourcentage.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Syntaxe

rgb(<red>, <green>, <blue>)

hsl () Notation

HSL signifie teinte ("quelle couleur"), saturation ("combien de couleur") et légèreté ("combien de blanc").

La teinte est représentée par un angle de 0 ° à 360 ° (sans unités), tandis que la saturation et la légèreté sont représentées sous forme de pourcentages.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Syntaxe

color: hsl(<hue>, <saturation>%, <lightness>%);

Remarques

• Une saturation de 0% produit toujours une couleur en niveaux de gris; changer la teinte n'a aucun effet.

• Une légèreté de 0% produit toujours du noir et 100% produit toujours du blanc; changer la teinte ou la saturation n'a aucun effet.

currentColor

currentColor renvoie la valeur de couleur calculée de l'élément en cours.

Utiliser dans le même élément

Ici, la propriété currentColor est définie sur red car la propriété de color est définie sur red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

Dans ce cas, la spécification de currentColor pour la bordure est probablement redondante car son omission devrait produire des résultats identiques. Utilisez uniquement la propriété currentColor à l'intérieur de la propriété border dans le même élément si elle est remplacée par un sélecteur plus spécifique .

Étant donné que c'est la couleur calculée, la bordure sera verte dans l'exemple suivant en raison de la seconde règle remplaçant le premier:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Hérité de l'élément parent

La couleur du parent est héritée, ici currentColor est évalué à 'bleu', ce qui rend la couleur de bordure de l'élément enfant bleue.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor peut également être utilisé par d'autres règles qui, normalement, n'hériteraient pas de la propriété color, comme la couleur d'arrière-plan. L'exemple ci-dessous montre les enfants utilisant la couleur définie dans le parent comme arrière-plan:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Résultat possible:

rgba () Notation

Similaire à la notation rgb () , mais avec une valeur alpha (opacité) supplémentaire.

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Syntaxe

rgba(<red>, <green>, <blue>, <alpha>);

hsla () Notation

Similaire à la notation hsl () , mais avec une valeur alpha (opacité) ajoutée.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntaxe

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);