🎯 Intention

On veut créer des applications qui soient jolies et modernes. Pour cela, on cherche à créer une palette de couleurs qui soit à la fois :

<aside> ✅ Pré-requis

Connaître la représentation HSL des couleurs (Teinte, Saturation, Lumière)
Connaître la déclinaison de nuances 50 à 900 initiée par Material Design </aside>

👉🏼 Points clés

Etape	Point clé	Raison
✨ Choisir sa couleur principale	Choisir une couleur qui représente l’identité qu’on veut donner à l’app	Elle détermine le look de l’application. C’est celle qui sera utilisée pour les actions principales
◻️ Choisir un gris	Il sera décliné sur les fonds et les textes neutres	Le gris provoque peu de fatigue visuelle et permet d’avoir un bon contraste avec les autres couleurs (pour l’accessibilité)
🎨 Choisir 4 à 6 couleurs “support”	Elles seront utilisées pour passer des messages qui ont une intention précise :
accent, confirmation, danger, critique, aide, décoration, …	Avoir des couleurs qui ont un sens
🔪 Décliner chaque couleur en 10 nuances	- Faire varier la luminosité du HSL

Utiliser la nomenclature 50 à 900
Cela n’est pas forcément besoin d’être automatisé, (une documentation sur comment faire) | Cette déclinaison est utilisée dans la plupart des frameworks CSS modernes, donc facile à utiliser pour les développeurs | | 📔 Rassembler la palette dans un document | | Ce livrable est à destination des développeurs pour qu’ils le reportent dans leur CSS |

Une bonne palette ⤵️

Exemple d’une bonne palette de couleur

La palette de Github ⤵️

Palette de couleur Github

Nuances de 50 à 900 ⤵️

Nuances de 50 à 900 pour une couleur provenant de Materialize

Choisir des couleurs “support” qui ne vont pas avec leur intention (exemple du marron pour un message de confirmation, du bleu pour un message d’alerte, …)
Utiliser le noir pur (#000) dans la palette, il provoque de la fatigue occulaire ⤵️

Shopify

Colors

Github

https://primer.style/design/foundations/color