Generátor barev Tailwind
Vygenerujte paletu 11 stupňů (50–950) Tailwind CSS a konfigurační kód z jednoho Hex kódu
Vlastnosti
Automatické vygenerování 11 stupňů z jedné barvy
Vypočítá odstíny 50–950 s vaší barvou nastavenou na 500
Podpora v3 i v4
Přepínání mezi formáty config a @theme na kartách
Kopírování Hex kódu pro každý stupeň
Kopírujte barevné kódy jednotlivě pomocí tlačítka u každého vzorku
Aktualizace palety při zadávání
Srovnávejte barvy bez nutnosti spouštět tlačítko
Jak používat
Zadejte Hex kód referenční barvy
Zadejte Hex kód nebo klikněte na vzorek vlevo a vyberte barvu pomocí výběru barev
Zadejte název barvy, pokud je to potřeba
Zadejte název barvy v malých písmenech pro použití v kódu. Je-li prázdné, použije se primary
Zkontrolujte vzorky 11 stupňů
Zkontrolujte vzorky a Hex kódy (50–950) a zkopírujte jednotlivé barvy pomocí tlačítka
Vyberte výstupní formát a zkopírujte
Vyberte v3 nebo v4 a klikněte na „Kopírovat kód" pro vložení do tailwind.config.js nebo CSS souboru
Případy použití
Vytvoření odstínů firemní barvy
Vytvořte konzistentní odstíny jedné firemní barvy pro hovery tlačítek a pozadí
Přidání barvy, kterou Tailwind nemá
Přidejte vlastní barvu projektu s 11 stupni do konfiguračního souboru
Vytvoření konfigurace @theme pro v4
Napište CSS proměnné Tailwind v4 ze základní barvy vašeho webu
Příprava implementace designového návrhu
Připravte 11 stupňů kódu ze zadané barvy návrhu a převeďte je do designového nástroje
Základní znalosti
Co představují 50–950 v Tailwindu
Barvy Tailwind CSS se vyjadřují 11 stupni od 50 (nejsvětlejší) do 950 (nejtmavší), přičemž 500 je základní stupeň barvy. Tyto čísla se používají na konci názvů tříd, například „bg-primary-500" nebo „text-primary-700".
- Stupně 50–300：Stupně 50–300 jsou světlé barvy, které se často používají pro barvy pozadí a světlé výplně, se kterými je snadné číst tmavý text.
- Stupně 600–950：Stupně 600–950 jsou tmavé barvy, které se často používají pro hovery tlačítek a barvy textů nadpisů, které se jasně vidí na bílém pozadí.
Rozdíl v definování barev mezi v3 a v4
V Tailwind CSS v3 jsou barvy definovány v JavaScriptu v tailwind.config.js, zatímco v v4 jsou definovány jako CSS proměnné v @theme. Bez ohledu na metodu se definované barvy používají se stejnými názvy tříd, jako je „bg-primary-500".
- Způsob v3：Způsob v3 definuje barvy pod theme.extend.colors v zanořené struktuře, například „primary: { 500: '#3B82F6' }".
- Způsob v4：Způsob v4 definuje barvy v @theme s názvy proměnných spojenými pomlčkou, například „--color-primary-500: #3B82F6;".
Bezpečnost a soukromí
Vše v prohlížeči
Vstupní data jsou zpracována pouze ve vašem prohlížeči a nejsou odesílána ven.
Zpracování pouze v prohlížeči
Výpočet palety a generování kódu se provádí výhradně v rámci vašeho prohlížeče a vstupní data se neposílají na server.
Komunikace šifrována pomocí HTTPS
Načítání stránky je také šifrováno pomocí TLS a třetí strany nemohou přečíst obsah.
Bez odesílání třetím stranám
Vstupní data se neposílají externím službám, jako jsou reklamní sítě nebo sledovací služby.
Bez automatického ukládání výsledků
Zadaná barva a název barvy a navrhované vstupy se neukládají na serveru.
Sledujte RAKKOTOOLS v Googlově vyhledávání
187 užitečných nástrojů je snadnější najít v Googlově vyhledávání a vyhledávání AI!
- Nalezení ve vyhledávání
- Také se zobrazí ve vyhledávání AI
- Objevujte nové nástroje
Informace o aktualizacích
- update #318
Přidán generátor barev Tailwind – vytváří 11 barevných stupňů a konfigurační kód z jedné barvy