sseeeedd

sseeeedd est à la fois un socle de travail pour l’intégration statique — qui peut servir d’environnement de travail — et un espace d’expérimentations.

Palette de couleurs

La palette est entièrement gérée à l’aide d’une technique partagée par Sara Soueidan — basée sur les fonctions var(), calc() et hsl(). Cependant, j’utilise ici une palette de couleurs anologues.

La couleur centrale pour cette démonstration est la couleur tonique, dont je voulais qu’elle corresponde à la couleur rebeccapurple. Je vous invite à lire le billet d’Eric Meyer sur l’origine de rebeccapurple, vous devriez comprendre. En revanche les couleurs « systèmes » pour évoquer les alertes et succès dans l’interface sont complémentaires.

La mise en forme de cette palette est basée sur une astuce de Taylor Hunt.

Implémentation technique

La totalité de la palette est déduite de quelques valeurs d’origines :

1. la teinte --hue de la couleur secondaire, à laquelle nous ajoutons 30° pour obtenir la couleur analogue — ici, la tonique rebeccapurple évoquée plus haut ;
2. la teinte --right définissant la couleur système du succès, dont nous déduisons la complémentaire pour les alertes en ajoutant 180°, c’est à dire en lui faisant effectuer un demi-tour chromatique ;
3. pour la luminosité, nous avons besoin de trois valeurs :
   1. une base --lightness, fixée à 40% — toujours basée sur rebeccapurple ;
   2. un coefficient --light-scale — fixé à 1.61803398875, le nombre d’or — pour placer les déclinaisons sur une échelle cohérente ;
   3. puis les déclinaisons claire et sombre, que nous déduisons grâce au coefficient — respectivement --brighter et --darker.

Le tout se corse légèrement avec trois mécanismes supplémentaires :

• l’accentuation des contrastes sur petits écrans, en redéfinissant la luminosité de base --lightness et le coefficient --light-scale dans une media query ;
• un mécanisme de bascule de la couleur de contraste basé sur la luminosité, expliqué par Facundo Corradini sur CSS Tricks et implémenté par Una Kravets dans un CodePen. Ce mécanisme n’est pas parfait puisqu’il ne repose pas sur la luminosité perçue, mais s’avère suffisamment fiable dans la plupart des cas.
• un thème sombre, avec des valeurs ajustées : teinte, luminosité, seuil pour les contrastes…
• un thème ajusté pour le mode de contrastes élevés, basé sur la media query prefers-contrast: more et affectant des mots-clés des couleurs systèmes à toutes nos propriétés personnalisées.