Tailwind-värien luonti
Luo Tailwind CSS:n 50–950 väripaletti ja konfiguraatiokoodi yhdestä Hex-koodista
Ominaisuudet
Luo automaattisesti 11 sävyä yhdestä väristä
Aseta syötetty väri arvoon 500 ja laske 50–950 värisävyt
Tukee sekä v3:a että v4:ää
Vaihda config- ja @theme-kirjoitusasua välilehdillä
Kopioi Hex jokaista sävyä kohti
Kopioi värikoodi yksittäin värinäytepainikkeiden avulla
Päivitä paletti samanaikaisesti
Testaa värejä ja vertaa ilman suoritusnappulaa
Käyttöohje
Syötä perusvärin Hex-koodi
Syötä Hex-koodi tai klikkaa värinäytettä vasemmalla puolella ja valitse väriä värinvalitsimella
Syötä värin nimi tarvittaessa
Syötä koodissa käytettävä värin nimi englanninkielisillä pieniksi kirjoitetuilla kirjaimilla. Jos jätät tyhjäksi, käytetään primary-arvoa
Tarkista 11 sävyn värinäytteet
Tarkista värinäytteet ja Hex-koodit 50–950, ja kopioi yksittäiset värit näytteen kopiopainikkeilla
Valitse tulostusmuoto ja kopioi
Valitse v3 tai v4 ja klikkaa "Kopioi koodi" liittääksesi tailwind.config.js-tiedostoon tai CSS-tiedostoon
Käyttötapaukset
Brändivärin sävyjen luominen
Harmonisoi painikkeen hover-tila- ja taustavärien sävyt yhdestä brändiväristä
Värien lisääminen, joita ei ole vakiopaletissa
Lisää projektin omat värit 11 sävyn sisältäviksi konfiguraatiotiedostoon
Luo v4:n @theme-konfiguraatio
Kirjoita Tailwind v4:n CSS-muuttujat sivuston pääväristä
Suunnittelumockupin toteutuksen valmistelu
Valmista mockupissa määritetyistä väreistä 11 sävyn koodit ja siirrä ne myös suunnittelutyökaluun
Perustiedot
Mitä Tailwind 50–950 tarkoittaa
Tailwind CSS:n värit käyttävät 11 numerotasoa kirkkauden ilmaisemiseen, jossa 50 on vaaleimpia ja 950 on tummimpia. 500 on värin perusarvo. Numeroita käytetään luokkanimien lopussa, kuten "bg-primary-500" ja "text-primary-700".
- Tasot 50–300：Tasot 50–300 ovat kirkkaita värejä, joita käytetään usein taustassa tai vaalean täyttövärinä. Niihin yläpuolelle asetettu tumma teksti on helppo lukea.
- Tasot 600–950：Tasot 600–950 ovat tummaita värejä, joita käytetään usein painikkeen hover-tilassa tai otsikon tekstin värinä. Ne ovat selvästi näkyvät valkoisen taustan päällä.
Ero v3:n ja v4:n värimääritystavoissa
Tailwind CSS v3:ssa värit määritetään JavaScriptissä tailwind.config.js-tiedostossa, ja v4:ssä värit määritetään CSS-tiedostossa @theme-osassa CSS-muuttujina. Molemmilla tavoilla määriteltyjä värejä voidaan käyttää samoin luokkaniminä, kuten "bg-primary-500".
- v3:n kirjoitustapa：v3:n kirjoitustapa on muoto, jossa värit kirjoitetaan sisäkkäin theme.extend.colors-osioon, kuten "primary: { 500: '#3B82F6' }".
- v4:n kirjoitustapa：v4:n kirjoitustapa on muoto, jossa värit kirjoitetaan @theme-osioon muuttujaniminä, joissa värin nimi ja taso yhdistetään väliviivalla, kuten "--color-primary-500: #3B82F6;".
Turvallisuus ja yksityisyys
Käsittely selaimessa
Syötetyt tiedot käsitellään vain selaimessasi, eikä niitä lähetetä ulkopuolelle.
Käsittely vain selaimen sisällä
Palettilaskelmat ja kodin luominen käsitellään kokonaan selaimessasi, ja syötetyt tiedot eivät lähde palvelimelle.
Tietoliikenne salattu HTTPS:llä
Sivun lataus salataan myös TLS:llä, eikä kolmannet osapuolet pääse lukemaan sisältöä.
Ei lähetystä kolmansille osapuolille
Syöttötietoja ei lähetetä ulkoisille palveluille, kuten mainontaverkkoihin tai seurantapalveluihin.
Tulosten automaattinen tallennus ei käytössä
Syötetyt väri ja värin nimi ja syöteehdotuksia ei tallenneta palvelimelle.
Seuraa RAKKOTOOLSia Google-haulla
187 kätevää työkalua löytyy helpommin Google-haulla ja tekoäly-haulla!
- Löytyy haulla
- Näkyy myös tekoäly-haulla
- Löydä uusia työkaluja
Päivitykset
- update #318
Tailwind-värien luominen lisätty: luo 11 sävyä ja konfiguraatiokoodi yhdestä väristä
Suositut työkalut
187 ilmaista verkkotyökalua käytettävissä heti!