Un guide des couleurs CSS modernes —

Il y a plus à colorier sur le Web qu'il n'y paraît, et c'est sur le point de devenir beaucoup plus intéressant ! Aujourd'hui, nous allons examiner les meilleures façons d'utiliser les couleurs dans un système de conception et ce que nous pouvons attendre de nos couleurs dans un avenir pas si lointain.

Des valeurs de couleur bien connues

Il existe de nombreuses façons différentes de définir les couleurs en CSS. Les couleurs CSS nommées sont l'un des moyens les plus simples de colorer un élément :

.my-element {
  couleur de fond : rouge ;
}

Ceux-ci sont très limités et correspondent rarement aux conceptions que nous construisons ! Nous pourrions également utiliser des valeurs hexadécimales de couleur. Ce code donne à notre élément une couleur de fond rouge :

.my-element {
  couleur d'arrière-plan : #ff0000 ;
}

À moins que vous ne soyez un expert en couleurs, les valeurs hexadécimales sont très difficiles à lire. Il est peu probable que vous puissiez deviner la couleur d'un élément en lisant la valeur hexadécimale. Lors de la création d'un site Web, un concepteur peut nous donner une valeur de couleur hexadécimale, mais s'il nous demandait de le rendre, disons 20% plus sombre, nous aurions du mal à le faire en ajustant la valeur hexadécimale, sans guide visuel ni couleur sélecteur.

RVB

La notation RVB (rouge, vert, bleu) est une autre façon d'écrire les couleurs, nous donnant accès à la même gamme de couleurs que les valeurs hexadécimales, sous une forme beaucoup plus lisible. Nous avons une fonction rgb() en CSS pour cela. Les couleurs sur le Web sont additives, ce qui signifie que plus la proportion de rouge, vert et bleu est élevée, plus la couleur résultante sera claire. Si nous n'utilisons que le canal rouge, le résultat est rouge :

.my-element {
  couleur d'arrière-plan : rgb(255, 0, 0);
}

La définition des canaux rouge, vert et bleu sur la valeur la plus élevée produira du blanc :

.my-element {
  couleur d'arrière-plan : rgb(255, 255, 255);
}

Nous pouvons également ajouter un canal alpha (pour la transparence), en utilisant la fonction rgba() :

.my-element {
  couleur de fond : rgba (255, 0, 0, 0,5); // transparence de 50%
}

.mon-élément {
  couleur d'arrière-plan : rgba(255, 0, 0, 1); // entièrement opaque
}

rgb() et rgba() nous permettent de « mélanger » les couleurs dans notre code dans une certaine mesure, mais les résultats peuvent être quelque peu imprévisibles.

HSL[19659010]Plus récemment, nous avons pu utiliser les valeurs HSL (teinte, saturation, luminosité), avec les fonctions de couleur hsl() et hsla(). En tant que développeur, ceux-ci sont beaucoup plus intuitifs lorsqu'il s'agit d'ajuster les valeurs de couleur. Par exemple, nous pouvons obtenir des variantes plus sombres et plus claires de la même couleur en ajustant le paramètre lightness :

.my-element {
  couleur d'arrière-plan : hsl (0deg, 100 %, 20 %); // rouge foncé
}

.mon-élément {
  couleur d'arrière-plan : hsl (0deg, 100 %, 50 %); // rouge moyen
}

.mon-élément {
  couleur d'arrière-plan : hsl (0deg, 100 %, 80 %); // rouge clair
}

Le paramètre hue représente la position sur une roue chromatique et peut être n'importe quelle valeur comprise entre 0 et 360deg. La fonction accepte également les unités de tour (par exemple 0,5tour) et les valeurs sans unité.

Les éléments suivants sont tous valides :

.my-element {
  couleur d'arrière-plan : hsl (180 degrés, 50 %, 50 %);
}

.mon-élément {
  couleur de fond : hsl (0,5 tour, 50 %, 50 %);
}

.mon-élément {
  couleur de fond : hsl (180, 50 %, 50 %);
}

Conseil : Maintenez la touche SHIFT enfoncée et cliquez sur l'échantillon de couleur dans l'inspecteur des outils de développement Chrome et Firefox pour basculer la valeur de la couleur entre hexadécimal, RVB et HSL !

hsl() et hsla() se prêtent bien à la manipulation avec des propriétés personnalisées, comme nous le verrons bientôt.

currentColor

Le currentColor mérite d'être mentionné comme une autre façon de définir une couleur sur un élément qui existe depuis un certain temps. Cela nous permet effectivement d'utiliser la couleur actuelle du texte d'un élément comme variable. C'est assez limité par rapport aux propriétés personnalisées, mais il est souvent utilisé pour définir la couleur de remplissage des icônes SVG, afin de s'assurer qu'elles correspondent à la couleur du texte de leur parent. En savoir plus ici.

Modern Color Syntax

Le CSS Color Module Level 4 nous fournit une syntaxe plus pratique pour notre couleur fonctions, qui est largement pris en charge dans les navigateurs . Nous n'avons plus besoin que les valeurs soient séparées par des virgules, et les fonctions rgb() et hsl() peuvent prendre un paramètre alpha optionnel, séparé par une barre oblique :

 .mon-élément {
  /* la valeur alpha facultative nous donne une opacité de 50% */
  couleur de fond : hsl (0 100 % 50 % / 0,5);
}

.mon-élément {
  /* Sans valeur alpha, l'arrière-plan est entièrement opaque*/
  couleur d'arrière-plan : hsl (0 100 % 50 %);
}

Nouvelles fonctions de couleur CSS

HWB

HWB signifie teinte, blancheur et noirceur. Comme HSL, la teinte peut être n'importe où dans une plage de 0 à 360. Les deux autres arguments contrôlent la quantité de blanc ou de noir mélangée dans cette teinte, jusqu'à 100 % (ce qui donnerait une couleur totalement blanche ou totalement noire). Si des quantités égales de blanc et de noir sont mélangées, la couleur devient de plus en plus grise. Nous pouvons considérer cela comme étant similaire au mélange de peinture. Cela pourrait être particulièrement utile pour créer des palettes de couleurs monochromes

Essayez-le avec cette démo (fonctionne dans Safari uniquement) :

LAB

LAB et LCH sont définis dans spécification comme couleurs indépendantes du périphérique. LAB est un espace colorimétrique accessible dans un logiciel comme Photoshop et est recommandé si vous souhaitez qu'une couleur ait la même apparence à l'écran que, par exemple, imprimée sur un t-shirt. Il utilise trois axes : la luminosité, suivi de l'axe a (vert à rouge) et de l'axe b (bleu à jaune).

La luminosité est exprimée en pourcentage, un peu comme HSL, mais peut en fait dépasser 100% lorsqu'il est utilisé avec la fonction de couleur lab(). Les blancs extra-brillants peuvent utiliser un pourcentage allant jusqu'à 400%. Les valeurs des axes a et b peuvent aller du positif au négatif. Deux valeurs négatives donneront une couleur vers l'extrémité verte/bleue du spectre, tandis que deux valeurs positives peuvent donner une teinte plus orange/rouge.

.my-element {
  background-color : labo (80% 100 50) ; // rose rougeâtre
}

.mon-élément {
  couleur d'arrière-plan : labo (80% -80 -100); // bleu/turquoise
}

LCH

LCH signifie légèreté, chroma et teinte. Comme avec LAB, la légèreté peut être un pourcentage qui dépasse 100 %. Semblable à HSL, la teinte peut être comprise entre 0 et 360. La chrominance représente la quantité de couleur, et nous pouvons la considérer comme similaire à la saturation en HSL. Mais la chrominance peut dépasser 100 – en fait, elle est théoriquement illimitée. Exemple d'utilisation :

.my-element {
  couleur d'arrière-plan : lch (80% 100 50);
}

.mon-élément {
  couleur d'arrière-plan : lch (80% 240 50); // cette couleur serait en dehors de la plage affichable des navigateurs actuels
}

Cependant, il y a une limite sur le nombre de couleurs que les navigateurs et les moniteurs peuvent afficher aujourd'hui (plus à ce sujet sous peu), donc les valeurs supérieures à 230 sont peu susceptibles de faire une différence – la chrominance est réduite jusqu'à ce qu'elle soit dans la plage.

Pourquoi avons-nous besoin de LAB et LCH alors que nous avons HSL ? L'une des raisons est que l'utilisation de LAB ou LCH nous donne accès à une gamme de couleurs beaucoup plus large. LCH et LAB sont conçus pour nous donner accès à tout le spectre de la vision humaine. De plus, HSL et RGB ont quelques défauts : ils ne sont pas perceptuellement uniformes et, en HSL, augmenter ou diminuer la luminosité a un effet assez différent selon la teinte.

Dans cette démonous pouvons voyez un contraste frappant entre LCH et HSL en appuyant sur la bascule en niveaux de gris. Pour les bandes de teinte et de saturation HSL, il existe de nettes différences dans la luminosité perceptive de chaque carré, même si la composante « légèreté » de la fonction HSL est la même ! Pendant ce temps, les bandes de chrominance et de teinte du côté LCH ont une luminosité de perception presque uniforme.

Nous pouvons également voir une grande différence lors de l'utilisation de la couleur LCH pour les dégradés. Ces deux dégradés commencent et se terminent par la même couleur (avec les valeurs LCH converties en équivalents HSL à l'aide de ce convertisseur ). Mais le dégradé LCH passe par des nuances vibrantes de bleu et de violet au milieu, tandis que le dégradé HSL semble plus boueux et délavé en comparaison.

LAB et LCH, bien qu'étant peut-être syntaxiquement un peu moins intuitifs, se comportent d'une manière qui a plus de sens pour l'œil humain. Dans son article, La couleur LCH en CSS : quoi, pourquoi et comment ?Léa Verou explique en détail les avantages de la couleur LCH. Elle a également construit ce LCH color picker.

Comme avec d'autres fonctions de couleur, hwb()lab() et lch() peut également prendre un paramètre alpha facultatif.

.my-element {
  couleur d'arrière-plan : lch(80 % 240 50 / 0,5); // La couleur résultante a une opacité de 50%
}

Prise en charge du navigateur et espaces colorimétriques

hwb()lab() et lch() ne sont actuellement pris en charge que dans Safari. Il est possible de commencer à les utiliser immédiatement en fournissant une solution de repli pour les navigateurs non compatibles. Les navigateurs qui ne prennent pas en charge la fonction de couleur ignoreront simplement la deuxième règle :

.my-element {
  couleur de fond : lch (55% 102 360);

  /* Couleur LCH convertie en RVB à l'aide de l'outil de Lea Verou : https://css.land/lch/ */
  couleur d'arrière-plan : rgb (98,38 % 0 % 53,33 %);
}

Si d'autres styles dépendent de la prise en charge de nouvelles fonctions de couleur, nous pouvons utiliser une requête de fonctionnalité :

.my-element {
  affichage : aucun ;
}

/* N'affiche cet élément que si le navigateur supporte lch() */
@supports (couleur d'arrière-plan : lch (55% 102 360)) {
  .mon-élément {
    bloc de visualisation;
    couleur de fond : lch (55% 102 360);
  }
}

Il convient de noter, comme l'explique Lea dans son article, que bien que les écrans modernes soient capables d'afficher des couleurs au-delà du RVB, la plupart des navigateurs ne prennent actuellement en charge que les couleurs de l'espace colorimétrique sRVB. Dans la Démo de couleur LABvous remarquerez peut-être que déplacer les curseurs au-delà d'un certain point n'affecte pas réellement la couleur, même dans Safari où lab() et lch() sont pris en charge. L'utilisation de valeurs en dehors de la plage sRGB n'aura d'effet que si le matériel et les navigateurs avancent suffisamment.

Safari prend désormais en charge la fonction color()qui nous permet d'afficher les couleurs dans l'espace P3, mais celles-ci sont limités aux couleurs RVB pour le moment, et ne nous donnent pas encore tous les avantages de LAB et LCH.

.my-element {
  arrière-plan : rvb (98,38 % 0 % 53,33 %) ; // rose vif
  arrière-plan : couleur (affichage-p3 0,947 0 0,5295) ; // équivalent dans l'espace colorimétrique P3
}

Lecture recommandée : « Wide Gamut Color in CSS with Display-P3 » par Nikita Vasilyev

Accessibility

Une fois qu'ils sont largement pris en charge, peut-être LAB et LCH peut nous aider à choisir des combinaisons de couleurs plus accessibles. Le texte de premier plan doit avoir le même rapport de contraste avec des couleurs d'arrière-plan avec des valeurs de teinte ou de chrominance différentes, tant que leur valeur de luminosité reste la même. Ce n'est certainement pas le cas pour le moment avec les couleurs HSL.

Gestion des couleurs

Une gamme plus large de fonctions de couleur signifie que nous avons plus d'options en matière de gestion des couleurs dans notre application. Nous avons souvent besoin de plusieurs variantes d'une couleur donnée dans notre système de conception, allant du foncé au clair.

Propriétés personnalisées

Les propriétés personnalisées CSS nous permettent de stocker des valeurs à réutiliser dans nos feuilles de style. Comme ils autorisent des valeurs de propriété partielles, ils peuvent être particulièrement utiles pour gérer et manipuler les valeurs de couleur. HSL se prête particulièrement bien aux propriétés personnalisées, en raison de son intuitivité. Dans la démo précédente, je les utilise pour ajuster la teinte de chaque segment de la bande de couleur en calculant une valeur --hue en fonction de l'index de l'élément (défini dans une autre propriété personnalisée).

 li {
  --hue: calc(var(--i) * (360 / 10));
  arrière-plan : hsl(var(--hue, 0) 50 % 45 %);
}

Nous pouvons également faire des choses comme calculer des couleurs complémentaires (les couleurs des côtés opposés de la roue chromatique). Beaucoup de choses ont été écrites à ce sujet, donc je ne reviendrai pas sur le vieux terrain ici, mais si vous êtes curieux, l'article de Sara Soueidan sur la gestion des couleurs avec HSL est un excellent point de départ.

Migration à partir de. Hex/RVB à HSL

Les couleurs RVB peuvent répondre à vos besoins jusqu'à un certain point, mais si vous avez besoin de flexibilité pour pouvoir dériver de nouvelles nuances à partir de votre palette de couleurs de base, vous feriez peut-être mieux de passer à HSL (ou LCH, une fois pris en charge). Je recommanderais d'adopter des propriétés personnalisées pour cela.

Remarque : Il existe de nombreuses ressources en ligne pour convertir les valeurs hexadécimales ou RVB en HSL (voici un exemple).

Vous avez peut-être des couleurs stockées en tant que variables Sass :

$primary : rgb(141 66 245);

Lors de la conversion en HSL, nous pouvons attribuer des propriétés personnalisées pour les valeurs de teinte, de saturation et de luminosité. Cela permet de créer facilement des variantes plus ou moins saturées de la couleur d'origine, plus foncées ou plus claires.

:root {
  --h: 265;
  --s : 70 % ;
  --l : 50 % ;
        
  --primary: hsl(var(--h) var(--s) var(--l));
  --primaryDark: hsl(var(--h) var(--s) 35%);
  --primaryLight: hsl(var(--h) var(--s) 75%);
}

HSL peut être incroyablement utile pour créer des schémas de couleurs, comme détaillé dans l'article Créer un schéma de couleurs par Adam Argyle. Dans l'article, il crée des schémas de couleurs claires, sombres et sombres, en utilisant une couleur de marque comme base. J'aime cette approche car elle permet un contrôle précis de la variante de couleur (par exemple, en diminuant la saturation des couleurs dans le schéma « foncé »), mais conserve toujours le gros avantage des propriétés personnalisées : mettre à jour la couleur de la marque en seulement un seul endroit sera appliqué à tous les schémas de couleurs, ce qui pourrait potentiellement nous faire économiser beaucoup de travail à l'avenir. fonctions de couleur pour nous permettre de faire exactement cela pendant de nombreuses années. On peut saturer ou désaturer, éclaircir ou assombrir, voire mélanger deux couleurs ensemble. Ceux-ci fonctionnent très bien dans certains cas, mais ils ont quelques limitations : premièrement, nous ne pouvons les utiliser qu'au moment de la compilation, pas pour manipuler les couleurs en direct dans le navigateur. Deuxièmement, ils sont limités au RVB et au HSL, ils souffrent donc des mêmes problèmes d'uniformité perceptive, comme nous pouvons le voir dans cette démooù une couleur est de plus en plus désaturée mais apparaît de plus en plus claire lorsqu'elle est convertie en niveaux de gris.

Pour garantir que la luminosité reste uniforme, nous pourrions utiliser des propriétés personnalisées avec LCH de la même manière que HSL ci-dessus.

li {
  --hue: calc(var(--i) * (360 / 10));
  fond : lch (50% 45 var(--hue, 0));
}

Mélange et manipulation des couleurs

Mélange des couleurs

Une chose que CSS ne ne nous permet pas encore de faire est de mélanger les couleurs dans le navigateur. Tout est sur le point de changer : la Level 5 CSS Color Specification (ébauche de travail) contient des propositions de fonctions de mélange de couleurs qui semblent plutôt prometteuses. La première est la fonction color-mix()qui mélange deux couleurs un peu comme la fonction mix() de Sass. Mais color-mix() dans CSS nous permet de spécifier un espace colorimétrique et utilise le LCH par défaut, avec un mélange supérieur en conséquence. Les couleurs ne doivent pas nécessairement être LCH lorsqu'elles sont transmises en tant qu'arguments, mais l'interpolation utilisera l'espace colorimétrique spécifié. Nous pouvons spécifier la quantité de chaque couleur à mélanger, similaire aux arrêts de dégradé :

.my-element {
  /* quantités égales de rouge et de bleu */
  background-color : color-mix (en lch, rouge, bleu) ;
}

.mon-élément {
  /* 30% rouge, 70% bleu */
  background-color: color-mix (en lch, rouge 30%, bleu);
}

Color Contrast And Accessibility

color-contrast() est une autre fonction proposée, qui a vraiment d'énormes implications pour la sélection des couleurs accessibles. En fait, il est conçu dans un souci d'accessibilité avant tout. Il permet au navigateur de choisir la valeur la plus appropriée dans une liste, en la comparant avec une autre couleur. Nous pouvons même spécifier le rapport de contraste souhaité pour garantir que nos palettes de couleurs respectent les directives WCAG. Les couleurs sont évaluées de gauche à droite et le navigateur choisit la première couleur de la liste qui correspond au ratio souhaité. Si aucune couleur ne correspond au ratio, la couleur choisie sera celle avec le contraste le plus élevé.

.my-element {
  couleur : blé ;
  couleur de fond : contraste de couleur (blé vs bisque, tige d'or foncé, olive, sienne, vert foncé, marron à AA);
}

Étant donné que cela n'est actuellement pris en charge par aucun navigateur, j'ai emprunté cet exemple directement à la spécification. lorsque le navigateur évalue l'expression, la couleur résultante sera vert foncécar c'est la première qui répond au rapport de contraste AA par rapport à bléla couleur du texte.[19659105]Prise en charge des navigateurs

La spécification de couleur de niveau 5 est actuellement en version provisoire, ce qui signifie qu'aucun navigateur ne prend encore en charge les fonctions color-contrast() et color-mix() et leur syntaxe est sujet à changement. Mais cela ressemble certainement à un avenir radieux pour la couleur sur le Web !

Impact environnemental des couleurs

Saviez-vous que la palette de couleurs que vous avez choisie peut avoir un impact sur la quantité d'énergie utilisée par votre site Web ? Sur les écrans OLED (qui représentent la plupart des téléviseurs et ordinateurs portables modernes), les couleurs plus foncées utiliseront nettement moins d'énergie que les couleurs claires, le blanc utilisant le plus d'énergie et le noir le moins. Selon Tom Greenwood, auteur de Sustainable Web Designle bleu est également plus énergivore que les couleurs dans les zones rouges et vertes du spectre. Pour réduire l'impact environnemental de vos applications, envisagez un schéma de couleurs plus foncé, en utilisant moins de bleu, ou en activant une option de mode sombre pour vos utilisateurs. En prime, un choix de couleurs plus respectueux de l'environnement peut également réduire l'impact sur la durée de vie de la batterie des appareils mobiles.

• HexplorerRob DiMarzo
  Apprenez à comprendre les couleurs hexadécimales avec cette visualisation interactive.[19659111]Sélecteur de couleurs LCHLea Verou et Chris Lilley
  Obtenez les couleurs LCH et leurs homologues RVB.
• Sélecteur de couleurs HWB
  Visualisez les couleurs HWB et convertissez-les en HSL, RVB et hexadécimal.[19659115]Ally Color TokensStephanie Eckles
  Un générateur de jetons de couleur accessible.

Resources

• “A Nerd's Guide To Color On The Web,” Sarah Drasner, CSS-Tricks[19659119]« Les couleurs LCH en CSS : quoi, pourquoi et comment ? », Lea Verou
• « Les meilleures fonctions de couleur en CSS ? », Chris Coyier, CSS-Tricks
• « Créer un schéma de couleurs», Adam Argyle, Web.dev
• «Utiliser les couleurs HSL dans CSS», Ahmad Shaheed, Smashing Magazine
• « Sur le passage de l'hexadécimal et du RVB au HSL», Sara Soueidan
• «Amélioration des couleurs sur le Web», Dean Jackson, Webkit Blog

(vf, il)