Ha emlékeztek még januárban, az egyik célom 2013-ra az volt, hogy többet tanuljak a színekről, és megosszam veletek, amit tanultam. Korábban már beszéltem arról, hogy úgy érzem, hogy a színekkel dolgozó készségeim hiányoznak, és azt mondtam, hogy valamikor ebben az évben megragadok néhány könyvet a színekről abban a reményben, hogy ez megváltozik.
Egy születésnap, egy kissé nagylelkű testvér és az Amazon minőségi szolgáltatása később, és egy válogatott könyv (köztük néhány kifejezetten a színekről szóló) itt várakozik arra, hogy elolvassam. Köszönöm David.
Befejeztem az egyik színkönyv, a Design Elements: Color Fundamentals, és gondoltam, elkezdem megosztani. Szeretném azzal kezdeni, hogy hogyan írjuk le a színeket részben azért, mert ez a kezdet, részben pedig azért, mert ez vezetett némi tisztánlátáshoz abban, hogy hogyan értem a színeket.
How We Describe Color
Egy szín leírásának 3 elsődleges módja van, és mivel a könyv ezt is hozzáadta, egy 4. módot is hozzáadok a szín leírásához.
- Árnyalat – egy másik szó a színre
- Telítettség (chroma) – egy árnyalat intenzitása vagy tisztasága
- Világosság (érték) – a fekete vagy fehér relatív mértéke egy adott árnyalattal keverve
- Hőmérséklet – egy szín érzékelt melegsége vagy hidegsége
Mélyedjünk el egy kicsit mindegyikben.
A színárnyalatok színek, és az, hogy milyen árnyalatot látunk, a visszavert vagy előállított fény hullámhosszától függ. Kétlem, hogy el kell mondanom, mi a szín, és mivel a szín és az árnyalat szinonimák, neked is tudnod kell, mi az árnyalat. Egy dolog, amire emlékeztetni fogom Önöket, hogy mindannyian másképp érzékeljük a színeket. Az árnyalat, amit te látsz, nem biztos, hogy ugyanaz az árnyalat, amit én látok.
A telítettség arra utal, hogy egy adott árnyalat mennyire tiszta vagy intenzív. A 100%-os telítettség azt jelenti, hogy nincs szürke hozzáadása az árnyalathoz. A szín teljesen tiszta. A másik végletben egy 0%-os telítettségű árnyalat középszürkének tűnik. Minél telítettebb (minél közelebb van a 100%-hoz) egy szín, annál élénkebbnek vagy világosabbnak tűnik. A telítetlen színek viszont tompábbnak tűnnek.
Az, hogy egy árnyalat mennyire telítettnek tűnik, bizonyos mértékig attól is függ, hogy milyen színek mellett van. Egy 50%-kal telített színárnyalat egy 25%-kal telített színárnyalat mellett élénkebbnek fog tűnni, mintha ugyanez az árnyalat egy 75%-kal telített színárnyalat mellett lenne.
A fényesség azt méri, hogy egy adott színárnyalattal milyen arányban keveredik a fekete vagy a fehér. A fehér hozzáadása világosabbá teszi a színt (árnyalatokat hoz létre), a fekete hozzáadása pedig sötétebbé teszi (árnyalatokat hoz létre). A világosság vagy az érték hatása a kompozíció más értékeihez képest relatív. Egy színt világosabbá tehetünk, ha egy sötétebb szín mellé helyezzük.
Minél nagyobb az elemek közötti értékkülönbség, annál nagyobb a kontraszt közöttük. Emiatt a világosság jó módszer a kontraszt megjelenítésére és az elemek közötti hierarchia jelzésére. A világosság körülbelül 7 fokozata a maximális eltérés, amelyet az emberi szem érzékelni képes. Ezen túl már nehéz megkülönböztetni a különbségeket.
A hőmérséklet egy szín érzékelt melegsége vagy hűvössége. A meleg színek a vörös, a narancs és a sárga, míg a hideg színek a zöld, a kék és az ibolya. Valahol a zöld és az ibolyántúli spektrumban a hőmérséklet a meleg és a hideg között változik.
Az, ahogyan a szem a színhőmérsékletet felismeri, a fényforrástól függően változhat. Például a számítógép-monitor tényleges hőmérséklete befolyásolhatja az érzékelt színhőmérsékletet.
A melegebb színek hajlamosak a kompozíció előterébe előretörni, míg a hidegebb színek a háttérbe húzódnak. A telítettséghez és a világossághoz hasonlóan a hőmérséklet is lehet relatív. Ha egy meleg színt egy melegebb színnel szemben helyezünk el, a kiinduló szín hűvösebbnek fog tűnni, mintha egy hideg színnel szemben helyeznénk el.
Színharmónia
A színekkel való munka során célunk, hogy kellemes színkombinációkból álló palettát válasszunk (kivéve azokat az eseteket, amikor egy kellemetlen kombináció jobban kiegészíti az üzenetet). Megpróbálunk valamiféle színharmóniát elérni.
A színharmónia szubjektív lehet. Ami a te szemednek megfelel, az az enyémnek nem biztos, hogy megfelel. A színelmélet elveinek célja, hogy csökkentsék a szubjektivitást azáltal, hogy olyan irányelveket kínálnak, amelyek segítenek megtalálni a színek olyan párosításait és csoportosításait, amelyek nagyobb valószínűséggel működnek jól.
Az egyik fő elv például azt tartja, hogy a szem mindig egyensúlyt és kiegyensúlyozottságot keres a színekben, ami arra készteti, hogy semleges kombinációkhoz jusson, például amikor egy árnyalatot az ellentétével vagy kiegészítőjével kombinálunk. Ez az egyik oka annak, hogy gyakran más színű (de azonos telítettségű és világosságú) utóképeket látunk, ha túl sokáig bámulunk egy színt.
A színelmélet nem mindig vezet kiszámítható eredményekhez. Néha az elmélet és a gyakorlat nem igazán passzol egymáshoz, ami azt jelenti, hogy fejlesztenünk kell a színszemünket, és kísérleteznünk kell az árnyalat, a telítettség és a világosság különböző kombinációival.
A színelmélet és a színgyakorlat közötti szakadék
Mint már említettem, valami kattant számomra a Color Fundamentals elolvasása közben. A színeket színárnyalattal, telítettséggel és világossággal (HSL) írjuk le, mégis a színértékeket a weben jellemzően hexaértékek és kisebb mértékben RGB-értékek segítségével állítjuk be. Nem lenne több értelme a színeket jobban leíró rendszerrel dolgozni?
Figyelem: A HSL nem azonos a legtöbb színkezelő eszközben található HSB (hue, saturation, brightness) vagy HSV (hue, saturation, value) értékekkel.
A hex és az RGB valójában ugyanannak a dolognak két változata. Mindkettő 256 lehetséges értéket ad meg arra vonatkozóan, hogy mennyi vörös, zöld vagy kék van egy adott színben. A HSL másképp működik. Nincs egyszerű módja annak, hogy egy pillantást vessünk egy olyan dologra, mint az rgb(63, 69, 146) vagy annak hexa megfelelője #3f4592, és könnyen megtudjuk, hogy 40%-os telítettségű vagy hsl(236, 40, 41).
Ha szeretné látni az átalakításhoz szükséges matematikát, nézze meg az alábbi linkek bármelyikét vagy mindegyikét
- Színalgoritmusok
- RGB-ről HSL színkonverzióra
- HSL-ről RGB színkonverzióra
Miért van ez? Miért van különbség abban, hogy hogyan próbáljuk megérteni a színeket és hogyan próbáljuk használni őket? Ha valami, akkor a HSL az intuitívabb rendszer, mivel ténylegesen leírja az általunk látott színeket, és illeszkedik a színelmélethez.
Rájöttem, hogy a színtudás a színekkel kapcsolatos kritikus szem kifejlesztéséből és a kérdések feltevéséből ered, hogy valami miért működik vagy nem működik. És ezeknek a kérdéseknek a megválaszolásáról szól, miközben megfigyeled a színeket magad körül.
Egyszerűen úgy tűnik, hogy könnyebb lenne, ha az elmélet és a gyakorlat ugyanazt a nyelvet beszélné. Most, hogy erre a felismerésre jutottam, úgy döntöttem, hogy elkötelezem magam amellett, hogy a HSL-értékeket a lehető legtöbbször használom a kódomban. A buktatót az IE8 és az alattiak jelentik, amelyek nem fogadják el a hsl() vagy az rgb() funkciót. Nekik hexadecimális értékekre van szükségük. De ez rendben van, mivel a SASS el tudja végezni a konverziót. Használhatod a hsl()-t a SASS-ben, és a html kimenet egy hexadecimális érték lesz.
Az elkötelezettségemmel együtt elkezdtem egy egyszerű színkezelő eszközt építeni, hogy segítsen a tanulásban és a tanulásban. Ez nem olyasmi, amit a jelenlegi állapotában színpaletta kiválasztására akarsz használni, de lehetővé teszi, hogy játszadozz a színárnyalattal, telítettséggel és világossági értékekkel, hogy lásd, hogyan hat mindegyik egy adott színre és a körülötte lévő színekre. Az eszközt később a héten megosztom.
Egy ideje már gyanítom, hogy a színek közötti matematikai összefüggések útmutatást nyújthatnak a velük való munkához, és gyakran kerestem ezeket az összefüggéseket a színek hexaértékeiben. Remélem, hogy a hsl()-t többet használva és az egyszerű színeszközömmel játszadozva segítenek majd abban, hogy az elméletet egy kicsit jobban összekapcsoljam a tervezés során használt színekkel, mint ahogyan azok most összekapcsolódnak.
Tartsd szem előtt ezt az összefüggést abban, ahogyan a színekről tanulunk és leírjuk őket, és ahogyan használjuk őket. Ez a felismerés nagyobb megértést adott nekem ahhoz, hogyan tanulmányozhatom jobban a színeket, és ezért akartam ezt a beszélgetést a színek leírásának alapjaival kezdeni. Hamarosan több bejegyzésem is lesz a színekről, kezdve a hét későbbi részében, amikor arról az egyszerű eszközről beszélek, amelyet segítségül hoztam létre.
Töltsön le egy ingyenes mintát a Design alapjai című könyvemből.