Transformez n’importe quelle couleur en une palette de 11 paliers pour système de design (50→950) : interpolation OKLCH perceptuellement uniforme avec la couleur source ancrée à son palier le plus proche, contraste WCAG par rapport au blanc/noir sur chaque palier, export en un clic vers Tailwind / variables CSS / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#ffedfa",
100: "#ffd8f4",
200: "#ffbdec",
300: "#fea4e4",
400: "#f47bd4",
500: "#e653c4",
600: "#d222af",
700: "#b90098",
800: "#9c007f",
900: "#7c0063",
950: "#560044",
},
},
},
},
};Générez une échelle de système de design en 11 étapes à partir d'une seule couleur, perceptuellement uniforme en OKLCH.
Collez un code HEX, ou cliquez sur « Construire l'échelle » sur n'importe quelle page de couleur pour importer la valeur.
Votre couleur s'aligne sur l'étape la plus proche ; le contraste WCAG par rapport au blanc et au noir est affiché sous chaque étape.
Choisissez entre Tailwind / variables CSS / SCSS / JSON et copiez-le directement dans votre code.
Quatre questions que les gens posent réellement sur la génération de teintes.
Poursuivez à partir d'ici et mettez les couleurs en œuvre.
Saisissez un code RAL, Pantone ou NCS — ou n'importe quel HEX — et faites-le correspondre à travers les 10 systèmes standard avec ΔE CIEDE2000.
Validation du contraste selon WCAG 2.1 entre n'importe quelle couleur de premier plan et de fond.
Barre d'espace pour aléatoriser, verrouiller, faire glisser pour réorganiser, partager par URL — tout ce qu'un tableau de palettes doit faire.
Décrivez une scène ou une ambiance en une ligne — obtenez une palette de cinq tons avec sa justification.