Generator de culori Tailwind
Generați paletă de 11 nuanțe de la 50 la 950 pentru Tailwind CSS și codul de configurare dintr-un singur cod Hex
Caracteristici
Generare automată de 11 nuanțe dintr-o culoare
Calculează nuanțele de la 50 la 950 cu culoarea introdusă ca 500
Suport pentru formatele v3 și v4
Comutați între formatul config și @theme cu file
Copiați Hex pentru fiecare nuanță
Copiați codul culorii pentru fiecare mostră de culoare cu un clic
Paletă actualizată în timp real
Niciun buton de execuție necesar – testați și comparați culori pe măsură ce tastați
Cum se folosește
Introduceți Hex-ul culorii de referință
Introduceți codul Hex sau faceți clic pe mostra de culoare din stânga pentru a selecta cu selectorul de culoare
Introduceți numele culorii după necesitate
Introduceți numele culorii în litere mici englezești pentru a fi folosit în cod. Dacă lăsați gol, se va folosi primary
Verificați cele 11 nuanțe
Verificați mostrelele de culoare și codurile Hex de la 50 la 950, apoi copiați fiecare culoare cu butonul de copiere
Selectați formatul de ieșire și copiați
Alegeți v3 sau v4 și faceți clic pe „Copiați codul" pentru a lipi în tailwind.config.js sau în fișierul CSS
Cazuri de utilizare
Crearea nuanțelor culorii de marcă
Creați nuanțe coerente pentru hover și fundal dintr-o singură culoare de marcă
Adăugarea de culori care nu se află în paleta standard
Adăugați culori unice proiectului în 11 nuanțe la fișierul de configurare Tailwind
Crearea configurației @theme v4
Scrieți variabilele CSS Tailwind v4 din culoarea principală a site-ului
Pregătirea implementării design-ului
Pregătiți codul cu 11 nuanțe din culoarea specificată în design și transferați în tool-ul de design
Cunoștințe de bază
Ce reprezintă 50–950 în Tailwind
În Tailwind CSS, culorile sunt reprezentate pe 11 trepte numerice de la 50 (cel mai deschis) la 950 (cel mai închis), iar 500 este valoarea de referință. Numerele se folosesc la sfârșitul numelor de clase, cum ar fi „bg-primary-500" sau „text-primary-700".
- Trepte 50–300：Trepte 50–300 sunt culori deschise, frecvent folosite pentru fundal și umpleri ușoare, ușor de citit cu text închis deasupra.
- Trepte 600–950：Trepte 600–950 sunt culori închise, frecvent folosite pentru hover pe butoane și culoarea textului din titluri, vizibile clar pe fundal alb.
Diferența de metodă de definire între v3 și v4
În Tailwind CSS v3, culorile sunt definite ca JavaScript în tailwind.config.js, iar în v4 sunt definite ca variabile CSS în @theme într-un fișier CSS. Indiferent de formatul folosit, culorile definite se folosesc cu același nume de clasă, cum ar fi „bg-primary-500".
- Formatul v3：Formatul v3 este theme.extend.colors cu culori și trepte imbricate, cum ar fi „primary: { 500: '#3B82F6' }".
- Formatul v4：Formatul v4 este @theme cu variabile CSS, cum ar fi „--color-primary-500: #3B82F6;", unde culoarea și treapta sunt conectate cu cratime.
Securitate și confidențialitate
Procesare în browser
Datele introduse sunt procesate doar în browserul dumneavoastră și nu sunt trimise în exterior.
Procesare doar în browser
Calcularea paletei și generarea codului se efectuează în întregime în browserul dvs., iar datele de intrare nu sunt trimise la server.
Comunicare criptată cu HTTPS
Încărcarea paginii este și ea criptată prin TLS, iar conținutul nu poate fi citit de terți.
Nicio transmisie către terți
Conținutul intrării nu este trimis serviciilor externe, cum ar fi rețele de publicitate sau tracked-uri.
Nicio salvare automată a rezultatelor
Culoarea introdusă și numele culorii și sugestiile de intrare nu sunt stocate pe server.
Urmărește RAKKOTOOLS în Google Search
187 instrumente utile devin mai ușor de găsit din Google Search și căutările AI!
- Se găsește în căutare
- Se afișează și în căutări AI
- Descoperă instrumente noi
Informații de actualizare
- update #318
Generator de culori Tailwind adăugat, creează 11 nuanțe de culoare și cod de configurare din o singură culoare