Generátor farieb Tailwind
Vygenerujte paletu 11 stupňov 50–950 z jedného Hex kódu Tailwind CSS a kód nastavenia
Vlastnosti
Automatické vygenerovanie 11 stupňov z 1 farby
Vstupná farba sa umiestnená na 500 a vypočítajú sa tóny od 50 do 950
Podpora v3 aj v4
Prepínanie medzi formátom config a @theme na kartách
Kopírovanie Hex kódu pre každý stupeň
Tlačidlá na farbách umožňujú kopírovanie farieb jeden po jednom
Aktualizácia palety pri zadávaní
Porovnávajte farby bez tlačidla spustenia
Ako sa to používa
Zadajte Hex kód referenčnej farby
Zadajte Hex kód alebo kliknite na farbný vzorec a vyberte farbu vo výberom farby
V prípade potreby zadajte názov farby
Zadajte názov farby v malých písmenách anglickej abecedy. Ak necháte prázdne, bude použité primary
Skontrolujte 11 farbných vzoriek
Skontrolujte vzorky farieb a Hex kódy od 50 do 950 a skopírujte jednotlivé farby tlačidlom na vzorke
Vyberte formát výstupu a skopírujte
Zvolte v3 alebo v4, kliknite na "Kopírovať kód" a vložte do tailwind.config.js alebo CSS súboru
Prípady použitia
Vytvorenie tónov farieb značky
Vytvorenie tónov pre hover tlačidiel alebo pozadie z jednej farby značky
Pridanie farby, ktorá nie je v štandardnej palete
Pridanie vlastnej farby projektu v 11 stupňoch do konfiguračného súboru
Vytvorenie nastavenia @theme v4
Vytvorenie CSS premenných Tailwind v4 z hlavnej farby webovej stránky
Príprava implementácie dizajnového konceptu
Príprava 11 stupňov kódu na implementáciu zo špecifikovanej farby a prenos do dizajnového nástroja
Základné vedomosti
Čo predstavujú 50–950 v Tailwinde
Farby Tailwind CSS sú vyjadrené 11 číslicami od 50 (najľahšia) do 950 (najtmavšia), pričom 500 je základná farba. Čísla sa používajú na konci názvov tried, napríklad "bg-primary-500" alebo "text-primary-700".
- Stupne 50–300：Stupne 50–300 sú jasné farby často používané na pozadia alebo svetlé výplne. Sú dostatočne jasné, aby boli čitateľné aj s tmavým textom navrchu.
- Stupne 600–950：Stupne 600–950 sú tmavé farby často používané na priestave tlačidiel alebo farbu textu nadpisov. Sú jasne viditeľné aj na bielom pozadí.
Rozdiel v spôsobe definovania farieb medzi v3 a v4
V Tailwind CSS v3 sa farby definujú v JavaScripte v tailwind.config.js, v v4 sa definujú ako CSS premenné v @theme v CSS súbore. Bez ohľadu na to, ktorý spôsob sa používa, sú definované farby dostupné pod rovnakými názvami tried, napríklad "bg-primary-500".
- Spôsob v3：Spôsob v3 používa vnorenú štruktúru v theme.extend.colors, napríklad "primary: { 500: '#3B82F6' }".
- Spôsob v4：Spôsob v4 používa CSS premenné v @theme spojené pomlčkami, napríklad "--color-primary-500: #3B82F6;".
Bezpečnosť a súkromie
Spracovanie v prehliadači
Zadané údaje sa spracúvajú len vo vašom prehliadači a neodosielajú sa von.
Spracovanie iba v prehliadači
Výpočet palety a generovanie kódu sa vykonáva výlučne vo vašom prehliadači a vstupné údaje sa neposielajú na server.
Komunikácia je šifrovaná cez HTTPS
Načítavanie stránky je tiež šifrované pomocou TLS a tretie strany nemôžu čítať obsah.
Bez odosielania tretím stranám
Vstupný obsah sa neposiela do externých služieb, ako sú sieťami reklám alebo sledovania.
Bez automatického ukladania výsledkov
Zadané farby a názvy farieb ani vstupné návrhy sa neukladajú na serveri.
Sledujte RAKKOTOOLS pri vyhľadávaní v Google
187 užitočných nástrojov budú ľahšie nájditeľné pri vyhľadávaní v Google a AI vyhľadávaní!
- Nájdete pri vyhľadávaní
- Zobrazí sa aj v AI vyhľadávaní
- Objavte nové nástroje
Aktualizácie
- update #318
Pridané generovanie farieb Tailwind – vytvorenie 11 odtieňov farby a konfiguračného kódu z 1 farby