CodeKitHubCe este acest instrument?
Tailwind CSS oferă o scală de culori implicită fixă, în loc să te lase să alegi valori arbitrare pentru culorile obișnuite din interfață. Fiecare dintre cele 22 de familii denumite (precum amber sau slate) are exact 11 nuanțe, numerotate de la 50 la 950, iar fiecare nuanță are o singură valoare hex oficială, documentată chiar de Tailwind și folosită identic în utilitarele bg-, text-, border- și ring-.
Această referință încorporează local întreaga paletă oficială, astfel încât căutarea unei culori sau a unui nume de clasă nu necesită deschiderea documentației Tailwind, rularea unui build sau trimiterea clasei prin PurgeCSS doar pentru a vedea cum arată. Căutările după hex folosesc distanța euclidiană RGB pentru a găsi cea mai apropiată nuanță oficială, iar căutările după clasă sunt exacte — fiecare valoare de aici corespunde valorilor implicite documentate de Tailwind.
De ce să-l folosești?
- Lipește un cod hex dintr-un fișier de design sau o captură de ecran și obține instant cel mai apropiat nume de clasă Tailwind, în loc să ghicești cărei nuanțe numerotate îi corespunde.
- Tastează un nume de clasă precum slate-900 sau bg-purple-500 pentru a vedea valoarea hex și RGB exactă fără să cauți în documentația Tailwind.
- Explorează grila completă de 22 de familii x 11 nuanțe pentru a compara nuanțele una lângă alta înainte de a alege.
- Obține variantele bg-, text-, border- și ring- pentru orice nuanță cu un singur click, deoarece Tailwind folosește aceeași scală numerică peste tot.
- Gratuit, instantaneu și complet local — fără încărcare, fără cont, fără pas de build.
Cum se folosește
- Pentru a găsi un nume de clasă dintr-un cod hex: tastează sau lipește valoarea hex (cu sau fără #) în caseta de căutare — cea mai apropiată nuanță oficială Tailwind apare deasupra grilei, împreună cu distanța de culoare dacă nu este o potrivire exactă.
- Pentru a găsi o valoare hex dintr-un nume de clasă: tastează numele clasei sau al familiei (de ex. amber-500, bg-blue-600, sau doar teal) — o potrivire exactă arată hexul, RGB-ul și toate variantele utilitare; un nume de familie singur filtrează grila la acea familie.
- Pentru a explora totul: lasă caseta de căutare goală și dă click pe orice eșantion din grilă — detaliile apar în panoul de sus, iar codul hex este copiat automat.
- Dă click pe oricare dintre butoanele de variante bg-/text-/border-/ring- din panoul de detalii pentru a copia exact acel nume de clasă.
Exemplu
Intrare
#c4b5fdRezultat
violet-300 — Potrivire exactă, #C4B5FD, rgb(196, 181, 253)Acest hex este una dintre valorile implicite oficiale documentate de Tailwind, așa că distanța este 0 și potrivirea este exactă, nu aproximativă.
Întrebări frecvente
Acestea sunt culorile implicite oficiale Tailwind CSS?
Da — toate cele 242 de valori hex (22 de familii x 11 nuanțe) provin din paleta implicită oficială documentată de Tailwind. Tailwind v4 reprezintă intern culorile ca OKLCH, dar aceeași paletă implicită și echivalentele sale hex documentate rămân neschimbate față de v3, deci aceste valori sunt valabile pentru ambele versiuni.
Ce înseamnă când o căutare hex nu este o potrivire exactă?
Dacă lipești un cod hex care nu este una dintre cele 242 de valori implicite Tailwind (de exemplu o culoare de brand personalizată), instrumentul arată cea mai apropiată nuanță oficială după distanța RGB și o etichetează „Cea mai apropiată potrivire” cu distanța afișată — nu va fi identică pixel cu pixel cu inputul tău, ci doar cea mai apropiată valoare implicită Tailwind.
De ce bg-, text-, border- și ring- folosesc aceleași numere?
Tailwind aplică o singură scală de culori comună tuturor categoriilor de utilitare, așa că bg-amber-500, text-amber-500, border-amber-500 și ring-amber-500 sunt toate aceeași valoare hex de bază aplicată unei proprietăți CSS diferite. De aceea panoul de detalii arată toate cele patru variante împreună pentru orice nuanță pe care o cauți.
Pot căuta un grup de familie precum doar "blue" fără un număr de nuanță?
Da — tastarea unui singur nume de familie (fără număr) filtrează grila la doar cele 11 nuanțe ale acelei familii, ca să le poți compara una lângă alta, fără să alegi încă o nuanță anume.
Acoperă acest instrument culorile de temă Tailwind personalizate pe care le-am definit în configurația mea?
Nu — această referință acoperă doar paleta implicită încorporată a Tailwind, nu culorile pe care le-ai adăugat sau suprascris într-un bloc tailwind.config.js theme.extend.colors sau un bloc @theme din v4. Dacă proiectul tău personalizează paleta, culorile reale afișate pot diferi de ceea ce este arătat aici pentru același nume de clasă.