Guides sur la couleur
Des guides courts et pratiques sur la couleur à l’écran : formats, contraste, palettes, mode sombre et CSS. Chaque chiffre est calculé, chaque exemple peut être copié.
- OKLCH expliqué : le format de couleur enfin fidèle à votre œilOKLCH décrit une couleur par sa clarté perçue, son intensité et sa teinte. Contrairement à HSL, une même valeur de luminosité paraît vraiment aussi claire pour toutes les teintes, ce qui rend prévisibles les palettes, les états de survol et le contraste accessible.28 septembre 2026Lecture : 4 min
- APCA ou WCAG 2 : à quel calcul de contraste se fierLe ratio de contraste WCAG 2 est ce qu’exige la loi. APCA est un modèle plus récent qui prédit bien mieux la lisibilité, surtout pour les thèmes sombres et les couleurs saturées. Vérifier les deux vous donne un texte conforme et réellement facile à lire.28 septembre 2026Lecture : 3 min
- Le gamut expliqué : sRGB, Display P3 et couleurs hors gamutLe gamut est l’ensemble des couleurs qu’un écran ou un espace colorimétrique peut afficher. Le web s’est construit sur sRGB, mais la plupart des téléphones et beaucoup d’ordinateurs portables affichent désormais Display P3, aux rouges, verts et oranges nettement plus vifs.28 septembre 2026Lecture : 2 min
- Les formats de couleur expliqués : HEX, RGB, HSL, OKLCH et les autresUne même couleur peut s’écrire d’une douzaine de façons. Voici ce que signifie chaque format, quand l’utiliser et à quoi ressemble la même couleur dans chacun d’eux.28 septembre 2026Lecture : 2 min
- Les codes couleur hexadécimaux expliqués : comment fonctionne #RRGGBBUn code couleur hexadécimal comme #1e90ff se compose de trois paires de chiffres hexadécimaux : la quantité de lumière rouge, verte et bleue, chacune de 00 (aucune) à ff (maximum, 255). Ajoutez une quatrième paire pour régler l’opacité : 80 correspond à environ 50 %, ff à une couleur totalement opaque.28 septembre 2026Lecture : 7 min
- Comment choisir une palette de couleurs pour un site web ou une applicationPartez d’une seule couleur de marque, générez-en une échelle de 50 à 950, ajoutez des gris légèrement teintés et quatre couleurs sémantiques, puis testez le contraste et la lisibilité pour les daltoniens de chaque paire texte-fond. Choisissez les paliers d’après leur luminosité OKLCH, pas à l’œil : sur fond blanc, un texte passe le niveau WCAG AA dès que sa luminosité descend vers 0,55, quelle que soit la teinte.28 septembre 2026Lecture : 7 min
- Couleurs du mode sombre : choisir les fonds, le texte et les accentsUtilisez un fond gris foncé comme #121212 plutôt que le noir pur, un texte blanc cassé comme #e5e5e5 plutôt que le blanc pur, et des versions plus claires et moins saturées de vos couleurs de marque. Vérifiez le texte avec APCA en plus de WCAG 2, car WCAG 2 surestime le contraste sur fond sombre.28 septembre 2026Lecture : 7 min
- Harmonies de couleurs : complémentaires, analogues, triadiques et plusUne harmonie de couleurs choisit des teintes à des angles fixes sur un cercle chromatique : 180° d’écart pour les complémentaires, 30° pour les analogues, 120° pour une triade. Faites tourner la teinte en OKLCH plutôt qu’en HSL : les couleurs gardent la même luminosité, et aucune teinte ne ressort par accident.28 septembre 2026Lecture : 6 min
- CSS color-mix() et couleurs relatives : nuances, survol et transparencecolor-mix() mélange deux couleurs dans l’espace colorimétrique de votre choix, et la syntaxe de couleur relative permet de modifier un seul canal d’une couleur existante, par exemple oklch(from var(--brand) calc(l - 0.1) c h). Les deux s’exécutent dans le navigateur, fonctionnent avec les variables CSS et remplacent la plupart des fonctions de couleur de Sass. Mélangez en oklab pour les nuances et le survol, en srgb pour la transparence.28 septembre 2026Lecture : 7 min
- Palette adaptée aux daltoniens : tester et corriger vos couleursUne palette adaptée aux daltoniens garde chaque paire de couleurs distincte en protanopie, deutéranopie, tritanopie et en niveaux de gris. La solution la plus fiable n’est pas une teinte particulière mais un écart de luminosité : des couleurs séparées d’environ 0,2 en luminosité OKLCH sont restées distinctes dans toutes nos simulations. Ajoutez-y des icônes ou des libellés, car la couleur seule laisse toujours quelqu’un de côté.28 septembre 2026Lecture : 7 min
- Couleurs Tailwind CSS : la palette OKLCH de la v4, couleurs personnalisées et nuancesTailwind CSS v4 fournit 26 échelles de couleurs de 11 nuances chacune, de 50 à 950, soit 286 couleurs définies en OKLCH sous forme de variables CSS comme --color-blue-500. Vous ajoutez les vôtres avec @theme { --color-brand-500: oklch(...) }. Un même numéro de palier ne signifie pas une même luminosité : blue-600 est le bleu le plus clair qui atteint 4,5:1 sur blanc, alors que le jaune demande le palier 700.28 septembre 2026Lecture : 7 min