Présentation générale de la façon d'établir un jeu de couleurs dynamique et configurable
Dans ce post, je veux partager la réflexion sur les façons de gérer plusieurs jeux de couleurs en CSS. Tester la fonctionnalité
<ph type="x-smartling-placeholder">Si vous préférez la vidéo, voici une version YouTube de cet article:
Présentation
Nous allons créer un système de couleurs accessible avec des propriétés personnalisées et calc()
, pour
créer une page web qui s'adapte aux préférences de l'utilisateur tout en gardant la création
pour un confort d'utilisation minimal. Nous commençons avec une couleur de base de la marque et créons un système
ses variantes: deux couleurs de texte, quatre couleurs de surface et une ombre assortie.
Ce guide commence par définir toutes les couleurs de chaque jeu de couleurs à l'avant. Ce n'est qu'à la toute fin qu'ils ont l'habitude de changer de page.
La marque
Souvent, la couleur de la marque a déjà été établie et est livrée comme
hex ou
rgb. Ce défi IUG
est associé à la couleur de base de la marque #0af
. Tout d'abord, pour ce système de couleurs, la valeur hexadécimale
doit être convertie en
hsl
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
Pour permettre un concept d'assombrissement ou d'éclaircissement de la couleur de la marque, 20%, les 3 canaux de la valeur de couleur HSSl doivent être extraits dans leur propre comme suit:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
Le CSS peut effectuer des calculs sur ces propriétés de couleur, par exemple calc(var(--brand-lightness) -
20%)
pour réduire la valeur de luminosité de 20%. Il s'agit d'un élément essentiel
jeu de couleurs, car CSS peut conserver toutes les couleurs dans la même famille de teintes en ajustant la
les niveaux de saturation et de luminosité HSL.
Thème clair
Chaque variante de couleur sera marquée par son jeu d'association. Dans ce cas, chaque
est ajouté avec -light
.
Marque
Elle est recréée en commençant par la couleur de la marque en encapsulant --brand-hue
et --brand-saturation
.
et --brand-lightness
à l'intérieur des parenthèses de la fonction ()
hsl,
sans aucun calcul:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Couleurs du texte
Ensuite, l’essentiel d’un jeu de couleurs nécessite des couleurs de texte. Dans un thème clair, le texte doit être très sombre. Remarquez à quel point la luminosité des couleurs suivantes est faible, bien en dessous de 50%.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light
, car il est très sombre avec 10% de luminosité, maintient le gras à 100%
pour que la couleur de la marque transparaît dans le bleu marine foncé.
--text2-light
, la couleur n'est pas aussi foncée que la première couleur, ce qui est bien.
une couleur secondaire, et il est aussi
beaucoup moins saturé.
Couleurs de surface
Les couleurs de surface sont les arrière-plans, bordures et autres surfaces décoratives qui où le texte est posé ou à l’intérieur. Dans un thème clair, il s'agit des couleurs claires, par opposition aux couleurs du texte qui étaient sombres. Pour créer des couleurs claires avec HSL, nous utiliserons des valeurs de pourcentage plus élevées dans la troisième valeur de luminosité. Nous réduirons également la saturation, afin que les gris clair ne soient pas trop teintés.
* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}
4 couleurs de surface ont été créées car les couleurs décoratives ont tendance à nécessiter plus
pour les moments d'interaction comme :focus
ou :hover
, ou pour créer
de couches de papier. Dans ces scénarios, il est
bien de faire la transition
--surface2-light
au passage de la souris sur --surface3-light
. Un survol génère donc
Augmentation du contraste (de 99% de luminosité à 92% de luminosité, assombrissement de l'image)
Ombres
Les ombres d’un jeu de couleurs sont au-dessus et au-delà, mais ajoutent une nature réaliste à l'effet et de le faire ressortir des ombres noires irréalistes. À faire la couleur de l'ombre utilisera la propriété personnalisée de la teinte, être légèrement saturé de la teinte mais toujours très sombre. Il s'agit essentiellement de créer légèrement bleue.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light
n'est pas encapsulé dans une fonction HSL. En effet,
La valeur --shadow-strength
sera combinée pour créer un certain niveau d'opacité et répondre aux besoins de CSS
pièces afin d'effectuer des calculs. Passez à l'ombre
pour en savoir plus.
Des couleurs claires au même endroit
Inutile de chercher comment est fabriquée les couleurs de la lumière, au même endroit dans le CSS.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}
![capture d'écran montrant toutes les couleurs des lumières](https://web.dev/static/articles/building/a-color-scheme/image/screenshot-the-light-col-72f65fca6bd79.png?authuser=2&hl=fr)
Thème sombre
La plupart des marques ne commencent pas par un thème sombre, c'est une variante de leur thème principal, généralement plus clair. Les utilisateurs, en revanche, choisissent souvent un thème sombre dans des contextes différents, comme la nuit. Ces facteurs m'ont amené à garder deux à l'esprit avec les thèmes sombres:
- Ce thème est généralement utilisé dans l'obscurité, alors faites un test dans l'application sombre.
- Les couleurs doivent désaturer pour ne pas vibrer à l'écran en raison d'être surintense.
Marque
Le thème clair utilisait les trois valeurs de canaux de couleur du logo de la marque sans aucune altération, ce n'est pas le cas du thème sombre. La saturation est divisée par deux et la luminosité réduite. de 50%.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Couleurs du texte
Dans un thème sombre, les couleurs du texte doivent être claires. Les couleurs suivantes ont des de luminosité, ce qui les rapproche du blanc.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
Couleurs de surface
Dans un thème sombre, les couleurs de surface doivent être sombres. Les couleurs suivantes ont une luminosité et une saturation faibles, la première surface étant la plus sombre (10 %).
* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}
Ombres
Avec un thème sombre, les ombres peuvent être très difficiles à voir. C’est logique puisqu’il est difficile de
assombrir quelque chose qui est déjà assez sombre. C'est ici
--shadow-strength-dark
est très pratique, car il nous permet d'assombrir le
en modifiant une variable.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Vérifiez aussi la saturation de cette ombre. Pouvez-vous remarquer la couleur lorsque vous regardez l'interface ? Essayez de supprimer la saturation devtools, lequel préférez-vous ?
Des couleurs sombres au même endroit
* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
![capture d'écran des couleurs sombres](https://web.dev/static/articles/building/a-color-scheme/image/screenshot-the-dark-colo-2883f3f94a6ae.png?authuser=2&hl=fr)
Thème sombre
Ce jeu de couleurs sert à orchestrer la luminosité et la saturation. Il y la saturation doit être suffisante pour conserver une teinte visible, passent à peine les scores de contraste, destiné à être sombre et à faible contraste de toute façon.
Marque
* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}
Couleurs du texte
* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}
Couleurs de surface
* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}
Ombres
* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Réduire toutes les couleurs
* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
![capture d'écran des couleurs sombres](https://web.dev/static/articles/building/a-color-scheme/image/screenshot-the-dim-color-acb7bb759c10b.png?authuser=2&hl=fr)
Couleurs accessibles
Notez que la luminosité minimale dans le jeu de couleurs sombres est de 65% et que la la plus grande luminosité sur les surfaces sombres est de 25%. C'est 40% de la légèreté entre eux. Dans le thème clair, il y a 55% d'espace le thème clair. Conserver les différences de luminosité entre les couleurs du texte et de la surface à environ 40-50% peut aider à conserver des rapports de contraste des couleurs élevés, tout en étant levier subtil pour ajuster le score en cas de mauvais score.
Je l'appelle "Bump bump til ya passes", c'est-à-dire l'interaction qui consiste jusqu'à ce qu'un outil indique que je passe.
<ph type="x-smartling-placeholder">Chacun des thèmes créés dans ce défi réussit un score de contraste. La palette de couleurs sombres présente le contraste le plus faible, tout en respectant les conditions minimales requises. Pour aider les autres membres de l'équipe à utiliser de bons contrastes de couleurs, il est judicieux de créer un nom de classe qui associe une couleur de surface à une couleur de texte accessible.
.surface1 {
background-color: var(--surface1);
color: var(--text2);
}
.surface2 {
background-color: var(--surface2);
color: var(--text2);
}
.surface3 {
background-color: var(--surface3);
color: var(--text1);
}
.surface4 {
background-color: var(--surface4);
color: var(--text1);
}
![Capture d'écran de l'association de surface sombre et de texte](https://web.dev/static/articles/building/a-color-scheme/image/screenshot-the-dim-surfa-930653f4c9223.png?authuser=2&hl=fr)
Ombre intense
Les thèmes utilisent une classe utilitaire appelée .rad-shadow
. Cette ombre a été générée
avec l'outil Smooth Shadow.
beaucoup. J'ai pris l'extrait généré et je l'ai
personnalisé avec mes propres couleurs et,
des calculs d'opacité. Cela était dû à la création d'une ombre que je pouvais ajuster
dans chaque jeu de couleurs.
Pour ce faire, j'ai créé deux variables pour chaque jeu de couleurs à ajuster : une la couleur et l'intensité de l'ombre. La couleur est destinée à la saturation et à l'obscurité d'ajustement, tandis que l'intensité sert à faire remonter facilement les ombres. d’intensité lorsqu’il s’agit d’un jeu de couleurs sombres. Le résultat final était quelque chose comme ça.
:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}
Si j'allais plus loin avec les ombres dans mon jeu de couleurs, je ferais de l'ombre une constante du jeton de conception, car la direction de la lumière doit être la même entre toutes les ombres de la conception.
Utilisation des jeux de couleurs
Une fois les couleurs prédéfinies, il est temps de les transformer en propriétés indépendantes du schéma. En tant que CSS, auteur dans ce projet de jeu de couleurs, on devrait rarement avoir besoin d'accéder valeur du schéma de couleurs spécifique. Je veux qu'il soit facile de rester dans le thème.
Pour ce faire, l'utilisation du jeu de couleurs doit être effectuée exclusivement via
les propriétés personnalisées génériques, que nous définirons dans un instant. De cette façon,
les personnes qui utilisent les variables de conception
n'ont jamais à se soucier de quel jeu de couleurs
il suffit d'utiliser les couleurs de la surface et du texte. Au lieu de
color: var(--text1-light)
utilisent color: var(--text1)
. Adaptation et pivotement
de couleurs est défini à un niveau
beaucoup plus élevé dans le CSS.
Examinons à présent les styles de connexion du thème clair dans le bloc de code suivant :
associer une propriété personnalisée générique à la couleur spécifique du thème clair. Tout à présent
les utilisations de var(--brand)
utiliseront la couleur claire de la marque.
Thème clair (automatique)
:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Le site utilise désormais le thème clair. Vous allez adorer ce moment ! Arrêtons-nous un peu sur ces moments, car nous utilisons nos couleurs prédéfinies dans d'autres contextes du jeu de couleurs.
Thème sombre (automatique)
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}
Thème clair
[color-scheme="light"] {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Thème sombre
[color-scheme="dark"] {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
Thème sombre
[color-scheme="dim"] {
color-scheme: dark;
--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}
À ce stade, les auteurs sont libres d'utiliser les jeux de couleurs génériques fournis comme et que vous ne devriez plus avoir à vous soucier des thèmes.
Conclusion
Maintenant que tu sais comment j'ai fait, comment faire ?! 🙂
Diversifiez nos approches et découvrons toutes les manières de créer des applications sur le Web. Créez un Codepen ou hébergez votre propre démo, envoyez-moi un tweet pour que je l'ajoute au section "Remix de la communauté" ci-dessous.
Source
Remix de la communauté
- @chris-kruining a ajouté un curseur de teinte.
Couleurs d'état et modes de contraste pour no-preference
, more
et less
:
demo.