A színek
döntenek helyetted.
Amit a színekről tudni kell akkor, ha nem te rakod ki őket egy programban, hanem szavakkal kéred meg rá az AI-t - és neked kell eldöntened, hogy jó-e, amit kaptál.
A színt előbb érzed, mint ahogy elolvasod a szöveget.
Johannes Itten leírt egy vacsorát, ahol a házigazda a lámpák színét cserélgette. Vörös fényben a hús frissnek látszott, a paraj feketének. Kékben a krumpli rothadtnak. Sárgában a vörösbor sötét olajnak, a szomszéd félholtnak. A vendégek pontosan tudták, hogy csak a megvilágítás változik - és mégis elment az étvágyuk.
Ez az egész színelmélet dióhéjban. Nem az a kérdés, hogy szép-e egy szín, hanem hogy mit tesz azzal, amit mellé teszel. Egy weboldalon ugyanez történik: a színek eldöntik, hogy a látogató komolyan vesz-e, megtalálja-e a gombot, és hogy egyáltalán marad-e.
Ha egy színt kiválasztasz, mellé kapod az összes jelentést, ami hozzá tartozik. Nem tudod külön kérni a színt a jelentése nélkül.
Newton 1666-ban megcsinálta. Azóta nem kellett újraírni.
hideg fél
Vörös, kék, sárga. Ezek keverékéből lesz a zöld, a lila, a narancs - és ezek keverékéből minden más.
Piros-zöld, sárga-kék, narancs-türkiz. A legerősebb kontrasztpár. Akkor működik, ha az egyik dominál és a másik csak kiemel - fele-fele arányban vibrál és fáj.
A színkörön szomszédos színek. Nyugodt, összetartozó felület. Ha nem akarsz mellélőni, ezzel indulj, és tegyél mellé egyetlen komplementer kiemelőszínt.
Ne színeket válassz. Szerepeket.
Egy szép, 3-6 színből álló paletta jó kezdés, de kevés. Egy weboldalon nem "szép színek" vannak, hanem funkciók: valami a papír, valami a tinta, valami a vonal, és pontosan egy dolog hívja fel magára a figyelmet.
Ha szerepekben adod meg a palettát, az AI is helyesen fogja használni. Ha csak öt hexkódot adsz neki, találomra fogja szétosztani őket - és a végén a gombod ugyanolyan színű lesz, mint a háttér.
A kiemelőszín az, ami megmutatja, hol lehet kattintani és mi az aktív. Ugyanezt hívják aktív színnek, fő színnek, kiemelt színnek, hangsúlyszínnek - és angolul accent color-nak, magyarosan akcentnek.
Az AI ezt a szót fogja használni, ezért ne lepődj meg rajta. Ha akarod, te is mondhatod így neki: accent: #96791c - érteni fogja. A fontos, hogy egy legyen belőle.
Minden színből kérj skálát.
A kiemelőszíned önmagában kevés. Kell egy nagyon halvány változata a hover-háttérhez, egy közepes a keretekhez, és egy sötét a szövegéhez. Ez nem hét külön szín: ez egy szín hét világosságban. Így marad összefüggő az oldal.
Ez az egy dolog, ami nem ízlés kérdése.
A kontraszt mérhető. Van rá nemzetközi szabvány (WCAG), és három szám, amit érdemes fejben tartani. Gyors ellenőrzéshez elég beírni két hexkódot a WebAIM kontrasztellenőrzőjébe:
Az AI nem fogja magától ellenőrizni. Kérd meg rá: Ellenőrizd a szöveg és a háttér kontrasztarányát minden párosításnál, és írd ki a számot.
60 / 30 / 10
A színek nem egyenlő arányban dolgoznak. Hatvan százalék a nyugodt alap, harminc a másodlagos felület és a szöveg, tíz a kiemelőszín. Ha a kiemelőszínből harminc lesz, elveszti az erejét: már nem mutat semerre, mert mindenhol ott van.
Ha minden ki van emelve, semmi nincs kiemelve.
Mit mondanak a színek a mi kultúránkban?
Ez a lista nem törvény, hanem tanult reflex - társadalmi és vallási szokásokból. Használható kiindulás, de nem helyettesíti a közönséged ismeretét.
Más piacon más a jelentés. A McDonald's a nyolcvanas években Japánban futott bele: Ronald fehér maszkos arca abban a kultúrkörben a halált idézte. Ha külföldre is dolgozol, kérdezz rá - az AI-tól is: Mit jelent ez a szín a célpiacomon?
Az iparágnak is van színe. Ismerd, aztán döntsd el, hogy követed-e.
A konvenció nem börtön: bizalmi rövidítés. Ha követed, a látogató fél másodperc alatt beazonosít. Ha szándékosan szembemész vele, észrevesznek - de akkor tudnod kell, miért teszed.
Acélkék, fehér, grafit. Stabilitás, komolyság, biztonság.
Zöld, napsárga, égkék. Természetesség, vitalitás.
Tinta, arany, krém. Kevés szín, sok üres hely.
Telített alapszínek, sok kontraszt, nagy formák.
A szín soha ne legyen az egyetlen jel.
A férfiak körülbelül minden tizenkettedike valamilyen színtévesztéssel él. Ők nem a színt nem látják, hanem a különbséget két szín között - jellemzően a piros és a zöld között. Ezért minden információt, amit színnel jelölsz, jelöld még valamivel: szöveggel, formával, ikonnal, pozícióval.
Gyors teszt bárhol: nézd meg a képernyőt szürkeárnyalatban (telefonon egy kép fekete-fehérré alakítása is elég). Ha úgy is érted, jó.
A sötét mód nem invertálás.
Ma alap elvárás, hogy legyen sötét változat. Három szabály: a háttér ne legyen tiszta fekete (hanem nagyon sötét, kicsit színezett), a szöveg ne legyen tiszta fehér, és az kiemelőszín színt világosítsd meg - a telített színek sötét háttéren vibrálni kezdenek.
RGB, HEX, oklch.
A képernyő vörös, zöld és kék fényből rakja össze a színt - ez az RGB. A weben ezt hexadecimális kóddal írjuk le: #96791c. Két karakter a vörös, kettő a zöld, kettő a kék, mindegyik 0-tól FF-ig, összesen 16,7 millió árnyalat. Ezt nem kell megjegyezni, minden program kiírja.
A böngészők ma már értik az oklch jelölést is, ami világosság, telítettség és színezet szerint írja le a színt. Ez az embernek is olvasható: ha a világosságot 0.62-ről 0.50-re veszed, a szín valóban egyenletesen sötétebb lesz. HEX-ben ezt nem lehet fejben csinálni. Ezért a skálákat érdemes oklch-ban kérni.
Képernyőre. Minden webes munkád ebben megy. Additív: a színek összeadódnak, a három együtt fehér.
Csak nyomdába. Kivonásos. Ezért lesz más a nyomtatott szórólap, mint a monitoron - ha nyomdába adsz, kérj CMYK verziót és próbanyomatot.
Hogyan kérj palettát úgy, hogy használható legyen?
A "csinálj egy szép palettát" eredménye mindig egy közepes lila-türkiz gradiens lesz. Négy dolgot adj meg: kinek, milyen érzést, milyen kényszerekkel, és milyen formában kérsz választ.
Iparág, közönség, ár-szint.
3-4 jelző. És amit nem akarsz.
Meglévő logószín, tiltott színek, kontraszt.
Szerepek, hexkód, magyarázat, arányszámok.
Ha inkább magad válogatnál, jó kiindulás az Adobe Color vagy a Coolors - onnan is átmásolhatod a hexkódokat az AI-nak.
Az AI mindig ad valamit. A te munkád eldönteni, hogy jó-e.
Ez a legfontosabb készség, amit meg kell tanulnod: gyorsan megítélni egy kész eredményt. Hat kérdés, fél perc.
Tedd el a hangulatot: paletta egy fotóból.
Egy jó fényképnek kész, működő színvilága van, mert a fény már megoldotta helyetted. Odaadod a fotót az AI-nak, és megkérdezed, milyen színekből áll. Ez a leggyorsabb út egy palettához, ami nem generikus - mert egy konkrét pillanatból származik.
A saját palettád, egy blokkban.
Ez az a néhány sor, amit érdemes elmenteni. Illeszd be a napi feladat elejére, és a Claude ehhez fogja tartani magát - nem kell újra elmagyaráznod.
Mielőtt kiadod a kezedből
A szín a leggyorsabb eszközöd. És a legkönnyebben elrontható.
Az AI másodperc alatt ad palettát. Attól lesz a tiéd, hogy tudod, mit kérj, és felismered, ha nem jó. Ezt a fejezetet nyugodtan olvasd el újra egy hónap múlva - máshol fog megakadni a szemed.