Generator odcieni Tailwind

Stwórz praktyczną skalę odcieni

Pojedynczy kolor marki rzadko wystarcza do zbudowania kompletnego interfejsu. Przyciski potrzebują stanów hover, karty jasnych teł, obramowania spokojniejszego odcienia, a tekst czasem ciemniejszego towarzysza. Ten generator odcieni Tailwind zamienia jedną wartość HEX w znaną skalę 50-950, dzięki czemu szybko sprawdzisz, jak kolor zachowuje się na jasnych i ciemnych powierzchniach. Wygenerowane wartości są deterministyczne i łatwe do skopiowania, więc sprawdzą się w prototypach, przeglądach projektów, niestandardowych właściwościach CSS i dokumentacji design tokenów.

Narzędzie korzysta z kroków jasności HSL, aby zachować rozpoznawalny odcień, a jednocześnie przesuwać kolor w stronę bardzo jasnych tonów i głębokich cieni. To nie jest oficjalny algorytm Tailwind i nie próbuje dokładnie odwzorować ręcznie dopracowanych palet Tailwind. Zamiast tego daje czysty punkt wyjścia, który można dostosować w kontekście. Jeśli Twój kolor bazowy jest już bardzo jasny lub bardzo ciemny, przyjrzyj się uważnie wartościom środkowym i zdecyduj, czy skala wymaga ręcznych poprawek.

Używanie wygenerowanych odcieni w CSS

Skopiuj wynik CSS, gdy potrzebujesz zmiennych gotowych dla przeglądarki, takich jak --brand-500 i --brand-700. Skopiuj wynik JSON, gdy przygotowujesz tokeny do pliku konfiguracyjnego, style dictionary lub strony dokumentacji. W typowym interfejsie 50 i 100 sprawdzają się na delikatnych powierzchniach, 200 i 300 na obramowaniach lub plakietkach, 500 jako główny kolor akcji, a 600-800 w stanach hover, wciśnięcia lub dla tekstu. Wartości 900 i 950 są najmocniejsze, więc zachowaj je dla ciemnych motywów lub elementów o silnym akcencie.

Sprawdź kontrast przed publikacją

Skale odcieni są wygodne, ale nie gwarantują automatycznie dostępnego tekstu. Kolor, który jako próbka wygląda na zrównoważony, może nie spełniać wymogów kontrastu za małymi etykietami lub wyłączonymi kontrolkami. Po skopiowaniu skali przetestuj kombinacje, których naprawdę używa Twój interfejs: tekst podstawowy na jasnych tłach, biały tekst na przyciskach akcji, obrysy fokusa wokół pól oraz obramowania względem sąsiednich powierzchni. Potraktuj ten generator jako pierwszy krok w procesie tworzenia systemu kolorów, a przed publikacją zweryfikuj ostateczne zestawienia w narzędziu do sprawdzania kontrastu.