Generator kolorów Tailwind
Wygeneruj paletę 11 odcieni Tailwind CSS od 50 do 950 i kod konfiguracji z jednego kodu Hex
Funkcje
Automatyczne generowanie 11 odcieni z 1 koloru
Wprowadzony kolor staje się 500, a pozostałe odcienie od 50 do 950 są obliczane automatycznie
Obsługa obu formatów v3 i v4
Przełączaj między formatami config i @theme za pomocą zakładek
Kopiuj kody Hex dla każdego odcienia
Skopiuj kody kolorów jeden po jednym za pomocą przycisków przy każdej próbce
Aktualizacja palety w czasie rzeczywistym
Testuj kolory i porównuj je bez konieczności klikania przycisków
Jak korzystać
Wprowadź kod Hex koloru bazowego
Wpisz kod Hex lub kliknij próbkę koloru po lewej, aby wybrać kolor za pomocą selektora
W razie potrzeby wprowadź nazwę koloru
Wpisz nazwę koloru (małymi literami) do użycia w kodzie. Jeśli pozostawisz puste, używana będzie nazwa "primary"
Sprawdź 11 próbek kolorów
Sprawdź próbki kolorów od 50 do 950 i ich kody Hex, a następnie skopiuj je jeden po jednym
Wybierz format wyjściowy i skopiuj
Wybierz v3 lub v4 i kliknij "Kopiuj kod", aby wkleić do pliku tailwind.config.js lub CSS
Przypadki użycia
Tworzenie odcieni barwy marki
Twórz spójne odcienie do stanów hover przycisków i tła na podstawie jednego koloru marki
Dodawanie kolorów spoza standardowej palety
Dodaj unikatowe kolory projektu w 11 odcieniach do pliku konfiguracji
Tworzenie konfiguracji @theme dla v4
Wygeneruj zmienne CSS Tailwind v4 na podstawie głównego koloru witryny
Przygotowanie do implementacji makiet projektów
Przygotuj 11 odcieni kodu z określonego koloru makiety i przenieś je do narzędzia projektowego
Wiedza podstawowa
Co oznaczają 50–950 w Tailwind
Kolory Tailwind CSS są reprezentowane przez 11 poziomów jasności od 50 (najjaśniejszy) do 950 (najciemniejszy), gdzie 500 jest kolorem bazowym. Liczby są używane na końcu nazw klas, takich jak "bg-primary-500" lub "text-primary-700".
- Poziomy 50–300：Poziomy 50–300 to jasne kolory, które są często używane do tła lub jasnych wypełnień i mogą być łatwo czytane z ciemnym tekstem na górze.
- Poziomy 600–950：Poziomy 600–950 to ciemne kolory, które są często używane do stanów hover przycisków lub koloru tekstu nagłówków i są wyraźnie widoczne na białym tle.
Różnice w definiowaniu kolorów między v3 i v4
W Tailwind CSS v3 kolory są definiowane w JavaScript w pliku tailwind.config.js, a w v4 są definiowane jako zmienne CSS wewnątrz @theme w pliku CSS. Niezależnie od użytego formatu, zdefiniowane kolory mogą być używane w tej samej nazwie klasy, jak "bg-primary-500".
- Format v3：Format v3 definiuje kolory jak "primary: { 500: '#3B82F6' }" zagnieżdżając nazwę koloru i poziom w theme.extend.colors.
- Format v4：Format v4 definiuje kolory jak "--color-primary-500: #3B82F6;" wewnątrz @theme, używając nazw zmiennych połączonych łącznikami.
Bezpieczeństwo i prywatność
W całości w przeglądarce
Dane wejściowe są przetwarzane wyłącznie w Twojej przeglądarce i nie są wysyłane na zewnątrz.
Przetwarzanie tylko w przeglądarce
Obliczenia palety i generowanie kodu jest przetwarzane całkowicie w Twojej przeglądarce, dane wejściowe nie są wysyłane na serwer.
Komunikacja szyfrowana HTTPS
Wczytywanie strony jest również szyfrowane za pomocą TLS, zawartość jest chroniona przed odczytaniem przez strony trzecie.
Brak wysyłania stronom trzecim
Zawartość wejściowa nie jest wysyłana do usług zewnętrznych, takich jak sieci reklamowe lub trackery.
Brak automatycznego zapisywania wyników
Wprowadzony kolor i nazwa koloru i sugestie wejściowe nie są przechowywane na serwerze.
Śledź RAKKOTOOLS w wyszukiwarce Google
187 przydatnych narzędzi będzie łatwiej znaleźć w wyszukiwarce Google i wyszukiwarce AI!
- Pojawia się w wynikach wyszukiwania
- Wyświetla się również w wyszukiwarce AI
- Odkrywaj nowe narzędzia
Aktualizacje
- update #318
Dodano generator kolorów Tailwind – twórz 11 odcieni z 1 koloru i kod konfiguracji
Polecane narzędzia
187 bezpłatnych narzędzi internetowych dostępnych do natychmiastowego użytku!