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: "#fff4ff",
100: "#fedeff",
200: "#fcc3ff",
300: "#f7a4fe",
400: "#ee7ef8",
500: "#df53ed",
600: "#cc16dd",
700: "#b500c7",
800: "#9900ab",
900: "#7a008b",
950: "#570065",
},
},
},
},
};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.