Tailwind-nyansgenerator

Skapa en praktisk nyansskala

En enda varumärkesfärg räcker sällan för ett komplett gränssnitt. Knappar behöver hover-lägen, kort behöver bleka bakgrunder, kantlinjer behöver en mer dämpad ton och text behöver ibland en mörkare följeslagare. Den här Tailwind-nyansgeneratorn förvandlar ett HEX-värde till en välbekant skala från 50 till 950, så att du snabbt kan utforska hur färgen fungerar på ljusa och mörka ytor. De genererade värdena är deterministiska och lätta att kopiera, vilket gör dem användbara för prototyper, designgranskningar, CSS-variabler och dokumentation av design tokens.

Verktyget använder HSL-ljushetssteg för att behålla en igenkännbar färgton samtidigt som färgen förs mot mycket ljusa toner och djupa skuggor. Det är ingen officiell Tailwind-algoritm och försöker inte matcha Tailwinds handjusterade paletter exakt. I stället får du en ren utgångspunkt som kan justeras i sitt sammanhang. Om din basfärg redan är mycket blek eller mycket mörk bör du titta noga på mittvärdena och avgöra om skalan behöver justeras för hand.

Använda de genererade nyanserna i CSS

Kopiera CSS-utdata när du vill ha webbläsarklara variabler som --brand-500 och --brand-700. Kopiera JSON-utdata när du förbereder tokens för en konfigurationsfil, en style dictionary eller en dokumentationssida. I ett typiskt gränssnitt fungerar 50 och 100 bra för mjuka ytor, 200 och 300 för kantlinjer eller märken, 500 för huvudfärgen för åtgärder och 600 till 800 för hover-, nedtryckta eller textlägen. Värdena 900 och 950 är starkast, så spara dem till mörka teman eller element med hög betoning.

Kontrollera kontrasten innan du publicerar

Nyansskalor är praktiska, men de garanterar inte automatiskt tillgänglig text. En färg som ser balanserad ut som färgprov kan misslyckas med kontrasten bakom små etiketter eller inaktiverade kontroller. När du har kopierat en skala bör du testa de kombinationer som ditt gränssnitt faktiskt använder: primär text på bleka bakgrunder, vit text på åtgärdsknappar, fokusringar runt inmatningsfält och kantlinjer mot närliggande ytor. Se den här generatorn som ett första steg i ett färgsystems arbetsflöde och verifiera sedan de slutliga kombinationerna med en kontrastkontroll innan du publicerar.