Palettes de marque basées sur OKLCH. Choisissez une base, obtenez toutes les harmonies classiques plus une échelle tonale 50–950. Verrouillez, relancez, exportez en CSS / Tailwind v4 / SCSS / JSON.
Palettes de marque basées sur OKLCH. Choisissez une base, obtenez toutes les harmonies classiques plus une échelle tonale 50–950. Verrouillez, relancez, exportez en CSS / Tailwind v4 / SCSS / JSON.
Notre Color Picker & Converter sert à manipuler une couleur à la fois — choisir / convertir / copier. Cet outil-ci est conçu pour les palettes : insérez une couleur de base, obtenez tout un système prêt pour la marque (harmonies + échelle tonale) d'un seul coup. C'est la différence entre acheter une seule chemise et obtenir une garde-robe complète.
HSL espace les teintes de manière inégale (le jaune à 60° paraît bien plus lumineux que le bleu à 240°, même à valeur de luminosité identique). Une palette triadique en HSL aura toujours un échantillon visiblement plus clair ou plus terne que les autres. OKLCH est perceptuellement uniforme — trois échantillons à la même luminosité OKLCH paraissent avoir la même luminosité. C'est pourquoi tous les design systems modernes (Apple HI, Tailwind v4, IBM Carbon) passent à OKLCH pour les harmonies et les échelles.
Vos couleurs de marque ne quittent jamais votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant n'importe quelle opération.
Astuce : appuyez sur Espace pour relancer les échantillons non verrouillés.
Harmonies OKLCH, échelles tonales, verrouillage et relance, exports en design tokens — et quelques petites touches qui rendent l'outil vraiment plaisant à utiliser.
Complémentaire, analogue, triadique, tétradique, complémentaire divisée, monochromatique — toutes calculées en OKLCH pour qu'une palette triadique de trois couleurs vives saturées reste uniformément lumineuse. Pas de boue HSL.
Insérez votre couleur de marque, obtenez une échelle tonale au format Tailwind 50, 100, 200, … 900, 950 générée en parcourant la luminosité sur une courbe OKLCH. La chroma se compresse aux extrêmes pour que les couleurs restent dans le gamut sRGB.
Épinglez n'importe quel échantillon (icône cadenas) et appuyez sur Relancer (ou simplement Espace) pour faire varier le reste dans l'harmonie choisie. Itérez vite, gardez ce que vous aimez.
Propriétés personnalisées CSS (--brand-500), bloc @theme Tailwind v4, map SCSS et tokens de design JSON prêts pour Style Dictionary / Figma Tokens. Plus une bande d'échantillons PNG 1200×200.
Chaque échantillon affiche son ratio de contraste WCAG par rapport au noir ou au blanc le plus contrasté, avec un badge AA / AAA / échec. Repérez les problèmes d'accessibilité avant la mise en production.
Chaque octet reste sur votre appareil. Calculs OKLCH, génération d'harmonies, dérivation d'échelle, export PNG — tout s'exécute en JavaScript localement. Ouvrez DevTools → Network et vérifiez : zéro requête sortante.
Quatre étapes pour passer d'une couleur de base à une palette complète prête pour les design tokens.
Cliquez sur la boîte de couleur, collez un HEX ou appuyez sur Base aléatoire pour vous inspirer. L'outil centre toute la palette sur cette couleur — les échantillons d'harmonie comme l'échelle tonale en 11 paliers.
Par défaut Analogue — trois couleurs à moins de 30° de la base, parfait pour des palettes de marque calmes. Complémentaire pour des accents contrastés. Triadique / Tétradique pour des marques éditoriales / ludiques. Monochromatique pour des systèmes tonals à une seule teinte. Tout est calculé en OKLCH pour rester uniformément lumineux.
Cliquez sur l'icône cadenas de l'échantillon que vous souhaitez conserver, puis appuyez sur Espace (ou sur Relancer) pour faire varier le reste dans l'harmonie. Itérez vite. Modifiez n'importe quel échantillon directement en cliquant sur son champ HEX si vous voulez fixer une valeur précise.
Copiez la sortie CSS (propriétés personnalisées), Tailwind v4 (bloc @theme), map SCSS ou tokens de design JSON. Ou cliquez sur Télécharger en PNG pour une bande d'échantillons 1200×200 prête à intégrer dans un brief de design.
Quatre scénarios courants où un outil de palette OKLCH respectueux de la vie privée surpasse l'ajustement manuel de codes hex dans Figma.
Vous avez une couleur de marque, il vous faut un système autour. Insérez le HEX, choisissez Analogue, relancez jusqu'à ce que deux couleurs de soutien sonnent juste, verrouillez les trois. Passez à la vue Échelle tonale, copiez le bloc @theme Tailwind, collez-le dans le app.css du nouveau projet. Temps total : 5 minutes.
Le indigo par défaut de Tailwind n'est pas votre marque. Votre marque, c'est #5B3FCD. Insérez-la, obtenez une échelle tonale en 11 paliers qui reflète parfaitement la cadence de Tailwind. Copiez le bloc @theme — chaque bg-brand-500 / text-brand-700 fonctionne tout simplement.
Chaque échantillon affiche son ratio de contraste WCAG + badge AA/AAA. Vérifiez d'un coup d'œil que brand-500 atteint AA sur fond blanc, et que brand-100 reste lisible comme teinte de fond avec du texte brand-900. Corrigez les échantillons problématiques en les relançant individuellement.
Les agences / entreprises multi-marques maintiennent N design systems parallèles, ayant tous la même forme mais une teinte de marque différente. Utilisez le même flux harmonie + échelle tonale pour chaque marque, exportez chacune en tokens JSON, intégrez à Style Dictionary. Forme cohérente, identité distincte.
Vos couleurs de marque ne quittent jamais votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant n'importe quelle opération.
canvas local; l'image d'échantillons est générée entièrement en mémoire navigateur et téléchargée sous forme de Blob — rien ne traverse le réseau.
Une sélection d'articles sur les palettes OKLCH, les systèmes de couleurs de marque et les design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Notre Color Picker & Converter sert à manipuler une couleur à la fois — choisir / convertir / copier. Cet outil-ci est conçu pour les palettes : insérez une couleur de base, obtenez tout un système prêt pour la marque (harmonies + échelle tonale) d'un seul coup. C'est la différence entre acheter une seule chemise et obtenir une garde-robe complète.
HSL espace les teintes de manière inégale (le jaune à 60° paraît bien plus lumineux que le bleu à 240°, même à valeur de luminosité identique). Une palette triadique en HSL aura toujours un échantillon visiblement plus clair ou plus terne que les autres. OKLCH est perceptuellement uniforme — trois échantillons à la même luminosité OKLCH paraissent avoir la même luminosité. C'est pourquoi tous les design systems modernes (Apple HI, Tailwind v4, IBM Carbon) passent à OKLCH pour les harmonies et les échelles.
C'est l'échelle de couleur de marque façon Tailwind : indigo-50 (le plus clair), indigo-100, indigo-200, … indigo-900, indigo-950 (le plus foncé). Insérez votre couleur de marque et l'outil génère automatiquement les 11 paliers en parcourant la luminosité OKLCH sur une courbe fixe. Le résultat est un remplacement direct pour n'importe quel token de palette Tailwind, dans la teinte de votre marque.
Cliquez sur l'icône cadenas en haut à gauche d'un échantillon — il reste fixe. Puis appuyez sur Relancer ou sur Espace pour faire varier tous les échantillons non verrouillés dans l'harmonie choisie. C'est ainsi qu'on trouve une bonne palette : épinglez la couleur de marque déjà adoptée, explorez les variations autour.
Non. Calculs OKLCH, génération d'harmonies, dérivation d'échelle tonale, calcul du ratio de contraste, export PNG, chaque copie dans le presse-papiers — tout s'exécute en JavaScript sur votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante. Collez vos couleurs de marque, vos design tokens internes, vos palettes sous NDA — rien ne quitte votre ordinateur.