Hogyan választja ki a színeket
Az eszköz egy kis másolatot készít a képedről, amely a hosszabbik oldalán legfeljebb 160 pixel, és megszámol minden pixelt, ami nem átlátszó. Ezután k-means klaszterezéssel csoportosítja a hasonló pixeleket, és az egyes csoportok átlagos színét adja meg, a legnagyobb csoporttal kezdve. Az egyes színmintákon lévő százalék azt mutatja, hogy a kép mekkora részét fedi le az adott csoport.
A kiindulópont rögzített, nem véletlenszerű: a leggyakoribb színnel kezd, majd mindig azt a színt adja hozzá, amelyik a legtávolabb van a már meglévőktől. Így ugyanaz a kép mindig ugyanazt a palettát adja, és egy kis, élénk kiemelés, például egy piros logó egy fehér dobozon, saját színmintát kap, ahelyett hogy belesimulna a háttérbe.
Kérj 5-8 színt. Egy sima háttér előtt készült termékfotóhoz általában 5 vagy 6 elég. Egy zsúfolt életképes fotó jobban olvasható 8 színnel. Ha a képen kevesebb különböző szín van, mint amennyit kértél, az eszköz ezt jelzi, és azokat mutatja, amiket talált.
A kontrasztmátrix olvasása
Minden szín párosítva van az összes többivel, valamint a sima fehérrel és feketével, és minden cella megmutatja a kontrasztarányt a sor színével írt szöveghez az oszlop színű háttéren. Az arány a WCAG-definíciót követi: (L1 + 0,05) / (L2 + 0,05), ahol L1 és L2 a világosabb és a sötétebb szín relatív fénysűrűsége. 1:1-től (ugyanaz a szín kétszer) 21:1-ig terjed (fekete fehéren).
A címkék a WCAG által megadott küszöbértékek:
- AA: legalább 4,5:1 normál szöveghez és 3:1 nagy szöveghez (1.4.3 sikerkritérium).
- AAA: legalább 7:1 normál szöveghez és 4,5:1 nagy szöveghez (1.4.6 sikerkritérium).
- Nagy szöveg legalább 18 pontot, vagy 14 pont félkövéret jelent (a WCAG nagy méretű szövegre vonatkozó definíciója).
Egy AA nagy jelölésű cella megfelel egy nagy címsorhoz, de túl halvány egy felirathoz. A W3C 1.4.3-ról szóló magyarázata azt is kimondja, hogy az arányt nem szabad kerekíteni, tehát a 4,499:1 nem felel meg a 4,5:1-nek. Az eszköz a pontos számot értékeli, és két tizedesjegyre vágva mutatja, soha nem felfelé kerekítve.
Egy kidolgozott példa
Tegyük fel, hogy a fotó egy #1a3c6e tengerészkéket és egy #fdf6e3 krémszínt ad. A tengerészkék relatív fénysűrűsége körülbelül 0,046, a krémé pedig körülbelül 0,923. Az arány (0,923 + 0,05) / (0,046 + 0,05), ami a kerekített számokkal körülbelül 10,1:1, a pontosakkal pedig 10,16:1. Ez minden szöveghez megfelel az AAA-nak, így a tengerészkék szöveg egy krémszínű záró kártyán bármilyen méretben biztonságos. Tégy egy közepes narancsot, például #e07a2e-t ugyanarra a krémre, és az arány 2,78:1-re esik, ami még nagy szöveghez sem felel meg. Tartogasd a narancsot egy fekete szöveggel ellátott gombhoz (6,99:1, ami AA, de épphogy elmarad az AAA-tól), vagy egy szöveg nélküli alakzathoz.
Az exportálás használata
A CSS-export egy :root blokk egyéni tulajdonságokkal, --color-1 a kép legnagyobb részét lefedő színhez, és így tovább lefelé. A JSON tartalmazza minden szín hexadecimális, RGB és HSL értékét, valamint a képen belüli arányát, amit könnyű beilleszteni egy design token fájlba vagy átadni egy szkriptnek. Nevezd át a változókat, miután tudod, melyik szín a háttér, melyik a szöveg és melyik a kiemelés.
Mit nem csinál ez az eszköz
Nem tudja, mely színek tartoznak a márkádhoz. Egy fakeretű asztalon fekvő termékedről készült fotó tartalmazni fogja az asztalt is. Vágd körül a termékre vagy a csomagolásra, ha csak annak színeit szeretnéd. Pontos nyomtatási színeket sem tud megadni: a számok a fájlban lévő pixelek, a kamerád és az esetleges szerkesztés után, ezért publikálás előtt vesd össze őket a márkaútmutatóddal. És csak a szöveg kontrasztját értékeli. A WCAG külön szabályokat tartalmaz az ikonokhoz és a felhasználói felület elemeihez, amelyeket ez a mátrix nem osztályoz.
Ha inkább nem csinálnád ezt kézzel
A Hermoso a marketing robotpilótán: felkutatja a piacodon már működő hirdetéseket, márkahű kép- és videohirdetéseket készít, ütemezi a bejegyzéseket és fizetett kampányokat futtat a saját hirdetési fiókjaidon. Amikor hozzáadod a márkádat a weboldaladról, megtanulja a termékeidet, logódat és palettádat, és beállíthatod a feliratok és záró kártyák színeit hexadecimális kódokkal. Működik a webappban, vagy a Claude, ChatGPT és Cursor belsejében az MCP-szerverén keresztül.
Ingyenes eszközök: Közösségi média méretútmutató · Instagram rácskészítő · Open Graph generátor
Gyakran ismételt kérdések
Hogyan kaphatok színpalettát egy fotóból?
Dobd be a fotót az eszközbe, és válaszd ki, hány színt szeretnél, 5-től 8-ig. Csoportosítja a hasonló pixeleket, és megmutatja minden csoport átlagszínét HEX, RGB és HSL formátumban, a legnagyobbtól kezdve, mindegyiken másolás gombbal.
Milyen kontrasztarány kell a szöveghez?
A WCAG 2.2 AA szintje legalább 4,5:1-et kér a normál szöveghez és 3:1-et a nagy szöveghez. Az AAA szint 7:1-et és 4,5:1-et kér. A nagy szöveg legalább 18 pontos, vagy 14 pontos félkövér.
A 4,49:1 elég közel van ahhoz, hogy átmenjen az AA-n?
Nem. A W3C szerint a kiszámított arányt nem szabad kerekíteni, amikor egy küszöbhöz hasonlítod, így a 4,499:1 nem felel meg a 4,5:1-nek. Az eszköz a pontos számot bírálja el.
Miért kapom minden alkalommal ugyanazt a palettát?
A klaszterezés egy rögzített pontból, a leggyakoribb színből indul, majd azt a színt adja hozzá, amely a legtávolabb van a már kiválasztottaktól. Nincs véletlenszerű kezdés, így egy kép mindig egy választ ad.
Feltöltődik a képem?
Nem. A böngésződ saját fájlolvasója olvassa be, és egy vásznon számolja meg a gépeden. Semmit sem küldünk sehová, és semmit sem tárolunk.
A Hermoso elkészíti a hirdetéseket, ütemezi a posztokat és futtatja a kampányokat. Kezdd el ingyen, 250+ megszerezhető ingyenes kredit, kártya nélkül.
Kezdd ingyenesen → Árak megtekintése