Převeďte libovolnou barvu na 11-krokovou škálu designového systému (50→950): vnímavě rovnoměrná interpolace OKLCH, přičemž zdrojová barva je ukotvena k nejbližšímu kroku, kontrast WCAG vůči bílé/černé na každém kroku, export jedním kliknutím do Tailwind / CSS proměnných / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff3ff",
100: "#ffdcfd",
200: "#ffc0fa",
300: "#fea1f6",
400: "#f67aee",
500: "#e94ce1",
600: "#d600cf",
700: "#bd00b9",
800: "#a1009e",
900: "#81007f",
950: "#5b005b",
},
},
},
},
};Vytvořte 11stupňovou škálu designového systému z jedné barvy, percepčně uniformní v OKLCH.
Vložte HEX, nebo stiskněte „Vytvořit škálu“ na libovolné stránce barvy pro načtení hodnoty.
Vaše barva se přizpůsobí nejbližšímu kroku; kontrast WCAG oproti bílé a černé je uveden pod každým krokem.
Vyberte Tailwind / CSS proměnné / SCSS / JSON a zkopírujte přímo do svého kódu.
Čtyři otázky, které lidé skutečně kladou ohledně generování odstínů.
Pokračujte odsud a využijte barvy v praxi.
Zadejte kód RAL, Pantone nebo NCS — nebo jakýkoli HEX — a porovnejte ho napříč všemi 10 standardními systémy s CIEDE2000 ΔE.
Ověření kontrastu podle WCAG 2.1 mezi libovolnou barvou popředí a pozadí.
Mezerník pro náhodné generování, zamykání, přetahování pro změnu pořadí, sdílení přes URL – vše, co paletová deska má dělat.
Popište scénu nebo náladu jedním řádkem – získejte paletu s pěti rolemi a zdůvodněním.