CSS-temagenerator
Välj dina varumärkesfärger och generera ett :root-tema med CSS-anpassade egenskaper i webbläsaren, med härledda token för hover, kantlinje och yta.
🔒 Körs helt i din webbläsare — ingenting laddas uppFörvandla varumärkesfärger till CSS-variabler
Ett praktiskt webbtema behöver mer än en primärfärg. Knappar behöver hover-lägen, kort behöver ytor, fokusringar behöver transparens och kantlinjer behöver en nyans som fungerar mot sidans bakgrund. Den här CSS-temageneratorn utgår från en kompakt uppsättning varumärkesval och härleder ett litet block med anpassade egenskaper som du kan klistra in i en stilmall. Resultatet är medvetet enkelt: användbara variabler för en landningssida, prototyp, dokumentationssajt eller liten app utan tyngden hos en fullständig token-pipeline.
Välj primär- och accentfärg och ange sedan bakgrunds- och textfärg som avgör den övergripande kontrasten. Webbläsaren härleder värden för hover, yta, dämpad text, kantlinje och fokus genom att justera HSL-ljushet och använda transparent RGB där det passar. Förhandsvisningskortet använder samma variabler som visas i utdata, så du snabbt kan se om uppsättningen känns sammanhållen innan du kopierar den.
Använda det genererade :root-blocket
CSS-anpassade egenskaper är lättast att underhålla när de beskriver syfte i stället för rå nyans. Ett namn som --color-primary talar om för framtida bidragsgivare var värdet ska användas, medan --color-blue kan bli missvisande efter en omdesign. Klistra in det genererade :root-blocket nära början av din stilmall och referera sedan till variablerna i komponenter. Knappar kan till exempel använda --color-primary, hover-lägen --color-primary-hover och paneler --color-surface tillsammans med --color-border.
Finslipa ett starttema
Härledda färger är ett starkt första utkast, inte en ersättning för testning. Granska temat med riktiga rubriker, brödtext, inaktiverade kontroller, formulärfält, länkar och aviseringar. Om hover-färgen känns för mörk kan du höja dess ljushet manuellt. Om kantlinjerna försvinner mot bakgrunden ökar du deras kontrast. Viktigast av allt: kontrollera kontrasten för text på knappar och ytor. Generatorn håller allt arbete i webbläsaren och är därför säker för tidig varumärkesutforskning, men ett genomarbetat designsystem kräver fortfarande mänsklig granskning och justeringar på komponentnivå.
Hur man använder
- Välj varumärkesfärgerVälj primär-, accent-, bakgrunds- och textfärg för temat.
- Granska de härledda tokenKontrollera värden för hover, kantlinje, yta och fokusring i förhandsvisningen.
- Kopiera :root-CSSKlistra in de genererade anpassade egenskaperna i din stilmall.