Gestion des palettes de couleurs, que livrer aux équipes Front-end ?

Romain DAO
Jul 19 · 3 min read

Le constat

Entre les équipes Front et Design, il existe un monde parfois peuplé d’incompréhensions, de doutes et de terreur …

Dev front inspectant le document d’un designer

Pourquoi ? Car certains designers démarrent parfois un projet sans préparer en amont leurs couleurs, styles typographiques, icons etc et se jettent sur leur logiciel de création préféré usant de la pipette afin de reproduire leurs couleurs

Malheureusement cet outil n’est pas infaillible, et il arrive parfois qu’un designer crée sans le vouloir des variations infimes d’une même teinte et qui sera donc reconnu comme une autre couleur par les solutions de Hand-Off telles que Invision, Zeplin, Avocode …

On ne le dira jamais assez aux juniors prenez si nécessaire une demie-journée pour préparer vos fichiers créer une bibliothèque même très basique au début vous évitera bien des déconvenues une fois que vous multiplierez le nombre d’écrans !

Export des couleurs sur Invision qui prend aussi en compte les photos comprises dans le design …

Le duo gagnant ? HSL + SASS

Les spécifications CSS3 permettent désormais aux développeurs front d’utiliser la valeur HSL pour la représentation des couleurs.

C’est également une des bonnes pratiques à mettre en place lorsque l’on est designer le HSL permet de créer facilement des variations d’une même teintes. Les 3 principaux logiciels de prototypage, Sketch, Figma et XD proposent tous la gestion de couleurs en HSL (HSB pour XD) alors comment faire pour simplifier la vie de vos développeurs front avec le HSL ?

Si aujourd’hui le HSL gagne du terrain c’est qu’il équivaut pour un front-end developer aux fonctions SASS “Lighten” et “darken”.

Partant de ce constat, il est très simple de construire une palette cohérente construite sur le HSL

Palette de déclinaisons de teintes

Chaque case représente si l’on va vers le haut la couleur de base à laquelle est appliqué vers le haut la fonction lighten et vers le bas la fonction darken.

Lorsqu’il créera son composant CTA le développeur saura aisément quelle couleur appliquer à votre bouton en état “hover” et en état “pressed”.

Ce document revient à dire pour toutes les couleurs listées au niveau 0, si cette couleur est amenée à varier sur un hover merci d’appliquer la variation de couleur correspondant au lighten 300.

Exemple d’application de la fonction SAAS lighten

La meilleure solution de Hand-Off pour gérer ce genre de cas est Avocode qui vous permet de spécifier de valeurs SASS pour vos couleurs crées en hexadecimal comme l’exemple ci-dessous

Avocode vous permet aussi d’exporter rapidement une palette qu’un développeur pourra ainsi intégrer à son fichier de configuration.

NB: SASS étant langage “pré-processé” vous pouvez donc partir d’un code hexadecimal appliqué à une variable de couleur pour ensuite lui appliquer les fonction lighten et darken

Merci de m’avoir lu jusque ici j’espère que vous cet article vous sera utile si vous avez des questions, n’hésitez pas à les poster en commentaires !

Pour travailler avec nous, retrouvez nous sur www.cacatoesdesignstudio.com !

Romain DAO

Written by

Founder | 🎨 Senior Product Designer at Cacatoès Design Studio. Paris, France

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade