Miten värit valitaan
Työkalu luo kuvastasi pienen kopion, jonka pisin sivu on enintään 160 pikseliä, ja laskee jokaisen pikselin, joka ei ole läpinäkyvä. Sitten se ryhmittelee samankaltaiset pikselit yhteen k-means-klusteroinnilla ja raportoi kunkin ryhmän keskimääräisen värin, suurin ryhmä ensin. Kussakin värinäytteessä oleva prosentti kertoo, kuinka suuren osan kuvasta ryhmä kattaa.
Aloituskohta on kiinteä eikä satunnainen: se alkaa yleisimmästä väristä ja lisää sitten aina sen värin, joka on kauimpana jo mukana olevista. Näin sama kuva tuottaa joka kerta saman paletin, ja pieni kirkas korostus, kuten punainen logo valkoisella laatikolla, saa oman värinäytteensä sen sijaan että se sulautuisi keskiarvona taustaan.
Pyydä 5–8 väriä. Yksinkertaisella taustalla oleva tuotekuva tarvitsee yleensä 5 tai 6. Vilkas elämäntapakuva toimii paremmin 8:lla. Jos kuvassa on vähemmän erillisiä värejä kuin pyysit, työkalu kertoo siitä ja näyttää löytämänsä.
Kontrastimatriisin lukeminen
Jokainen väri yhdistetään jokaiseen toiseen väriin sekä puhtaaseen valkoiseen ja mustaan, ja kukin solu näyttää kontrastisuhteen rivin värisen tekstin ja sarakkeen värisen taustan välillä. Suhde noudattaa WCAG:n määritelmää: (L1 + 0.05) / (L2 + 0.05), missä L1 ja L2 ovat vaaleamman ja tummemman värin suhteellinen luminanssi. Se vaihtelee välillä 1:1 (sama väri kahdesti) ja 21:1 (musta valkoisella).
Merkinnät ovat WCAG:n asettamat raja-arvot:
- AA: vähintään 4.5:1 tavalliselle tekstille ja 3:1 suurelle tekstille (onnistumiskriteeri 1.4.3).
- AAA: vähintään 7:1 tavalliselle tekstille ja 4.5:1 suurelle tekstille (onnistumiskriteeri 1.4.6).
- Suuri teksti tarkoittaa vähintään 18 pistettä tai 14 pistettä lihavoituna (WCAG:n määritelmä suuresta koosta).
Solu, jossa lukee AA suuri, sopii isolle otsikolle mutta on liian haalea kuvatekstille. W3C:n selitys kriteeristä 1.4.3 toteaa myös, ettei suhdetta pidä pyöristää, joten 4.499:1 ei täytä arvoa 4.5:1. Työkalu arvioi tarkan luvun ja näyttää sen kahteen desimaaliin katkaistuna, ei koskaan ylöspäin pyöristettynä.
Laskettu esimerkki
Sanotaan, että kuvasta saa laivastonsinisen #1a3c6e ja kermanvärisen #fdf6e3. Laivastonsinisen suhteellinen luminanssi on noin 0.046 ja kermanvärisen noin 0.923. Suhde on (0.923 + 0.05) / (0.046 + 0.05), joka on näillä pyöristetyillä luvuilla noin 10.1:1 ja tarkoilla luvuilla 10.16:1. Se läpäisee AAA:n kaikelle tekstille, joten laivastonsininen teksti kermanvärisellä loppukortilla on turvallinen missä tahansa koossa. Laita sama kermanvärinen taustaksi keskisävyiselle oranssille kuten #e07a2e, ja suhde putoaa arvoon 2.78:1, joka ei läpäise edes suurta tekstiä. Säästä oranssi painikkeelle, jossa on musta teksti päällä (6.99:1, joka on AA mutta jää juuri AAA:sta), tai muodolle, jossa ei ole sanoja.
Viennin käyttäminen
CSS-vienti on :root-lohko mukautettuja ominaisuuksia, --color-1 kuvan suurimman osan kattavalle värille ja niin edelleen alaspäin. JSON sisältää kunkin värin hex-, RGB- ja HSL-arvot sekä sen osuuden kuvasta, mikä on helppo liittää suunnittelutoken-tiedostoon tai antaa skriptille. Nimeä muuttujat uudelleen, kun tiedät, mikä väri on tausta, mikä teksti ja mikä korostus.
Mitä tämä työkalu ei tee
Se ei tiedä, mitkä värit ovat brändisi. Kuva tuotteestasi puupöydällä sisältää myös pöydän. Rajaa kuva ensin tuotteeseen tai pakkaukseen, jos haluat vain niiden värit. Se ei myöskään voi kertoa tarkkoja painovärejä: luvut ovat tiedoston pikselit kameran ja mahdollisen muokkauksen jälkeen, joten tarkista ne brändioppaasi mukaan ennen julkaisua. Ja se arvioi vain tekstin kontrastin. WCAG:llä on erilliset säännöt kuvakkeille ja käyttöliittymän osille, joita tämä matriisi ei arvioi.
Jos et halua tehdä tätä käsin
Hermoso on markkinointia automaattiohjauksella: se tutkii markkinoillasi jo toimivat mainokset, tekee brändin mukaisia kuva- ja videomainoksia, ajastaa julkaisut ja pyörittää maksettuja kampanjoita omilla mainostileilläsi. Kun lisäät brändisi verkkosivustoltasi, se oppii tuotteesi, logosi ja palettisi, ja voit asettaa kuvatekstien ja loppukorttien värit hex-koodeilla. Se toimii selainsovelluksessa tai Claudessa, ChatGPT:ssä ja Cursorissa sen MCP-palvelimen kautta.
Ilmaiset työkalut: Sosiaalisen median kokojen opas · Instagram-ruudukkojen tekijä · Open Graph -generaattori
Usein kysytyt kysymykset
Miten saan väripaletin kuvasta?
Pudota kuva työkaluun ja valitse, montako väriä haluat, 5–8. Se ryhmittelee samankaltaiset pikselit ja näyttää kunkin ryhmän keskivärin HEX-, RGB- ja HSL-muodossa, suurin ensin, kullakin oma kopiointipainike.
Mitä kontrastisuhdetta tekstini tarvitsee?
WCAG 2.2 -tason AA vaatii vähintään 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. Taso AAA vaatii 7:1 ja 4,5:1. Suuri teksti on vähintään 18 pistettä tai 14 pistettä lihavoituna.
Onko 4,49:1 riittävän lähellä läpäistäkseen AA:n?
Ei. W3C:n mukaan laskettua suhdetta ei pidä pyöristää, kun sitä verrataan kynnysarvoon, joten 4,499:1 ei täytä 4,5:1-vaatimusta. Työkalu arvioi tarkan luvun.
Miksi saan saman paletin joka kerta?
Klusterointi alkaa kiinteästä pisteestä, yleisimmästä väristä, ja lisää sitten värin, joka on kauimpana jo valituista. Satunnaista aloitusta ei ole, joten yksi kuva antaa aina yhden vastauksen.
Ladataanko kuvani palvelimelle?
Ei. Se luetaan selaimesi omalla tiedostonlukijalla ja lasketaan canvasissa laitteellasi. Mitään ei lähetetä minnekään eikä tallenneta.
Hermoso tekee mainokset, ajastaa julkaisut ja pyörittää kampanjat. Aloita ilmaiseksi, yli 250 ansaittavaa ilmaista krediittiä, ei korttia.
Aloita ilmaiseksi → Katso hinnoittelu