Generator motywów CSS

Zamień kolory marki w zmienne CSS

Praktyczny motyw strony potrzebuje czegoś więcej niż jednego koloru podstawowego. Przyciski wymagają stanów hover, karty powierzchni, pierścienie fokusa przezroczystości, a obramowania odcienia pasującego do tła strony. Ten generator motywów CSS wychodzi od niewielkiego zestawu wyborów marki i wyprowadza z niego krótki blok niestandardowych właściwości, który możesz wkleić do arkusza stylów. Wynik jest celowo prosty: przydatne zmienne dla strony docelowej, prototypu, serwisu z dokumentacją lub małej aplikacji, bez obciążenia pełnym potokiem tokenów.

Wybierz kolor podstawowy i akcentowy, a następnie ustaw tło i kolor tekstu, które określają ogólny kontrast. Przeglądarka wylicza wartości hover, powierzchni, przygaszonego tekstu, obramowania i fokusa, modyfikując jasność HSL i stosując przezroczyste RGB tam, gdzie to właściwe. Karta podglądu używa tych samych zmiennych, które widać w wyniku, więc przed skopiowaniem szybko zobaczysz, czy zestaw jest spójny.

Korzystanie z wygenerowanego bloku :root

Niestandardowe właściwości CSS najłatwiej utrzymywać, gdy opisują przeznaczenie, a nie surowy odcień. Nazwa taka jak --color-primary mówi przyszłym współpracownikom, gdzie użyć wartości, podczas gdy --color-blue może stać się nieprecyzyjna po zmianie projektu. Wklej wygenerowany blok :root na początku arkusza stylów, a następnie odwołuj się do zmiennych w komponentach. Na przykład przyciski mogą używać --color-primary, stany hover --color-primary-hover, a panele --color-surface razem z --color-border.

Dopracowanie motywu startowego

Kolory pochodne to solidny pierwszy szkic, a nie zamiennik testów. Sprawdź motyw na prawdziwych nagłówkach, tekście, nieaktywnych kontrolkach, polach formularzy, linkach i alertach. Jeśli kolor hover wydaje się zbyt ciemny, zwiększ ręcznie jego jasność. Jeśli obramowania znikają na tle, zwiększ ich kontrast. Przede wszystkim sprawdź kontrast tekstu na przyciskach i powierzchniach. Generator wykonuje całą pracę w przeglądarce, więc jest bezpieczny przy wstępnej eksploracji marki, ale dopracowany system projektowy nadal wymaga ludzkiej weryfikacji i poprawek na poziomie komponentów.