« Couleurs CSS » : différence entre les versions

De knowledge
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
Ligne 1 : Ligne 1 :
=== Les couleurs de bases ===
=== Les couleurs de bases ===
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">silver</div><div style="flex: 1; background-color: silver;"> </div></div>
<div style="text-align: center">
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">gray</div><div style="flex: 1; background-color: gray;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">silver</div><div style="flex: 1; background-color: silver;"> </div><div style="flex: 1; background-color: white;">#C0C0C0</div><div style="flex: 1; background-color: white;">rgb(192,192,192)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">white</div><div style="flex: 1; background-color: white;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">gray</div><div style="flex: 1; background-color: gray;"> </div><div style="flex: 1; background-color: white;">#808080</div><div style="flex: 1; background-color: white;">rgb(128,128,128)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">maroon</div><div style="flex: 1; background-color: maroon;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">white</div><div style="flex: 1; background-color: white;"> </div><div style="flex: 1; background-color: white;">#FFFFFF</div><div style="flex: 1; background-color: white;">rgb(255,255,255)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">red</div><div style="flex: 1; background-color: red;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">maroon</div><div style="flex: 1; background-color: maroon;"> </div><div style="flex: 1; background-color: white;">#800000</div><div style="flex: 1; background-color: white;">rgb(128,0,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">purple</div><div style="flex: 1; background-color: purple;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">red</div><div style="flex: 1; background-color: red;"> </div><div style="flex: 1; background-color: white;">#FF0000</div><div style="flex: 1; background-color: white;">rgb(255,0,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">fuchsia</div><div style="flex: 1; background-color: fuchsia;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">purple</div><div style="flex: 1; background-color: purple;"> </div><div style="flex: 1; background-color: white;">#800080</div><div style="flex: 1; background-color: white;">rgb(128,0,128)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">green</div><div style="flex: 1; background-color: green;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">fuchsia</div><div style="flex: 1; background-color: fuchsia;"> </div><div style="flex: 1; background-color: white;">#FF00FF</div><div style="flex: 1; background-color: white;">rgb(255,0,255)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">lime</div><div style="flex: 1; background-color: lime;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">green</div><div style="flex: 1; background-color: green;"> </div><div style="flex: 1; background-color: white;">#008000</div><div style="flex: 1; background-color: white;">rgb(0,128,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">olive</div><div style="flex: 1; background-color: olive;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">lime</div><div style="flex: 1; background-color: lime;"> </div><div style="flex: 1; background-color: white;">#00FF00</div><div style="flex: 1; background-color: white;">rgb(0,255,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">yellow</div><div style="flex: 1; background-color: yellow;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">olive</div><div style="flex: 1; background-color: olive;"> </div><div style="flex: 1; background-color: white;">#808000</div><div style="flex: 1; background-color: white;">rgb(128,128,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">navy</div><div style="flex: 1; background-color: navy;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">yellow</div><div style="flex: 1; background-color: yellow;"> </div><div style="flex: 1; background-color: white;">#FFFF00</div><div style="flex: 1; background-color: white;">rgb(255,255,0)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">blue</div><div style="flex: 1; background-color: blue;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">navy</div><div style="flex: 1; background-color: navy;"> </div><div style="flex: 1; background-color: white;">#000080</div><div style="flex: 1; background-color: white;">rgb(0,0,128)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">teal</div><div style="flex: 1; background-color: teal;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">blue</div><div style="flex: 1; background-color: blue;"> </div><div style="flex: 1; background-color: white;">#0000FF</div><div style="flex: 1; background-color: white;">rgb(0,0,255)</div></div>
<div style="width: 200px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">aqua</div><div style="flex: 1; background-color: aqua;"> </div></div>
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">teal</div><div style="flex: 1; background-color: teal;"> </div><div style="flex: 1; background-color: white;">#008080</div><div style="flex: 1; background-color: white;">rgb(0,128,128)</div></div>
 
<div style="width: 500px; display: flex; border: 1px solid #ccc; margin-bottom: 10px;"><div style="flex: 1; background-color: white;">aqua</div><div style="flex: 1; background-color: aqua;"> </div><div style="flex: 1; background-color: white;">#00FFFF</div><div style="flex: 1; background-color: white;">rgb(0,255,255)</div></div>
 
</div>
=== Les couleurs étendues ===
=== Les couleurs étendues ===

Version du 24 juin 2025 à 11:57

Les couleurs de bases

silver
#C0C0C0
rgb(192,192,192)
gray
#808080
rgb(128,128,128)
white
#FFFFFF
rgb(255,255,255)
maroon
#800000
rgb(128,0,0)
red
#FF0000
rgb(255,0,0)
purple
#800080
rgb(128,0,128)
fuchsia
#FF00FF
rgb(255,0,255)
green
#008000
rgb(0,128,0)
lime
#00FF00
rgb(0,255,0)
olive
#808000
rgb(128,128,0)
yellow
#FFFF00
rgb(255,255,0)
navy
#000080
rgb(0,0,128)
blue
#0000FF
rgb(0,0,255)
teal
#008080
rgb(0,128,128)
aqua
#00FFFF
rgb(0,255,255)

Les couleurs étendues