Tailwind krāsu ģenerators
Ģenerējiet Tailwind CSS 50–950 11 tonāļu paleti un konfigurācijas kodu no viena Hex koda
Iezīmes
Automātiski ģenerējiet 11 tonāļus no 1 krāsas
Ievadītā krāsa tiek novietota uz 500, un tiek aprēķinātas tonāles no 50 līdz 950
Atbalsts gan v3, gan v4 formātiem
Pārvēlieties starp config un @theme rakstīšanas veidiem cilnēs
Kopējiet Hex kodus pa tonālēm
Kopējiet krāsu kodus pa vienam, izmantojot pogas katram krāsu paraugam
Atjauniniet paleti vienlaikus ar ievadi
Izmēģiniet krāsas un salīdziniet bez izpildes pogas
Lietošana
Ievadiet pamatnes krāsas Hex kodu
Ievadiet Hex kodu vai noklikšķiniet uz krāsu parauga kreisajā pusē, lai atlasītu, izmantojot krāsu atlasītāju
Pēc nepieciešamības ievadiet krāsas nosaukumu
Ievadiet krāsas nosaukumu mazajiem angļu burtiem, lai izmantotu kodā. Ja tukšs, tiek izmantots primary
Pārbaudiet 11 tonāļu krāsu paraugus
Pārbaudiet 50–950 krāsu paraugus un Hex kodus, un kopējiet atsevišķas krāsas, izmantojot parauga kopēšanas pogas
Atlasiet izvades formātu un kopējiet
Atlasiet v3 vai v4 un noklikšķiniet uz "Kopēt kodu", lai ielīmētu tailwind.config.js vai CSS failā
Lietošanas gadījumi
Zīmola krāsas tonāļu izveide
Izveidojiet vienotu tonāļu paletzi no vienas zīmola krāsas pogai, fona noēnojumam un citiem nolūkiem
Krāsu pievienošana, kuras nav standarta paletē
Pievienojiet projekta unikālas krāsas, kuru nav Tailwind standarta paletē, 11 tonāļos konfigurācijas failā
v4 @theme konfigurācijas izveide
Uzrakstiet Tailwind v4 CSS mainīgos no vietnes galvenās krāsas
Dizaina maketa ieviešanas sagatavošana
Sagatavojiet 11 tonāļu kodus no maketa norādītās krāsas un pārnesiet tos arī dizaina instrumentiem
Pamatprincipi
Ko nozīmē Tailwind 50–950
Tailwind CSS krāsas tiek attēlotas ar 11 skaitu posmiem no 50 (viegls) līdz 950 (tumšs), un 500 ir šīs krāsas standarts. Skaitļus izmanto klases nosaukumu beigās, piemēram, "bg-primary-500" vai "text-primary-700".
- Posmi 50–300：Posmi 50–300 ir gaišas krāsas, ko bieži izmanto fona krāsai vai gaišam pildījumam, un uz tiem labi redzami tumši teksti.
- Posmi 600–950：Posmi 600–950 ir tumšas krāsas, ko bieži izmanto pogu nolaižamajā stāvoklī vai virsrakstu tekstam, un tās skaidri redzamas uz baltiem fondiem.
Atšķirības krāsu definēšanā v3 un v4 versijās
Tailwind CSS v3 versijā krāsas tiek definētas tailwind.config.js JavaScript failā, bet v4 versijā CSS failā kā CSS mainīgie @theme blokā. Abos gadījumos definētās krāsas var izmantot ar tādiem pašiem klases nosaukumiem, piemēram, "bg-primary-500".
- v3 rakstīšanas veids：v3 rakstīšanas veids ir formāts, kurā krāsas nosaukums un posmi tiek rakstīti ligzdoti theme.extend.colors iekšpusē, piemēram, "primary: { 500: '#3B82F6' }".
- v4 rakstīšanas veids：v4 rakstīšanas veids ir formāts, kurā krāsas nosaukums un posmi tiek rakstīti kā mainīgais ar defisiem @theme iekšpusē, piemēram, "--color-primary-500: #3B82F6;".
Drošība un konfidencialitāte
Apstrāde pārlūkprogrammā
Ievadītie dati tiek apstrādāti tikai jūsu pārlūkprogrammā un netiek nosūtīti ārpusē.
Apstrāde tikai pārlūkprogrammā
Paletes aprēķins un koda ģenerēšana tiek veikta pilnībā jūsu pārlūkprogrammā, un ievades dati netiek sūtīti uz serveri.
Komunikācija šifrēta ar HTTPS
Lapas ielāde tiek šifrēta ar TLS un tās saturs nav lasāms trešajām personām.
Nav sūtīšanas trešajām personām
Ievades saturs netiek sūtīts uz ārējiem pakalpojumiem, piemēram, reklāmu tīkliem vai izsekotājiem.
Nav automātiskas rezultātu saglabāšanas
Ievadītā krāsa un krāsas nosaukums un ievades ieteikumi netiek glabāti serverī.
Sekojiet RAKKOTOOLS vietnē Google meklēšanā
187 ērtas rīka tiks vieglāk atrodamas Google meklēšanā un AI meklēšanā!
- Atrast meklēšanā
- Tiek parādīts arī AI meklēšanā
- Atklāt jaunus rīkus
Jaunumi
- update #318
Tailwind krāsu ģenerators pievienots: izveidojiet 11 tonusoļus un konfigurācijas kodu no vienas krāsas