Tailwind szín generátor
Egy Hex kódból generálj Tailwind CSS 50–950 11 árnyalatos palettát és konfigurációs kódot
Jellemzők
Automatikus 11 árnyalat generálás 1 színből
A beírt szín az 500-as értékre kerül, és kiszámításra kerülnek az 50–950 közötti árnyalatok
v3 és v4 formátum támogatása
Válts a config és @theme írási módok között fülek segítségével
Hex másolása árnyalatonként
Másolj szín kódokat gombokkal egyszerre egy színt
Paletta frissítése beírás közben
Nincs szükség futtatógombra, próbáld ki és hasonlítsd össze a színeket
Hogyan használd
Add meg az alapszín Hex kódját
Írj be Hex kódot, vagy kattints a bal végén lévő szín mintára, és válassz a színválasztóból
Szükség szerint add meg a szín nevét
Írj be egy szín nevet kisbetűvel a kódban való használathoz. Ha üres, akkor az alapértelmezett primary kerül felhasználásra
Ellenőrizd az 11 árnyalatos szín mintákat
Ellenőrizd az 50–950 szín mintákat és Hex kódokat, majd másolj egy színt egyszerre a minta másolása gombokkal
Válaszd ki a kimeneti formátumot és másold
Válassz v3 vagy v4 közül, és kattints az "Kód másolása" gombra, hogy beilleszd a tailwind.config.js vagy CSS fájlba
Felhasználási esetek
Márkaszín árnyalatainak létrehozása
Hozz létre konzisztens árnyalatokat az 1 márkaszínból a gombok lebegéséhez és háttérhez
A szokásos paletán kívüli szín hozzáadása
Adj hozzá projekthez egyedi színeket a Tailwind szabványos paletájához 11 árnyalatban a konfigurációs fájlban
v4 @theme konfiguráció létrehozása
Írd meg egy menetből a Tailwind v4 CSS változóit az oldal főszínéből
Tervezési minta megvalósítási felkészülés
Készítsd elő az 11 árnyalatos kódot a tervezési minta megadott színéből, és másold át a tervezési eszközbe is
Alapismeretek
Mit jelent a Tailwind 50–950
A Tailwind CSS színeinek az 50 a leghalványabb, a 950 a legsötétebb, 11 lépcsőfokú számokkal kifejezve a fényerőt, az 500 pedig az alap szín. A számokat az osztálynév végén használd, mint a "bg-primary-500" vagy a "text-primary-700".
- 50–300 lépcsőfokok：Az 50–300 lépcsőfokok világos színek, amelyeket gyakran háttérszínekhez vagy halványabb kitöltéshez használnak, és a felül lévő sötét szöveg jól olvasható marad
- 600–950 lépcsőfokok：A 600–950 lépcsőfokok sötét színek, amelyeket gyakran a gombok lebegéskor vagy a fejlécek szövegszínéhez használnak, és világos háttéren jól látható színekek
A v3 és v4 szín meghatározási módjai közötti különbség
A Tailwind CSS v3-ban a színeket a tailwind.config.js JavaScript-ben határozzák meg, a v4-ben pedig CSS fájlban a @theme-ben CSS változóként. Mindkét írási módban a megadott színek ugyanabban az osztály névben használhatók, mint a "bg-primary-500".
- v3 írási mód：A v3 írási mód a theme.extend.colors-ban történik, ahol a szín nevet és a lépcsőfokot beágyazva írja be, mint a "primary: { 500: '#3B82F6' }".
- v4 írási mód：A v4 írási mód a @theme-ben történik, ahol a szín nevet és a lépcsőfokot kötőjellel összekapcsolt változó nev ként írja be, mint a "--color-primary-500: #3B82F6;".
Biztonság és adatvédelem
Böngészőben zárul
A bevitt adatok kizárólag a böngészőjében kerülnek feldolgozásra, és nem kerülnek elküldésre külső helyre.
Csak a böngészőben feldolgozva
A A paletta számítása és a kód generálása teljes egészében az Ön böngészőjében történik, a bemeneti adatok nem kerülnek a szerverhez.
A kommunikáció HTTPS-sel titkosítva
Az oldal betöltése is TLS-sel titkosított, harmadik felek nem tudják az adatokat elolvasni.
Nem kerül harmadik félekhez
A bemeneti adatokat nem küldja külső szolgáltatásokhoz, például hirdetési hálózatokhoz vagy követőkkel kapcsolatos szolgáltatásokhoz.
Nincs automatikus mentés
A A beírt szín és szín név vagy a bemeneti javaslatok nem kerülnek a szerverre mentésre.
Kövesse a RAKKOTOOLS-t a Google Keresésben
187 hasznos eszköz könnyebben megtalálható a Google Keresésből és az AI Keresésből!
- Megtalálható a keresésben
- AI Keresésben is megjelenik
- Új eszközöket is felfedezhet
Frissítések
- update #318
Tailwind szín generátor hozzáadva: 1 színből 11 árnyalat és konfigurációs kód létrehozása