Créer un jeu de couleurs

Présentation générale de la façon d'établir un jeu de couleurs dynamique et configurable

Adam Argyle

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é

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;
}

</ph>

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:

1. Ce thème est généralement utilisé dans l'obscurité, alors faites un test dans l'application sombre.
2. 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;
}

</ph>

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;
}

</ph>

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.

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);
}

</ph>

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

• Source des défis de l'IUG sur GitHub
• Déclencheur de Codepen, jeu de couleurs

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.