Les 8 choses que vous devez savoir sur les couleurs CSS
CSS vous permet de styliser vos pages Web de différentes manières, en contrôlant la disposition des éléments, en modifiant leur commande et même en les animant. Mais certains des ajustements visuels les plus fondamentaux à portée de main concernent la couleur. Voici les choses les plus importantes que vous devez savoir sur ce sujet étonnamment approfondi.
Sommaire
1
Les propriétés de couleur centrale
Commençons quelque part simple: couleur. Probablement la propriété la plus fondamentale liée aux couleurs, c'est l'un des ajustements les plus faciles que vous puissiez apporter à votre conception Web. La propriété de couleur définit la couleur de premier plan, qui est utilisée pour dessiner du texte et d'autres décorations pertinentes, comme la soulignement des liens.
La couleur par défaut est Canvastext, une couleur définie par le système que votre navigateur doit lire et utiliser. Ceci est généralement noir, pour contraster avec la couleur de toile par défaut du blanc, mais notez que le mode foncé inversera généralement ces valeurs.
Parallèlement à la couleur, il existe des propriétés très similaires qui affectent les choses au-delà du texte simple. Le couleur d'arrière-plan La propriété remplit un élément de sa couleur donnée avant de peindre du texte et d'autres décorations sur le dessus. Le couleur frontière La propriété contrôle la couleur de toute bordure dessinée autour d'un élément.
Enfin, couleur accent est une propriété plus moderne qui définit la couleur des parties de certains contrôles d'entrée. Par exemple, il peut contrôler la couleur de la case sur laquelle une cocher (entrée type = « Checkbox ») se trouve. La valeur par défaut de cette propriété peut dériver d'une préférence de niveau OS, comme la couleur de votre thème.
2
Couleurs nommées
Avec les propriétés les plus pertinentes à l'écart, il est temps de regarder leurs valeurs possibles, qui représentent toutes la couleur d'une manière ou d'une autre. Le plus simple, qui était basé sur la palette Windows VGA 16 couleurs, utilise des noms comme «rouge», «noir» et «aqua».
Vous devez être conscient des petites incohérences dans la dénomination. Par exemple, alors que «rouge» et «bleu» représentent tous les deux l'étendue complète de leur composante de couleur correspondante, avec une absence complète des composants restants, «vert» est un peu différent, ne représentant qu'environ «demi-vert». Le vert «complet» que vous recherchez pourrait s'appeler «citron vert», et il est beaucoup plus brillant que vous ne vous y attendez probablement.
Le CSS moderne soutient désormais une gamme beaucoup plus importante de couleurs nommées, avec plus de 150 réponses. Il s'agit notamment des couleurs d'origine 16, plus comme «Orange», «Cornflowerblue» et «Rebeccapurple».
Naturellement, avec un si grand ensemble, certains des noms deviennent un peu obscurs et peuvent être difficiles à retenir. Ils peuvent même être carrément déroutants. Par exemple, trois des couleurs disponibles sont gris, darkgray et lightgray. Mais, alors que Lightgray est en effet le plus léger des trois, Darkgray et Gray sont l'opposé de ce que vous pourriez vous attendre, le premier en fait plus léger que le second.
Même si vous recherchez des noms de couleurs avant de les utiliser, il est facile d'oublier ce qu'ils signifient à une date ultérieure. Certains IDE peuvent aider en affichant des aperçus de couleurs en ligne dans vos fichiers CSS, mais en général, il est préférable d'utiliser des couleurs nommées pour les tests et le prototypage simple. Pour les conceptions de production, il existe de meilleures options.
3
Valeurs de couleurs hexadécimales
Sous le capot, toutes les valeurs de couleur discutées jusqu'à présent ont des équivalents dans l'espace colorimétrique SRGB que vous pouvez représenter en utilisant des nombres hexadécimaux. Ceux-ci identifient les couleurs en RVB 24 bits, donc chaque composant (rouge, vert, bleu) a une valeur 8 bits qui peut représenter 0-255. Par exemple, «jaune» équivaut à # FFFF00, qui est une valeur de 255 pour le rouge et le vert, avec une valeur de 0 pour le bleu.
Il existe plusieurs façons différentes d'écrire des valeurs hexadécimales. Le premier est un raccourci qui tire parti des nombres hexadécimaux répétés. Si les trois paires sont toutes des valeurs répétées, vous pouvez raccourcir la valeur globale à 3 nombres. Par exemple, # FF66AA peut être raccourci en # F6A.
Une autre alternative consiste à fournir un quatrième composant qui représente la transparence alpha. Cette valeur se déroule également de 0 à 255, donc # FF000080 est rouge à 50% d'opacité.
Enfin, vous pouvez combiner le sténographie et les syntaxes alpha pour une quatrième variation. Donc #fffe est un blanc presque complet.
Les lettres AF utilisées pour représenter les couleurs en hexadécimal sont insensibles à la casse. Cela signifie que vous pouvez utiliser #bbb ou #bbb en tant qu'équivalents; Le choix est entièrement votre préférence personnelle.
4
La notation RVB ()
La section précédente couvrait les représentations hexadécimales des canaux de couleur de 0 à 255. Si vous préférez travailler en décimal plutôt qu'à l'hexadécimal, il y a une notation qui ressemble un peu à une fonction qui fera l'affaire:
color: rgb(255 0 0)
Cette valeur est équivalente à # F00. C'est un peu plus longtemps, mais vous pouvez le trouver plus facile à lire. Vous pouvez également utiliser des séparateurs de virgules entre chaque nombre pour la lisibilité:
color: rgb(255, 0, 0)
Et, comme avec la notation hexadécimale, vous pouvez fournir un quatrième composant, la transparence alpha:
color: rgb(127 127 127 / 0.5)
Notez que cette fois-ci, la transparence passe de 0 à 1, de sorte que 0,5 représente 50% de transparence (80 en hex). Vous pouvez également utiliser un pourcentage pour chacun des trois premiers composants:
color: rgb(50% 50% 50%)
5
hsl () et hwb ()
Jusqu'à présent, les valeurs de couleur que nous avons couvertes ont toutes utilisé le modèle de couleur RVB, en notation hexadécimale ou décimale. Cependant, il existe d'autres modèles de couleurs disponibles, comme HSL et HWB.
Le modèle HSL représente la teinte, la saturation et la légèreté. Dans ce modèle, la teinte est un peu comme une couleur de base (rouge, orange, etc.) tandis que la saturation se rapproche de l'intensité de cette couleur, et la légèreté décrit à quel point cette couleur apparaît vif ou sombre. Vous pouvez utiliser HSL un peu comme RVB:
color: hsl(90 25 75)
La différence ici est dans les unités. La teinte est mesurée en degrés, tandis que la saturation et la légèreté sont des pourcentages. Vous n'utiliserez probablement cette notation (et la suivante) que si vous êtes un concepteur professionnel, habitué à travailler avec différentes notations. La notation RVB est un peu plus intuitive que HSL, pour la plupart d'entre nous.
Pendant ce temps, HWB – Hue, Whiteness et Blackness – est un concept très similaire; Il représente la teinte de base à côté de la quantité de blanc et de noir dans la couleur finale. D'une manière générale, à mesure que les valeurs blanches et noires augmentent, la couleur devient plus grise et muette. Encore une fois, vous ne bénéficierez vraiment de l'utilisation de cette notation dans CSS si vous l'utilisez déjà: dans un programme graphique distinct ou via une équipe de conception, par exemple.
color: hwb(50deg 30% 40%);
Contrairement aux notations RVB et HSL, HWB ne prend pas en charge la syntaxe héritée qui utilise des séparateurs de virgules.
6
Couleurs du système et autres types de couleurs symboliques
Jusqu'à présent, nous avons vu des valeurs de couleur fixes: ils identifient un point de couleur spécifique à reproduire. Mais il y a des moments où vous voudrez peut-être vous référer à une couleur variable qui a un sens au-delà de sa valeur spécifique sur le spectre. Ces couleurs symboliques peuvent changer avec le temps ou dans des environnements différents, vous les utilisez donc pour leur signification plutôt que pour leur couleur particulière.
Par exemple, prenez la couleur que votre ordinateur utilise comme arrière-plan pour mettre en évidence le texte sélectionné. Dans CSS, vous pouvez vous référer à cette couleur simplement comme «surbrillance», vous pouvez donc l'utiliser dans vos propres styles comme ceci:
.selected {
background-color: highlight;
}
Ceci est utile si vous souhaitez imiter l'apparence du texte sélectionné pour d'autres types de contenu ou pour démontrer à quoi pourrait ressembler le texte sélectionné. L'utilisation de la couleur du système garantit que le lecteur obtient une expérience cohérente, en aidant la convivialité et en réduisant la confusion.
Fait intéressant, MacOS s'adresse à la sélection de texte sur cette couleur d'arrière-plan et ajuste subtilement la couleur pour s'assurer qu'elle fournit toujours le contraste:
Vous ne devriez pas compter sur ce comportement, cependant, alors méfiez-vous que l'utilisation des couleurs du système peut être confuse dans certains contextes.
Un autre exemple de couleur symbolique est le CurrentColor. Cette valeur fait référence à la valeur de la propriété de couleur d'un élément, vous pouvez donc l'utiliser pour correspondre à d'autres propriétés, comme la bordure de la bordure:
div {
border-width: 4px;
border-style: solid;
border-color: currentcolor;
}div.one { color: red; }
div.two { color: green; }
div.three { color: blue; }
7
La propriété du filtre et les fonctions de filtre
Les fonctions CSS deviennent de plus en plus puissantes, avec beaucoup qui prennent en charge la manipulation des couleurs d'un type ou d'une autre. En utilisant les fonctions de filtre, vous pouvez appliquer des algorithmes sophistiqués aux couleurs d'une image:
img.example {
filter: grayscale(50%);
}
Le CSS ci-dessus convertit l'image à mi-chemin en niveaux de gris. Vous pouvez comprendre l'effet du pourcentage en examinant quelques exemples:
D'autres fonctions de filtre sont disponibles et vous pouvez radicalement modifier les couleurs d'une image avec eux:
-
Le luminosité() La fonction rend l'image plus lumineuse (valeurs supérieures à 1 ou 100%) ou plus sombre (valeurs entre 0 et 1 ou 100%).
-
Le sépia() La fonction applique un filtre jaune / brun, donnant l'apparence d'une photographie ancienne. Son effet varie de zéro à 1 ou 100% pour le sépia complet.
-
Le inverser() La fonction inverse les couleurs de l'image, donnant un effet négatif. Encore une fois, son effet varie de 0 à 1 ou 100%.
8
Autres fonctions CSS
Les fonctions CSS peuvent être très puissantes et leur portée augmente à mesure que la langue se développe. Les effets qui étaient utilisés uniquement avec les images peuvent désormais être produits directement dans le navigateur, et facilement modifiés, même dynamiquement. Une classe entière de fonctions intéressantes vous permet d'utiliser des gradients de couleur, qui fusionnent lentement d'une couleur à une autre.
Les fonctions de gradient diffèrent dans leur forme: linéaire, radial ou conique.
Une autre fonction intéressante est Light-Dark (). Cela prend deux paramètres de couleur et utilise le premier si le schéma de couleurs actuel est clair, le second s'il est sombre. Voici comment vous l'utilisez:
:root {
color-scheme: light dark;
}body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
Avec ce CSS, la page résultante utilisera un schéma de couleurs approprié pour correspondre à la lumière ou à l'obscurité, selon les deux utilisations:
Notez que le CSS ici définit la couleur du corps, de sorte que la couleur de liaison n'est pas affectée; Le navigateur définit les couleurs bleues / violettes pour les liens par défaut. N'oubliez pas de remplacer les couleurs dans ces situations si vous voulez qu'elles diffèrent en modes claire / sombre.
