Color Palette skannaa jokaisen elementin verkkosivulla ja poimii kaikki käytetyt värit — tekstistä ja taustoista reunuksiin, varjoihin ja korosteisiin. Värit näytetään visuaalisina värimalleina käyttöfrekvenssin mukaan järjestettynä (eniten käytetty ensin), ja kukin malli näyttää HEX-arvon sekä käyttökertojen määrän. Klikkaa mitä tahansa mallia kopioidaksesi sen, tai vie koko paletti värikoodilistana.
Jokaisella hyvin suunnitellulla verkkosivustolla on johdonmukainen väripaletti — yleensä 3–8 pääväriä sekä muutamia neutraaleja sävyjä. Color Palette poimii tämän paletin automaattisesti skannaamalla jokaisen elementin lasketut color-, background-color-, border-color- ja box-shadow-arvot. Tuloksena on käyttöfrekvenssin mukaan lajiteltu kokoelma kaikista sivun väreistä, joka antaa täydellisen kuvan sivuston värijärjestelmästä. Hallitsevat värit — brändin pääväri, taustaväri ja tekstiväri — näkyvät ensin suurilla käyttömäärillä. Korostevärit ja yksittäistapaukset näkyvät alempana. Tämä on korvaamaton työkalu suunnittelututkimuksessa — vieraile millä tahansa sivustolla ja poimi sen tarkka väripaletti sekunneissa. Se on hyödyllinen myös oman sivuston auditointiin: onko sivulla irrallisia värejä, jotka eivät kuulu suunnittelujärjestelmään? Käytätkö viittä hieman erilaista harmaan sävyä, vaikka suunnitteluspesifikaatio määrittelee vain kolme? Color Palette tekee koko värien käytön näkyväksi ja laskettavaksi.
Skannaa jokaisen näkyvän elementin sivulla ja poimii värit lasketuista ominaisuuksista: color, background-color, border-color, box-shadow-väri, outline-color ja text-decoration-color. Kaikki sivulla käytetyt värit tallennetaan.
Värit lajitellaan käyttökertojen mukaan — eniten käytetty väri näkyy ensin. Hallitsevat brändivärit ja taustat nousevat kärkeen, kun taas yksittäiset korostevärit jäävät loppuun. Näet sivun pää-, toisio- ja korostevärit välittömästi.
Jokainen väri esitetään suurena visuaalisena värimallina, jonka alla näkyy HEX-koodi ja käyttömäärä. Mallit ovat riittävän suuria hienovaraisten sävy-erojen erottamiseen (kuten #333 vs #2a2a2a).
Klikkaa mitä tahansa värimallia kopioidaksesi sen HEX-arvon leikepöydälle välittömästi. Väripaneelia tai erillistä valintaikkunaa ei tarvita — yksi klikkaus, kopioitu, valmis.
Klikkaa "Vie kaikki" kopioidaksesi koko paletin muotoiltuna listana HEX-värikoodeista. Liitä suunnittelutyökaluun, CSS-muuttujatiedostoon tai väridokumentaatioon. Lista säilyttää frekvenssilajittelun järjestyksen.
Värit normalisoidaan (saman värin RGB- ja HEX-esitykset yhdistetään) ja deduplikoidaan. Paletti näyttää vain uniikit värit yhdistettyine käyttömäärineen kaikille samaa väriä tarkoittaville esitystavoille.
Vieraile kauniiden värimaailmojen verkkosivuilla ja poimi niiden tarkka paletti. Käytä värejä lähtökohtana omalle suunnittelullesi — tai dokumentoi yksinkertaisesti, mitkä väriyhdistelmät toimivat hyvin yhdessä.
Aja Color Palette omalla sivustollasi varmistaaksesi brändivärien johdonmukaisuuden. Onko neljä hieman erilaista sinistä, vaikka pitäisi olla yksi? Hiipuuko sivuille brändin ulkopuolisia värejä? Frekvenssilajittelu tekee epäjohdonmukaisuudet ilmeisiksi.
Vie paletti ja muunna se CSS-mukautetuiksi ominaisuuksiksi (--color-primary, --color-secondary jne.). Frekvenssin mukaan lajiteltu tulos kertoo, mitkä värit ansaitsevat pää-, toisio- ja korosteroolin.
Poimi väripaletteja kilpailijoiden verkkosivuilta ymmärtääksesi heidän brändiasemointiaan. Lämpimät vai viileät värit, korkea kontrasti vai vaimea — paletti paljastaa tahalliset suunnitteluvalinnat.
Näe kaikki tekstivärit taustavärien rinnalla. Onko joissain teksti–tausta-yhdistelmissä liian matala kontrasti? Paletti antaa koko värijoukon tarkistettavaksi WCAG-kontrastivaatimusten suhteen.
Avaa DevSuite Pro -kelluva telakka ja klikkaa Color Palette -kuvaketta. Työkalu skannaa jokaisen elementin sivulla ja poimii kaikki väriarvot.
Näytölle ilmestyy ruudukko värimalleista käyttöfrekvenssin mukaan järjestettynä. Eniten käytetyt värit ovat ylhäällä. Jokainen malli näyttää HEX-koodin ja kyseistä väriä käyttävien elementtien määrän.
Klikkaa mitä tahansa värimallia kopioidaksesi sen HEX-arvon leikepöydälle. Lyhyt vahvistusviesti ilmestyy.
Klikkaa "Vie kaikki" kopioidaksesi jokaisen värin muotoiltuna listana. Liitä CSS-muuttujatiedostoon, suunnittelutyökaluun tai dokumentaatioon.
Siirry sivuston eri sivuille ja poimi paletteja varmistaaksesi värien johdonmukaisuuden koko sivustolla.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
