CSS-themagenerator

Zet merkkleuren om in CSS-variabelen

Een praktisch webthema heeft meer nodig dan één primaire kleur. Knoppen hebben hoverstatussen nodig, kaarten oppervlakken, focusringen transparantie en randen een tint die bij de paginaachtergrond past. Deze CSS-themagenerator start met een compacte set merkkeuzes en leidt daar een klein blok custom properties van af dat je in een stylesheet kunt plakken. Het resultaat is bewust eenvoudig: bruikbare variabelen voor een landingspagina, prototype, documentatiesite of kleine app, zonder de overhead van een volledige tokenpijplijn.

Kies een primaire kleur en een accentkleur en stel daarna de achtergrond- en tekstkleur in die het algehele contrast bepalen. De browser leidt hover-, oppervlak-, gedempte tekst-, rand- en focuswaarden af door de HSL-helderheid aan te passen en waar nodig transparante RGB toe te passen. De voorbeeldkaart gebruikt dezelfde variabelen als in de uitvoer, zodat je snel ziet of de set samenhangend voelt voordat je kopieert.

Het gegenereerde :root-blok gebruiken

CSS-custom properties zijn het makkelijkst te onderhouden als ze het doel beschrijven in plaats van de kale kleurtint. Een naam als --color-primary vertelt toekomstige bijdragers waar de waarde gebruikt moet worden, terwijl --color-blue na een redesign onjuist kan worden. Plak het gegenereerde :root-blok aan het begin van je stylesheet en verwijs in componenten naar de variabelen. Knoppen kunnen bijvoorbeeld --color-primary gebruiken, hoverstatussen --color-primary-hover en panelen --color-surface met --color-border.

Een startthema verfijnen

Afgeleide kleuren zijn een sterke eerste versie, geen vervanging voor testen. Bekijk het thema met echte koppen, lopende tekst, uitgeschakelde bedieningselementen, formuliervelden, links en meldingen. Als de hoverkleur te donker aanvoelt, verhoog dan handmatig de helderheid. Als randen op de achtergrond verdwijnen, vergroot dan hun contrast. Controleer vooral het contrast van tekst op knoppen en oppervlakken. De generator houdt al het werk in de browser en is dus veilig voor vroege merkverkenning, maar een verzorgd designsysteem vraagt nog altijd om menselijke controle en aanpassingen op componentniveau.