La vue Couleur
Partez d’une seule couleur de marque et la vue Couleur en dérive tout le reste : une rampe OKLCH complète, une échelle de neutres teintée par la marque, les quatre couleurs fonctionnelles et les rôles sémantiques que votre CSS utilise réellement — avec des planchers de contraste WCAG appliqués au fil de votre travail.
La barre d’outils
- Étapes — combien de valeurs chaque rampe reçoit (la fameuse série 50–900 en compte dix). La luminosité de chaque étape suit une courbe façonnée par le ratio de l’échelle globale, si bien que la progression des couleurs et la progression typographique partagent un même squelette.
- Courbe de chroma — comment la saturation est répartie sur la rampe (la cloche garde les tons intermédiaires vifs et les extrémités calmes).
- Niveau WCAG — le plancher de contraste (AA ou AAA) que la dérivation sémantique doit respecter.
- Sombre — génère la variante sombre de chaque rampe comme sa propre dérivation, avec sa propre courbe de luminosité et une légère amplification du chroma — et non une inversion du thème clair.
- Avancé — divulgation progressive des réglages plus pointus (décalage de teinte par rampe, multiplicateur de chroma, plancher de luminosité, gamut P3). Un point sur le bouton signale qu’un réglage y dévie des valeurs par défaut.
Rampes et rôles
Chaque palette est une carte : la couleur de départ en haut, les étapes dérivées en dessous, avec les valeurs hex et les libellés d’étape. L’outil vous avertit lorsque deux étapes voisines se ressemblent trop pour être distinguées — un contrôle de différence juste perceptible (JND), pas un jugement esthétique.
Les palettes sont regroupées par rôle, et ce regroupement est une convention que l’outil impose plutôt qu’une simple suggestion :
- Marque — exactement une ; la couleur de départ à laquelle tout le reste répond.
- Secondaire — autant que vous voulez ; c’est ici que vit le « + ».
- Neutre — exactement une, teintée par la teinte de la marque pour que les gris appartiennent à la famille.
- Fonctionnelle — exactement quatre : danger, warning, success, info. Cet ensemble fixe est tout l’intérêt — ce sont ces noms que le code en aval attend.
Ancres de page et mode sombre
Les deux ancres définissent l’arrière-plan de la page en clair et en sombre. L’ancre sombre suit automatiquement l’étape de marque la plus foncée — « la nuit est teintée par la marque » — jusqu’à ce que vous rompiez délibérément le lien avec un choix personnalisé ; un bouton de reliaison le rétablit.
La barre latérale
Sélectionnez n’importe quel échantillon et la barre latérale l’inspecte : composantes OKLCH, hex, contraste par rapport aux deux ancres (ratio WCAG et Lc APCA côte à côte), et suggestions d’harmonie dérivées de la couleur de départ — une profonde, une teinte opposée, un acier, une nuance — chacune à un clic de devenir une palette secondaire.
La simulation de déficiences visuelles (protanopie, deutéranopie, tritanopie) rend l’ensemble du canevas à travers les matrices correspondantes — un contrôle, présenté sans jugement.
Théorie
La section d’apprentissage couvre ces idées en profondeur : OKLCH · échelles de couleur · contraste · mode sombre · systèmes de couleur de marque.