www.webdesigntanfolyam.com

1. Színek
www.webdesigntanfolyam.com

2. “Egy nagyiparos társaságot hívott meg magához vacsorára.
Az érkező hölgyeket és urakat finom konyhai illatok fogadták, s már
mindenki előre örült az ínyenc falatoknak.
Amikor a vidám társaság körülülte a nagyszerűen elkészített
ételekkel rakott asztalt, a házigazda vörös fényt kapcsolt be.
Szép pirosra színeződött, és frissnek hatott a tányérokra kirakott
hús, a paraj azonban feketének tűnt, a krumplik pedig pirosan
világítottak.
Mindenki meghökkent, de a vörös fény máris kékre váltott, s ettől a
pecsenyék mintha oszlófélben, a krumplik mintha rothadtak lettek
volna.
A vendégek étvágya egyszeriben elment. Amikor erre még sárga fény
következett, s a vörösbor olyan lett, mint a sötét olaj, az emberek
pedig sárga félholtaknak látták a szomszédjukat, néhány érzékeny
hölgy felállt és kisietett az ebédlőből. Senki sem volt képes enni, bár
a jelenlévők mind tudták, hogy csak a megvilágítás színének változá-
sai okozzák e különös érzéseket.
Nevetve kapcsolta be a házigazda a fehér fényt, és nemsokára
helyreállt a vidám hangulat az asztal körül.”
Johannes Itten - A színek művészete

3. A színek
Az, hogy milyen alapon választunk színeket egy munkához elsősorban a saját ill.
a megrendelő döntéshozóinak ízlésvilágától fog függeni. Többnyire ez a jellemző
(sajnos).
Ez nem túl megalapozott választás, így már a kezdet kezdetén lemondunk az egyik
legfontosabb eszközünk adta előnyökről. Ahhoz, hogy tisztában legyünk vele, hogy
mik ezek, és esetleg érvelni is tudjunk miért ezeket választjuk, érdemes megvizs-
gálni a színeket közelebbről.
A színekről egy egész tudományág szól - a színtan, ill. színdinamika, amely min-
den területen megvizsgálja a színek szerepét, és hatását az életünkre. A színek a
vizuális kommunikáció alapkövei, amelyek rendkívüli módon hatnak az érzékekre.
Mi köze ennek a weboldalakhoz?
Nagyon is sok.
Ha egy színt bármely oknál fogva kiválasztunk, ahhoz különböző értéket,
jelentést, kiváltott érzelmeket is kapunk egy csomagban, úgyhogy egyáltalán nem
mindegy mit választunk.
Ahogy mindenben itt is vannak hagyományok un. konvenciók az egyes területeken
használandó színekben is.
Például a vállalati honlapokon jellemzően az acélkék, fehér, és grafitszürke színek
a jellemzőek, ezek stabilitást, megbízhatóságot, biztonságot, üzleti jelleget
sugároznak.
Egészséggel kapcsolatos weboldalak a természetesség, vitalitás jegyében sok
zöldet, napsárgát, és égkéket alkalmaznak, míg az éttermek egyik kedvence a
bordó, mélyvörös, csokoládébarna, és fekete - ezeken jól mutatnak az ételfotók,
kellemes, meleg, barátságos környezettel, és a jóllakottság érzésével
kecsegtetnek.
Még csak a színeknél tartunk, de máris üzeneteket közvetítünk egy non-verbális
csatornán.

4. A színkör
Isaac Newton termékeny ember volt, a dinamika, és a tehetetlenség törvényének
megalkotása mellett a fény tulajdonságait is vizsgálta, és még arra is volt ideje,
hogy 1666-ben elkészítse a színkört, amelyet azóta is használunk, és persze kidol-
gozza a hozzá tartozó színelméletet.
A színeket ez alapján 3 csoportba osztjuk:
elsődleges, másodlagos, és harmadlagos színek.
A három elsődleges szín a vörös, a kék és a sárga.
Ezek az alapszínek, az összes többi szín ezek
keveréséből jön létre. Ha ezekből bármely kettőt
összekeverjük, létrejönnek a másodlagos színek,
mint a zöld, a lila, és a
narancs.
A harmadlagos színek pedig az elsődleges és má-
sodlagos színek keverékei.
A színkör egymással szemben álló színei (piros-
zöld, sárga-kék, lilásvörös-sárgászöld, narancs-
vörös-kékeszöld, sárgásnarancs-liláskék)
a komplementer színek, amelyek nagyon jól kie-
gészítik egymást.
Kontrasztjuk akkor érvényesül igazán, ha az egyik
túlsúlyba kerül - kiemelésekhez használjuk őket.
Az egymáshoz közel álló, hasonló színek
színpárokat alkotnak.

5. A színek jelentése, hatásai
A színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen színeket
használnak egy orvosi rendelő várójában, és milyeneket egy bevásárlóközpontban?
A színek fokozhatnak, vagy akár csillapíthatnak is érzéseket, mint éhség, vágy,
feszültség, nyugalom. A színek oly mértékben befolyásolják érzelmeinket, hangu-
latunkat, hogy gyógyításra, kedélyállapot-javítására is használják őket.
» A meleg színek - a színkör egyik felén - a sárgától a liláig találhatóak - pl.
vörös, barna, rózsaszín...
» A hideg színek a kör másik fele - kék, zöld, cián, sötétlila stb.
» A fehér, szürke és fekete pedig semleges színek.
Az egyes színekhez különböző érzeteket, fogalmakat társítunk:
FEHÉR - egyszerű, tiszta, érintetlen
FEKETE - súlyos, nehéz, sötét, titkos, elegáns, drága, halál
PIROS - szerelem, szenvedély, veszély, figyelmeztetés, izgalom, az élelmiszer-,
impulzus, akció, kaland
KÉK - megbízhatóság, siker, komolyság, nyugalom, erő, szakszerűség, hatalom
SÁRGA - a kíváncsiság, játékosság, vidámság, szórakozás, irigység
LILA - igazságosság, luxus, fantázia, álmok, kétértelműség, bizonytalanság, öreg-
ség, vagyon
ZÖLD - pénz, a természet, állatok, egészségügy, gyógyítás, élet, harmónia, friss-
eség
RÓZSASZÍN - lágyság, édesség, ártatlanság, fiatalság, gyengédség
NARANCS - erő, energia, dominancia, boldogság, kényelem, kreativitás, ünneplés,
szórakozás, ifjúság, melegség
SZÜRKE - általánosság, közönyösség, fenntartás, visszafogottság, unalom
BARNA - föld, természet, lágyság, termékenység, kényelem, stabilitás

6. Ezek a mi kultúránkra jellemzőek - ha esetleg más országokból is akadnak
megrendelőink, a tervezés során.
Egy híres eset a McDonalds éttermek Japán piacra bevezetése. Ugyanis a híres
Ronald bohóc fehér arca az ő kultúrkörükben a halált jelképezi, ami egy egyébként
sem az egészségről elhíresült étteremláncnak hatalmas baklövés.
Sőt a zöld szín is egészen furcsa jelentéssel bír náluk - a nálunk elfogadott
természetességgel ellentétben a modern technológia, a high tech termékek színe.

7. Keltsd fel a figyelmet színekkel!
Figyelemfelkeltés szempontjából a színek sorrendje
narancssárga
piros
sárga
zöld
kék
lila
Azonosíthatóságukat tekintve a színek sorrendje
piros
zöld
sárga
fehér
kék
lila
A figyelmet legjobban a tiszta színek vonják magukra, a kevertek kevésbé
piros
kék
sárga

8. Színmódok - RGB, CMYK, és társaik
A különböző eszközökhöz különböző színrendszerek tartoznak - a webes tervezés
az RGB, vagyis a Red, Green, Blue rendszerre épül, mert a monitor a megjelenő
képet ebből a 3 színből rakja össze - un. additív összeadásos móddal.
Az RGB rendszerben a színek meghatározása egy un. hexadecimális kóddal
történik
pl. #RRGGBB
Egy-egy alapszínnek 256 féle árnyalatot adhatunk, így összesen ca. 16,7 millió
színárnyalattal gazdálkodhatunk.
A színek meghatározása két karakterrel és 16-os, azaz hexadecimális számrend-
szerben történik úgy, hogy egy karakter 0 – 9-ig illetve A – F-ig között vehet fel
értéket. így alapszínenként a két karakterrel kijön a 256 színárnyalat. A 0 a legsö-
tétebb, az F a legvilágosabb árnyalatot jelöli. A 00 00 00 tehát a feketét, az FF FF
FF a fehéret és például az FF 00 00 a vöröset jelöli.
A HTML kódban a hexadecimális színmeghatározások elé mindig egy
kettőskereszt # kerül.
A kék színünk tehát így fog kinézni: “#0000FF”
Webes tervezés esetén csak az RGB színmóddal dolgozunk, de jó ha tudsz róla,
hogy létezik másmilyen is. A CMYK - vagyis Cian+Magenta+Yellow+blacK a nyom-
tatásban használt 4 alapszínre bontást jelenti - un. szubszaktrív kivonásos. En-
nek következtében fordulhat elő, hogy a monitoron megjelenített képhez képest
nyomtatáskor más eredményt kapunk.
Magyarul ami bemegy a számítógépbe (szkenner, digitális fényképezőgép stb.) az
RGB, ami kijön belőle - nyomtatás, nyomdai kivitelezés - az CMYK.

9. Te jó ég! Hogy fogom én ezeket megjegyezni?
Először is, nem kell megjegyezned - a gyakran használtak úgyis rögzülnek - de az
összes grafikai programban megnézhető az adott szín hexa kódja. Az interneten
pedig csillió helyen, a legkülönfélébb táblázatokban lehet megtekinteni őket.
Pl: a Wikipédia szócikkében is, ahol további infókat olvashatsz még a témáról,
Színpaletták, színprofilok
A webdesigner egyik legjobb barátja a színpaletta, amelyeket ezekből a
hexaszínekből állíthatunk össze. A színpaletta határozza meg a megtervezendő
munka - legyen az logó, weboldal, vagy bármi más alapszíneit.
Ha egy projekthez megtaláltuk a megfelelő színpalettát - kis túlzással a munka
legnagyobb részét már elvégeztük, mert erre az alapra már-már magától épül fel.
Egy átlagos paletta 3-6 színből áll. Ennél több színnel ne tervezzünk, mert a túl
sok szín használata zavaros, a szemnek fárasztó eredményre vezet. Árnyalato-
kat természetesen használhatunk.

10. Míg a print designerek a méregdrága Pantone skálával rohangálnak, a webdesigner-
eknek csak egy WebSafe paletta jutott.
Web safe, azaz webbiztos színeknek azokat a színeket nevezzük, amelyek minden
megjelenítő eszközön ugyanazt a színt mutatják. Sajnos ez meglehetősen szűkös
skála, mindössze 216 színről tudjuk elmondani, hogy ugyanúgy fog megjelenni
minden monitoron, minden böngészőn - főleg, úgy, hogy ezek egyébként több mint
16 millió színárnyalat megjelenítésére képesek.
Most akkor csak a WebSafe paletta színei használhatóak?
Csúnya lenne, ha így lenne. Az említett 16 millió szín mind a rendelkezésünkre áll,
hallgatólagos beleegyezéssel az iránt, hogy nem lesz mindenhol egyformán szép,
de ugyebár a szépségért sok áldozatot meghozunk.
Színpalettákat tartalmaznak a képszerkesztő, és egyéb grafikus szoftverek is, mint
az Adobe Photoshop. Munka közben ezekből válogathatunk, de a sztenderd palet-
ták mellett saját, egyénileg összeállított palettákból is dolgozhatunk.
Rengeteg színpaletta készítő, generáló, pakolgató weboldal, szoftver létezik ma
már - az Adobe sajátja a Kuler

11. Az elkészített palettákat letölthetjük, és beimportálhatjuk a szoftvereikbe.
A mások által már létrehozott paletták között is rengeteg szép kollekciót találni.
Én személy szerint a Kuler helyet a ColourLovers weboldalát használom, ez inspirál
a legjobban. Csak kiválasztom, hogy Search Palettes, és esetleg beírok egy
kulcsszót pl. happy, és máris egy csomó vidám színpalettával kezdhetem a
gondolkodást, tervezgetést. Nálam mindig ez az első lépés. Lementem a legjobban
tetsző palettákat, úgy egy tucatot, amelyek között már ott van az, ami végül a
nyerő kombináció lesz.
Ez a kevésbé megalapozott, intuitív módszer -
mert tisztában vagyok a színérzékenységemmel.
Egy régi barátnőmmel volt egy játékunk - Milyen színű a hangulatod ma? - és
a válaszból a másik tudta hogy dumcsi, sírás, vagy ereszdel a hajam lesz az esti
program. Sokáig azt gondoltam, hogy mindenki tud színekben, színpalettákban
gondolkodni, de idővel rákellett jönnöm, hogy ez is olyan, mint az abszolút zenei
hallás. Fogalmakhoz, hangulatokhoz tudok azonnal színkombinációkat gyártani, de
egy megasztár hanggal lehet jobban jártam volna.

12. Nincs ilyen képességed?
Cseppet se bánkódj! Ahogy az énekhang, úgy a színérzékenység is fejleszthető, és
fejlesztened is kell!
Ha nem akarod magad a még esetleg nem kifejlődött színérzékedre bízni, akkor
“tudományos alapokon” is választhatsz színeket. Ehhez a Color Scheme Designer
a legjobb választás.
http://colorschemedesigner.com
Használata pofonegyszerű - a már ismert színkörből választja ki a kívánt
palettákat - csak jelöld be, hogy Mono, azaz monokróm - egy szín több árnyalata -
vagy esetleg Complement, azaz komplementer - egymásnak szemben álló,
kontrasztos palettában gondolkodsz például.
A Triad - Tetrad beállítások pedig harmadolós/negyedelős színsémát jelentenek, a
színek egymástól egyenlő távolságra vannak a színkörön, így hideg és meleg színek
egyaránt vannak a palettán.

13. Összkép szempontjából nagyon fontos tényező: a kontraszt.
A színeket úgy érdemes összeválogatni, hogy erős kontrasztot hozzanak létre, azaz
a domináns színek a színkör ellentétes tartományából - a hideg ill. meleg
tartományból kerüljenek ki.
Ez az oldal jó példa a komplementer színek egyszerű használatára.
Felhívja a figyelmet a narancs színnel, és egyben bizalmat, együttérzést ébreszt a
kékkel. A színek beszélnek, semmi extra. Egyszerű ez ugye?
A Color Scheme Designer további funkcióit is érdemes felfedezni - a Random
fülecske véletlenszerű megoldásokat kínál, a Colorspace fülön pedig Web Colors-ra
is átállíthatjuk, így a már említett webbiztos színekből generál csak színeket.
A további Pantone, ill. Ral beállítások webes szempontból nem érdekesek - nyom-
tatásba szánt dolgoknál használják őket.
Ami még érdekes viszont a Colorblind fülecske, amely a különböző színtlátási za-
varokra ajánl palettákat.

14. A színvakság és a színtévesztés a színlátás zavara az emberi szervezetben.
A színvakok és színtévesztők nem tudnak különbséget tenni olyan színek között,
amelyeket az egészséges emberek eltérőként érzékelnek. Jellemzően genetikai
okokra vezethető vissza, de előfordulhat szem-, ideg- vagy agykárosodás során és
vegyi hatásra is - írja a Wikipédia.
Drágám, melyik függönyt válasszuk a cikláment, vagy a püspöklilát? Esetleg a lime? Nem túl
világos?
Hö? A lime az egy gyümölcs, a zöld meg egy szín! - mondja erre a férfi.
Jellemzően a férfiak “fogyatékossága” ez, amellyel egyébként akkor is rendelkeznek, ha nincs
megállapítva róluk, hogy színvakok.
Egyszerűen kívül esik az érdeklődési területükön, hogy ilyesmivel foglalkozzanak - ez talán
ősemberes hozomány is - a vadászathoz nincs szükség a színek ilyen fokú megkülönböztetésére,
míg a bogyószedéshez elkél (a sötétpiros ehető, a narancssárgától viszont baromi büdös lesz a
barlangban éjjel).

15. Színkorlát
Ebbe előbb-utóbb bele kell törődünk, hogy a munkánk nem mindenhol ugyanolyan
nagyszerű megjelenéssel bír, és sajnos nem ez az egyetlen korlát, a betűtípusokkal
ugyanez lesz pepitában...
Ami azonban nehézkesebb sokszor, elmagyarázni a megrendelőnek, miért néz ki
másképp az irodai és az otthoni gépén az oldala...
Miért is?
Az internet színmegjelenítésének szabványa az sRGB, esetleg a szélesebb
spektumú Adobe RGB. Ezek azok a színprofilok, amelyeket a legtöbb monitoron
használnak, de a dologba belekavar a a monitorhoz gyárilag készített színkezelő
profil, sőt az egyes böngészők színkezelése, a felhasználói egyéni beállítások stb.
úgyhogy egy kordinálatlan katyvasz az egész.
Próbáld ki, hogy egy fotót küldj el másoknak, és nézd meg a barátaid gépén is - az
egyiken fakó lesz, a másikon szürkés, a harmadikon sötét...
Hogy megfelelő monitorbeállításaink legyenek (legalább nekünk), a monitor
kalibrálására van szükség, méghozzá a webes környezethez alkalmazkodva.
Miután egy ilyen kalibrációs eszköz pár-sok-százezer forintocska, egy kalibrációs
ábra is megteszi - kövesd a rajta lévő utasításokat.
Sosem látott részleteket fedezhetsz fel :)
http://fotozz.hu/fotot_megmutat?Foto_ID=88488
Természetesen ez még nem a tökéletes megoldás.
Ha bővebben érdekelnek a színprofilok, a monitor kalibráció, olvasd el ezeket a
cikkeket:
http://www.geeks.hu/tippektrukkok/080507_tft_monitor_kalibralasa_hazilag
2. részben következik: Színek a webdesignban