Module 1Les bases du CSS
Chapitre 4 sur 15
Couleurs et unités
Écrire les couleurs, gérer la transparence et le contraste, choisir les bonnes unités.
- ≈ 150 min
- 6 leçons
- 3 vidéos
- 3 exercices
Module 1Les bases du CSS
Chapitre 4 sur 15
Écrire les couleurs, gérer la transparence et le contraste, choisir les bonnes unités.
Objectifs
Avec ce chapitre, tu sauras…
rgb() et hsl() ;opacity et canal alpha ;px) et relatives (%, em, rem, vw, vh) ;em qui se multiplie ;calc() et clamp().Couleurs et tailles sont présentes dans presque chaque règle CSS. Bien les choisir fait la différence entre un site rigide et illisible et un site cohérent, accessible et adaptable à tous les écrans.
Leçon 1
Tableau: Les formats de couleur
| Format | Exemple | Remarque |
|---|---|---|
| nom | red, navy, tomato, rebeccapurple | 148 noms prédéfinis, pratique pour tester |
| hexadécimal | #2f5bc4 | rouge-vert-bleu en base 16 (00 à ff), le plus utilisé |
| hexadécimal court | #fff = #ffffff | quand chaque paire est doublée |
| rgb() | rgb(47 91 196) ou rgb(47, 91, 196) | rouge, vert, bleu de 0 à 255 |
| hsl() | hsl(222 61% 48%) | teinte (0-360°), saturation, luminosité : le plus intuitif |
| avec transparence | #2f5bc480, rgb(47 91 196 / 50%) | 4e valeur = alpha (opacité) |
transparent | background: transparent | totalement transparent |
currentColor | border: 2px solid currentColor | reprend la valeur de color |
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 2
| Méthode | Ce qui devient transparent |
|---|---|
canal alpha : background-color: rgb(0 0 0 / 50%) | seulement la couleur concernée (le fond ici) |
opacity: 0.5 | tout l'élément : fond, texte, images et enfants compris |
Leçon 3
Leçon 4
| Unité | Usage |
|---|---|
px | bordures, ombres, petites tailles fixes |
cm, mm, in, pt | uniquement pour l'impression (@media print) |
Leçon 5
| Unité | Relative à… | Usage typique |
|---|---|---|
% | la taille du parent | largeurs : width: 50% |
em | la taille de police de l'élément lui-même (ou du parent pour font-size) | marges internes d'un bouton qui grandissent avec son texte |
rem | la taille de police de la racine (html), 16 px par défaut | tailles de police, espacements |
Leçon 6
| Fonction | Rôle | Exemple |
|---|---|---|
calc() | calcul qui mélange les unités | width: calc(100% - 2rem) |
min() | la plus petite des valeurs | width: min(90%, 1100px) |
max() | la plus grande des valeurs | font-size: max(1rem, 2vw) |
clamp(min, idéal, max) |
1#ffffff correspond à…
2Pour un fond semi-transparent sans rendre le texte transparent :
3Avec html { font-size: 16px; }, 2rem vaut…
4Quelle unité dépend de la largeur de la fenêtre ?
5Le ratio minimal du niveau AA pour un texte normal est…
6Laquelle de ces écritures est valide ?
L'essentiel du chapitre
#rrggbb, rgb(), hsl() ; alpha avec #rrggbbaa ou / 50%.opacity rend tout l'élément transparent ; un fond alpha seulement le fond.px pour les bordures, rem pour les polices et espacements, % pour les largeurs, vw/vh pour l'écran, ch pour la lecture.em se multiplie en cascade. calc(), min(), max(), clamp() pour des tailles fluides.vw| 1 % de la largeur de la fenêtre |
| titres géants, sections pleine largeur |
vh | 1 % de la hauteur de la fenêtre | section plein écran : min-height: 100vh |
ch | la largeur du caractère « 0 » | largeur de lecture : max-width: 65ch |
fr | une fraction de l'espace libre (Grid) | chapitre 10 |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
font-size: clamp(1.5rem, 4vw, 3rem) |
<div style="font-family:Inter,sans-serif;font-size:8pt">
<span style="display:inline-block;width:23%;background:#2f5bc4;color:#fff;padding:8px 4px;text-align:center;margin-right:1%">#2f5bc4</span><span style="display:inline-block;width:23%;background:rgb(47,91,196);color:#fff;padding:8px 4px;text-align:center;margin-right:1%">rgb(47 91 196)</span><span style="display:inline-block;width:23%;background:#2f5bc4;color:#fff;padding:8px 4px;text-align:center;margin-right:1%">hsl(222 61% 48%)</span><span style="display:inline-block;width:23%;background:rgba(47,91,196,0.5);color:#17306e;padding:8px 4px;text-align:center">alpha 50 %</span>
</div>#RRVVBB : deux chiffres pour le rouge, deux pour le vert, deux pour le bleu, de 00 (rien) à ff (255, le maximum). #ff0000 = rouge pur, #000000 = noir, #ffffff = blanc, #808080 = gris moyen. Quand les trois paires sont égales, c'est un gris.
Avec hsl(), tu fabriques une palette en ne changeant qu'un chiffre : hsl(222 61% 48%) est ton bleu, hsl(222 61% 30%) le même bleu plus foncé (pour le survol), hsl(222 61% 95%) le même bleu très clair (pour un fond). Impossible à faire de tête en hexadécimal.
Les couleurs en CSS, en moins de deux minutes : un rappel rapide des formats.
Le chapitre « Colors » de Dave Gray (anglais) : pour revoir les formats de couleurs avec d'autres exemples.
Tableau: Deux façons de rendre transparent
Pour un bandeau semi-transparent sur une photo, opacity: 0.6 rend aussi le texte du bandeau transparent et donc peu lisible. Utilise plutôt un fond avec alpha : background-color: rgb(0 0 0 / 60%) ; le texte reste parfaitement opaque.
Le contraste entre la couleur du texte et celle du fond se mesure par un ratio de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Le niveau AA du WCAG exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (24 px, ou 19 px en gras).
color : le ratio de contraste s'affiche, avec une coche si le niveau AA est atteint.Le gris clair « tendance » #aaaaaa sur fond blanc a un ratio d'environ 2,3:1 : il est refusé. #767676 est le gris le plus clair qui passe AA sur blanc.
Le pixel (px) est l'unité de référence à l'écran. Un pixel CSS n'est pas forcément un pixel physique : sur un écran haute densité (Retina), 1 px CSS correspond à 2 ou 3 pixels physiques.
Tableau: Les unités relatives à connaître
Choisis une couleur principale pour ton CV. Avec hsl(), crée cinq teintes (très claire, claire, principale, foncée, très foncée). Applique-les : fond du body, fond de l'en-tête, couleur des titres, couleur des liens, couleur des liens au survol. Vérifie que chaque texte atteint le ratio 4,5:1.
Convertis : (a) #ff8000 en rgb() ; (b) rgb(0 128 128) en hexadécimal ; (c) #333 en version longue ; (d) écris le bleu hsl(222 61% 48%) en version 30 % plus foncée et en version très claire pour un fond.
Avec html { font-size: 16px; }, .carte { font-size: 1.25rem; } et .carte p { font-size: 0.8em; padding: 1em; }, calcule en pixels : la taille du texte de .carte, la taille du texte des paragraphes de la carte, et leur padding.
html {
font-size: 100%; /* = 16px, la préférence de l'utilisateur */
}
h1 {
font-size: 2.5rem; /* 2.5 × 16 = 40px */
}
p {
font-size: 1rem; /* 16px */
max-width: 65ch; /* une ligne de lecture confortable */
}
.bouton {
font-size: 1.125rem; /* 18px */
padding: 0.5em 1em; /* 9px 18px : suit la taille du texte du bouton */
}
.hero {
min-height: 100vh; /* toute la hauteur de l'écran */
}em dépend de la taille du parent pour font-size. Avec li { font-size: 1.2em; } et des listes imbriquées sur trois niveaux, le texte du troisième niveau fait 1,2 × 1,2 × 1,2 = 1,728 fois la taille de départ. C'est l'effet boule de neige. Pour les tailles de police, préfère rem, qui dépend toujours de la racine.
Un utilisateur malvoyant peut augmenter la taille de police par défaut de son navigateur (Paramètres → Apparence → Taille de police). Avec des rem, ton site respecte ce réglage ; avec des px, il l'ignore. C'est une exigence d'accessibilité.
Le chapitre « Units & Sizes » de Dave Gray (anglais) : pour revoir les unités et les tailles avec d'autres exemples.
font-size: clamp(1.5rem, 4vw, 3rem) signifie : « la taille idéale est 4 % de la largeur de l'écran, mais jamais moins de 1,5 rem (sur un téléphone) et jamais plus de 3 rem (sur un grand écran) ». Un titre qui s'adapte à tous les écrans, en une seule ligne et sans media query.
calc(100%-2rem) est invalide. Les opérateurs + et - doivent être entourés d'espaces : calc(100% - 2rem).