Tailwind spalvų generatorius
Generuokite Tailwind CSS 50–950 11 tonų paletę ir konfigūracijos kodą iš vieno Hex kodo
Ypatybės
11 tonų automatinis generavimas iš 1 spalvos
Įvestą spalvą nustato į 500, apskaičiuoja šviesumą nuo 50 iki 950
Suderinamumas su v3 ir v4 formatais
Perjunkite tarp config ir @theme rašymo būdo naudodami skirtukus
Kopijuokite Hex kodą pagal atspalvį
Kopijuokite spalvos kodą po vieną mygtuką kiekvienam mėginiui
Paletės atnaujinimas kartu su įvedimu
Bandykite spalvas ir palyginkite be vykdymo mygtuko
Kaip naudoti
Įveskite bazinės spalvos Hex kodą
Įveskite Hex kodą arba spustelėkite spalvos mėginį kairėje spalvų parinktuvui atidaryti
Jei reikia, įveskite spalvos pavadinimą
Įveskite spalvos pavadinimą mažomis anglų raidėmis kodui. Jei tuščia, bus naudojamas primary
Peržiūrėkite 11 tonų spalvos mėginius
Patikrinkite 50–950 spalvos mėginius ir Hex kodą, kopijuokite po vieną naudodami mėginio mygtuką
Pasirinkite išvesties formatą ir kopijuokite
Pasirinkite v3 arba v4 ir spustelėkite „Kopijuoti kodą", kad įklijuotumėte į tailwind.config.js arba CSS failą
Panaudojimo atvejai
Prekės ženklo spalvos tonų kūrimas
Suderinkite mygtuko hover ir fono tono spalvas iš vienos prekės ženklo spalvos
Standartinėje paletėje nėra spalvų pridėjimas
Pridėkite projekto unikalią spalvą, kurios nėra Tailwind standartinėse spalvose, su 11 tonais į konfigūracijos failą
v4 @theme konfigūracijos kūrimas
Parašykite Tailwind v4 CSS kintamuosius iš svetainės pagrindinės spalvos
Dizaino maketo diegimo paruošimas
Paruošykite 11 tonų kodą iš maketo nurodytos spalvos ir perkelkite į dizaino įrankį
Pagrindinės žinios
Ką reiškia Tailwind 50–950
Tailwind CSS spalvos naudoja 11 etapų skaičius nuo 50 (šviesiausia) iki 950 (tamsiausia), o 500 yra bazinė spalva. Skaičius naudojamas klasės pavadinimo pabaigoje, pavyzdžiui „bg-primary-500" arba „text-primary-700".
- 50–300 etapai：50–300 etapai yra šviesos spalvos, dažnai naudojamos fono spalvoms arba šviesiam piešimui, kurios išlieka lengvai skaitomos su tamsiu tekstu viršuje.
- 600–950 etapai：600–950 etapai yra tamsios spalvos, dažnai naudojamos mygtuko hover arba antraštės teksto spalvai, kurios aiškiai matosi ant balto fono.
Spalvų apibrėžimo metodo skirtumai tarp v3 ir v4
Tailwind CSS v3 apibrėžia spalvas JavaScript tailwind.config.js faile, o v4 apibrėžia spalvas CSS @theme viduje kaip CSS kintamuosius. Abiem būdais apibrėžtos spalvos naudojamos tomis pačiomis klasės pavadinimais, pavyzdžiui „bg-primary-500".
- v3 rašymo būdas：v3 rašymo būdas – tai theme.extend.colors viduje „primary: { 500: '#3B82F6' }" formos įdėtas spalvos pavadinimas ir etapas.
- v4 rašymo būdas：v4 rašymo būdas – tai @theme viduje „--color-primary-500: #3B82F6;" formos kintamasis pavadinimas su spalvos pavadinimu ir etapu, sujungtu brūkšniu.
Saugumas ir privatumas
Apdorojama naršyklėje
Įvesti duomenys apdorojami tik jūsų naršyklėje ir nesiunčiami į išorę.
Apdorota tik naršyklėje
Paletės skaičiavimas ir kodo generavimas vykdoma tik jūsų naršyklėje, įvesties duomenys neišsiunčiami serveriui.
Ryšys šifruojamas HTTPS
Puslapio įkėlimas taip pat šifruojamas TLS, trečiosios šalys negali perskaityti turinio.
Nesiųsti trečiosioms šalims
Įvesties turinys neišsiunčiamas išorės paslaugoms, tokioms kaip reklamų tinklai ar sekimo sistemos.
Be automatinio rezultatų išsaugojimo
Įvesta spalva ir spalvos pavadinimas ir įvesties pasiūlymai nėra saugomi serveryje.
Sekite RAKKOTOOLS Google paieškoje
187 patogiųjų įrankių bus lengviau rasti iš Google paieškos ir dirbtinio intelekto paieškos!
- Randama paieškoje
- Rodoma ir dirbtinio intelekto paieškoje
- Atrask naujus įrankius
Naujinimų informacija
- update #318
Pridėta Tailwind spalvų generavimo funkcija – iš vienos spalvos sukurkite 11 tonų ir konfigūracijos kodą