Couleurs et unités

Une couleur, plusieurs écritures

Ces cinq valeurs désignent exactement le même rouge :

color: red;
color: #ff0000;
color: #f00;                   /* forme courte : chaque chiffre est doublé */
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);

Hexadécimal #rrggbb : rouge, vert, bleu, de 00 à ff. La forme la plus répandue dans les chartes graphiques. #1D8FBF et #1d8fbf sont identiques.
rgb(r, g, b) : les mêmes canaux, de 0 à 255.
hsl(teinte, saturation, luminosité) : la plus lisible pour un humain. Assombrir une couleur revient à baisser le troisième nombre.
Une quatrième valeur, l'opacité, rend une couleur transparente : rgb(0 0 0 / 50%), ou #00000080.

Les exercices acceptent toutes les écritures : c'est la couleur obtenue qui compte.

Les unités

Unité	Relative à	Usage
`px`	rien : un pixel CSS	bordures, petits détails
`%`	l'élément parent	largeurs
`em`	la taille de police de l'élément	espacements liés au texte
`rem`	la taille de police de la page	tailles de texte
`vw` / `vh`	la largeur / hauteur de la fenêtre	sections plein écran

Les tailles de texte en rem respectent le réglage de taille de police du navigateur, que choisissent notamment les personnes malvoyantes. Une valeur nulle s'écrit sans unité : margin: 0.

1 exercice pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

Les couleurs de la charte facile lecon a valider