Tailwind generator boja

Generiraj Tailwind CSS paletnu od 50–950 sa 11 nijansi i kod postavki iz jednog Hex koda

Informacije o ažuriranjimaDodana Tailwind generacija boja, kreiranja 11 tonova boje i koda postavki iz 1 bojePogledaj vijesti o ažuriranju

Osobine

Automatski generiši 11 nijansi od 1 boje

Postavi unetu boju na 500 i izračunaj nijanse od 50–950

Podrška za v3 i v4 format

Prebacuj između config i @theme zapisa u jezičcima

Kopiraj Hex po nijansi

Dugme za svaki uzorak boje da kopijaš kod od boje do boje

Ažuriraj paletnu dok kukaš

Nema potrebe za dugmetom pokretanja – isprobaj i poredi boje u realnom vremenu

Kako se koristi

Unesi Hex osnove boje

Unesi Hex kod ili klikni na uzorak boje sa leve strane da izabereš iz boje birača

Unesi naziv boje ako je potrebno

Unesi naziv boje sa malim latičnim slovima za upotrebu u kodu. Ako je prazno, koristi se primary

Pregledaj 11 uzoraka nijansi

Provjeri uzorke od 50–950 i Hex kodove, kopira jednostruko sa dugmetom uzorka

Izaberi format i kopiraj

Odaberi v3 ili v4 i klikni "Kopiraj kod" da pasteš u tailwind.config.js ili CSS datoteku

Slučajevi upotrebe

Napravi nijanse od boje marke

Uskladi nijanse za dugmad i pozadine sa jednom bojom marke

Dodaj boje koje nisu u standardnoj paleti

Dodaj boje jedinstvene za tvoj projekat u 11 nijansi u datoteku postavki

Napravi v4 @theme postavke

Napiši CSS varijable Tailwind v4 od glavne boje sajta na jednom mjestu

Pripremi za primjenu dizajna

Pripremaj kodove od 11 nijansi iz boja u kompajlirajućem kodu i prenesi u alat za dizajn

Osnovna znanja

Šta predstavljaju 50–950 u Tailwindu

Tailwind CSS boje koriste 11 brojeva od 50 (najsvjetlije) do 950 (najtamnija) da prikažu osjećaj, a 500 je osnovna boja. Brojevi se koriste na kraju imena klase kao u "bg-primary-500" ili "text-primary-700".

Faze od 50–300：Faze od 50–300 su svjetle boje često korišćene za pozadinu ili laganu premazivanje, gdje je tekst s razlitom bojom lako čitljiv.
Faze od 600–950：Faze od 600–950 su tamne boje često korišćene za dugmad na lebdenju ili tekst zaglavlja koja se jasno vide na bijeloj pozadini.

Razlika između v3 i v4 u definiranju boja

Tailwind CSS v3 definiše boje u JavaScript-u u tailwind.config.js, a v4 definiše kao CSS varijable u @theme dijelu CSS-a. Bez obzira na format, definirane boje se koriste sa istim imenom klase kao "bg-primary-500".

v3 format：v3 format piše kao "primary: { 500: '#3B82F6' }" sa ugniježđenim imenom boje i faze u theme.extend.colors.
v4 format：v4 format piše kao "--color-primary-500: #3B82F6;" sa imenom boje i fazom spojena crticama kao naziv varijable u @theme.