Transcript 03_farby

Farby
Ing. Marián Pecko, PhD.
Farba
 je vnem, ktorý je vytváraný viditeľným svetlom dopadajúcim
na sietnicu ľudského oka
 farebné videnie ľudského oka sprostredkovávajú receptory
(čapíky) troch druhov – citlivé na tri základné farby: červená,
zelená a modrá
 je viditeľná oblasť
elektromagnetického
žiarenia s vlnovými
dĺžkami 380-780 nm
(pod je ultrafialové a
nad je infračervené
svetlo)
farba
vlnová dĺžka [nm]
fialová
380-420
modrofialová
420-450
modrá
450-480
modrozelená
480-510
zelená
510-550
žltozelená
550-570
žltá
570-590
oranžová
590-600
oranžovočervená
600-630
červená
630-750
tmavočervená
750-780
Farebný model
 opisuje základné farby a schémy miešania týchto základných
farieb do výslednej farby
 farba je v prírode daná zmesou svetla rôznych vlnových
dĺžok a rôzne farebné modely sa snažia napodobniť farbu čo
najvernejšie
1. Farebný model RGB
 aditívny farebný systém založený
na fakte, že ľudské oko je citlivé
na tri farby
 ostatné farby sú dané sýtosťou
týchto farieb
 obmedzenia RGB:
 RGB je hardvérovo orientovaný –
predpokladá používanie CRT
 RGB nie je intuitívny – ľudia sa
môžu naučiť používať RGB, ale v
skutočnosti ide len o subjektívny
preklad odtieňu, sýtosti a svetlosti,
alebo niečoho podobného, do
RGB
2. Farebný model CMY(K)
 používa doplnkové farby k RGB
(subtraktívny farebný systém)
 azúrová (Cyan), purpurová
(Magenta), žltá (Yellow)
 lacnejšie je vyrobiť čiernu farbu
ako ju namiešať, preto sa pridáva
ešte čierna farba (blacK)
 obsiahne širokú škálu farieb,
ktoré vidí človek tým že
skombinuje farby CMY na bielom
podklade (preto nedokáže
namiešať hlbokú a neutrálnu
čiernu, i preto tam je dodatočná
farba K)
 používa sa pre tlač
3. Farebný model HSL
 hue-saturation-lightness (odtieň, sýtosť, svetlosť)
 výhody:
 je symetrický pre svetlosť a temnotu
 triviálna konverzia HSL na RGB
4. Ostatné farebné modely
 HSB – hue-saturation-brightness (odtieň, sýtosť, jas)
 YUV – slúži na zachovanie čiernobielej informácie pri TV
vysielaní
 čiernobiela zložka Y (svietivosť)
 farebnosť UV – odtieň medzi modrou a žltou U, odtieň medzi
červenou a žltou V
Vlastnosti farby
1. Vlastnosť color
 popisuje farbu textu prvku
 jeho hodnotu možno špecifikovať množstvom spôsobov
2. Vlastnosť opacity
 nepriehľadnosť
 operácia, ktorá nasleduje po spracovaní – až keď sa prvok
(aj s jeho potomkami) vykreslí do RGBA obrázku mimo
obrazovky, až potom nepriehľadnosť určí prelínanie tohto
vykreslenia do aktuálneho kompozitného vykreslenia
 hodnota je v rozsahu od 0.0 (úplne priehľadné) do 1.0 (úplne
nepriehľadné)
Jednotky farby
1. Základné kľúčové názvy farieb
názov
Hex rgb
decimálne
black
#000000
0,0,0
silver
#C0C0C0
192,192,192
gray
#808080
128,128,128
white
#FFFFFF
255,255,255
maroon
#800000
128,0,0
red
#FF0000
255,0,0
purple
#800080
128,0,128
fuchsia
#FF00FF
255,0,255
green
#008000
0,128,0
lime
#00FF00
0,255,0
olive
#808000
128,128,0
yellow
#FFFF00
255,255,0
navy
#000080
0,0,128
blue
#0000FF
0,0,255
teal
#008080
0,128,128
aqua
#00FFFF
0,255,255
2. Hodnoty RGB
 všetky hodnoty sú definované v sRGB farebnom priestore
1. hexadecimálny tvar
1.
2.
formát: znak „#“, po ktorom nasledujú 3 alebo 6
hexadecimálnych znakov (#rgb, #rrggbb)
skrátený zápis odstráni všetky závislosti na farebnej hĺbke
displeja
2. funkčný tvar
1.
2.
formát: „rgb(“, po ktorom nasleduje čiarkami oddelený zoznam
troch číselných hodnôt (môžu byť aj percentuálne hodnoty),
nasledované „)“
hodnote 255 zodpovedá 100%, F alebo FF
rgb(255,255,255) = rgb(100%,100%,100%) = #FFF
3. Hodnoty RGBA
 farebný model RGB je rozšírený tak, aby obsahoval alfa
kanál, ktorý definuje nepriehľadnosť farby
1. funkčný tvar
1.
2.
formát: „rgba(“, po ktorom nasleduje čiarkami oddelený
zoznam troch číselných hodnôt (môžu byť aj percentuálne
hodnoty), nasledované hodnotou alfa kanálu (viď. opacity),
nasledované „)“
hodnote 255 zodpovedá 100%, F alebo FF
rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8)
4. Kľúčový názov transparent
 úplne priehľadný
 toto slovo sa môže považovať ako za skratku pre priehľadnú
čiernu, rgba(0,0,0,0)
5. Hodnoty HSL
 formát: „hsl(“, po ktorom nasleduje čiarkami oddelený
zoznam troch číselných hodnôt, nasledované „)“
 odtieň – je uhlom vo farebnom kruhu, neudáva sa znak uhlu
 sýtosť, svetlosť – uvádzajú sa v percentách
hsl(0, 100%, 50%) – red
hsl(120, 100%, 50%) – lime
6. Hodnoty HSLA
 farebný model HSL je rozšírený tak, aby obsahoval alfa
kanál, ktorý definuje nepriehľadnosť farby
1. funkčný tvar
1.
2.
formát: „hsla(“, po ktorom nasleduje čiarkami oddelený
zoznam troch číselných hodnôt, nasledované hodnotou alfa
kanálu (viď. opacity), nasledované „)“
hodnote 255 zodpovedá 100%, F alebo FF
hsla(240, 100%, 50%, 0.5) – semitransparent solid blue
7. Rozšírené kľúčové názvy farieb
 X11 (X Window System) – grafický zobrazovací systém pre
rastrové zobrazovacie zariadenia
 je štandardom pre vytvorenie grafického používateľského
rozhrania v Unixe
 147 farieb
aliceblue, antiquewhite, aqua, aquamarine, azure, beige,...
Teória farieb
Rozdelenie farieb podľa teploty
1. teplé
 červená, žltá, oranžová
 vyvolávajú akciu a veselé emócie
 použitie – na stránkach, ktoré majú poskytnúť pocit šťastia a
radosti
2. studené
 modrá, zelená, fialová
 vzbudzujú pocit autority, inteligencie, rozvoja a dôvery
 použitie – na dosiahnutie profesionálneho firemného vzhľadu
Farebný kruh
 znázorňuje všetky viditeľné farby
 3 hlavné skupiny farieb:
1. primárne
 červená, modrá, žltá
2. sekundárne
 vznikajú kombináciou dvoch
primárnych farieb
 oranžová (žltá + červená), zelená (žltá
+ modrá), fialová (červená + modrá)
3. terciárne
 sú tvorené zmiešaním jednej primárnej
a jednej sekundárnej farby
Rozdelenie farieb podľa vzťahu
medzi sebou
 analogické
 na farebnom kruhu sú umiestnené hneď
vedľa seba
 dobre sa kombinujú
 neposkytujú dobrý kontrast
 komplementárne
 navzájom sa dopĺňajú
 na farebnom kruhu sú umiestnené
presne oproti sebe
 poskytujú dostatočný kontrast a živosť
stránky
 modrá + oranžová, fialová + žltá a
červená + zelená
Význam jednotlivých farieb
 väčšina farieb sa dá vnímať pozitívne i negatívne
 záleží i na jej odtieni a aké ďalšie farby ju obklopujú
farba
červená
oranžová
žltá
pohlavie
viditeľnosť
pútavosť
obľúbenosť
vysoká
vysoká
vysoká
muž
žena
asociácia
nebezpečenstvo, vzrušenie
teplo, intimita
muž
žena
vysoká
vysoká
nízka
zdravie
vysoká
vysoká
nízka
slnko
nízka
nízka
nízka
peniaze, zábava
vysoká
istota, inteligencia, ochrana
nízka
nízka
nízka
depresia, business, vodcovská farba
muž
žena
muž
zelená
žena
muž
modrá
čierna
žena
muž
žena
bohatstvo
nízka
nízka
vysoká
vysoká
nízka
nízka
čistota
nízka
pokoj, uvoľnenie, ženskosť
nízka
nízka
vysoká
liečivý účinok, ženskosť
muž
biela
ružová
žena
muž
žena
citlivosť
muž
hnedá
šedá
žena
nízka
nízka
vysoká
bohatstvo, zem
nízka
nízka
vysoká
ochrana
muž
žena
1. Červená
 patrí medzi energetické
teplé farby
 je symbolom ohňa, vášne a
sily
 pomáha stimulovať chuť do
jedla, energiu a vzrušenie
 prináša ale aj negatívne
pocity ako zlosť a hnev
2. Oranžová
 symbolizuje šťastie, radosť,
osvieženie, slnečný svit
 je to veselá farba, evokujúca
detskú neviazanosť
 stimuluje duševnú aktivitu
 reprezentuje ale aj
ignoranciu a podvod
3. Žltá
 svetlá žltá
 je veľmi veselá farba
 reprezentuje radosť,
inteligenciu, svetlo, energiu,
optimizmus a šťastie
 špinavá žltá
 vedie nás k opatrnosti,
kritike, lenivosti a žiarlivosti
4. Zelená
 symbolizuje prírodu, čistotu
a má hojivé účinky
 pôsobí ako symbol rastu,
harmónie, bezpečia
 je aj symbolom peňazí a
poukazuje na chamtivosť
alebo žiarlivosť
 môže byť symbolom
neskúsenosti
5. Modrá
 je upokojujúca farba
vyžarujúca stabilitu a
skúsenosť
 môže symbolizovať dôveru a
spoľahlivosť
 šedšie odtiene prinášajú
pocit chladu, depresie a
pasivity
6. Fialová
 je farba prepracovanosti,
poukazujúca na bohatstvo a
luxus
 podporuje zmysel pre
duchovnosť a tvorivosť
 jasnejšie odtiene
symbolizujú magickosť a
používa sa na podporu
kreativity a ženskosti
 tmavšie odtiene prinášajú
pocit pochmúrnosti a smútku
6. Čierna
 často sa spája s
výkonnosťou, eleganciou,
sofistikovanosťou a hĺbkou
 spája sa aj s negatívnymi
predstavami – so smrťou,
tajomstvom a niečím
neznámym
 je to farba smútku a musí
byť použitá s citom
7. Biela
 symbolizuje čistotu,
nevinnosť, nádej , slobodu a
bezpečnosť
 negatívne dojmy sú zima,
chlad a drsnosť
Farebná schéma
 je výber farieb, ktoré sa používajú v dizajne pre rad médií
 online nástroje
 https://kuler.adobe.com/
 http://colorschemedesigner.com/
 6 základných typov farebných schém – monochromatická,
analogická, doplnková, rozdelená doplnková, triadická a
tetradická
1. Monochromatická
 upokojujúca farebná
schéma
 používa jedinú farbu a jej
odtiene, nádychy a tóny
 vyjadruje harmóniu a
eleganciu
 na druhej strane nie je
dostatočne výrazná (v
dôsledku nízkeho kontrastu
farieb)
2. Analogická
 je tvorená farbami
bezprostredne susediacimi
na farebnom kruhu
 na to aby bola efektívna,
musí sa zvoliť jedna
dominantná farba, druhá
podporná a tretia, ktorá slúži
ako pútač a dodá stránke
výraz
 neodporúča sa používať
príliš veľa odtieňov a
kombinovať studené a teplé
farby
3. Doplnková
 vysoký kontrast
 používajú sa dve farby, ktoré
sa nachádzajú na opačnom
konci farebného kruhu
 odporúča sa vybrať jednu
dominantnú farbu (zvyčajne
pre pozadie) a druhú farbu
na zvýraznenie
najdôležitejších prvkov
 nemali by sa používať príliš
svetlé a pastelové farby
(stráca sa potrebný kontrast)
4. Rozdelená doplnková
 uľahčuje kontrast medzi
dvoma použitými farbami
pridaním tretej
 daná farba je doplnená
dvoma farbami na opačnom
konci farebného kruhu
(nakreslenie písmena Y v
kruhu)
5. Triadická
 skladá sa z troch farieb,
ktoré sú od seba vzdialené o
120° na farebnom kruhu
 schéma je silná a energická
 používa sa jedna hlavná
farba pre pozadie a dve
doplnkové na zvýraznenie
prvkov
 k takýmto stránkam sa
približujú najmä stránky pre
deti
6. Tetradická
 pozostáva z kombinácie
štyroch farieb, ktoré sú na
farebnom kruhu formované
do štvorca
 poskytuje najväčšie farebné
možnosti
 na druhej strane môžeme
ľahko narušiť farebnú
harmóniu
 treba byť opatrný pri výbere
farieb
Farbosleposť
Farbosleposť (daltonizmus)
 je porucha farebného videnia ľudského oka
 prejavuje sa neschopnosťou rozpoznávania určitých farieb,
zobrazením farieb v sivom nádychu a niekedy
svetloplachosťou
 príčiny sú vrodené, v ojedinelých prípadoch získané
 tyčinka – umožňuje vnímanie kontrastov
 čapík – umožňuje farebné videnie
Klasifikácia farbosleposti
1. podľa príčiny
a) monochromázia (celková farbosleposť)
 neschopnosť rozlišovať farby (vidí čiernobielo) spôsobená poruchou
alebo absenciou čapíka
 nastane, keď chýbajú dva alebo všetky tri čapíky
 tyčinková monochromázia (achromázia) – neprítomnosť alebo
nefunkčnosť čapíkov; mimoriadne vzácna; je spojená chorobným
strachom zo svetla (fotofóbia), mimovoľným zášklbom očí
(nystagmus)a zlým videním
 cerebrálna (bilaterálna, dvojstranná) achromázia
 (unilaterálny, jednostranná) hemiachromázia
 čapíková monochromázia – je prítomný iba jeden typ čapíkov; vzácna
normálne
hemiachromázia
cerebrálna achromázia
Klasifikácia farbosleposti
b) dichromázia
 jeden z troch čapíkov chýba alebo nefunguje
 protanopia – úplná absencia červených fotoreceptorov sietnice;
červená sa zobrazí ako čierna; človek vidí svetlo iba od 400-650 nm
 deuteranopia – úplná absencia zelených fotoreceptorov sietnice;
mierne ovplyvňuje schopnosť rozlišovať červeno-zelený odtieň
 tritanopia – úplná absencia modrých fotoreceptorov sietnice; veľmi
zriedkavá
normálne
protanopia
deutanopia
tritanopia
Klasifikácia farbosleposti
c) trichromázia
 bežný typ, pri ktorom jeden z
čapíkov má zmenenú
spektrálnu citlivosť
 protanomália – zmenená
spektrálna citlivosť červených
receptorov sietnice; mierne
ovplyvňuje schopnosť
rozlišovať červeno-zelený
odtieň
 deuteranomália – zmenená
spektrálna citlivosť zelených
receptorov sietnice;
najčastejší druh farbosleposti
 tritanomália – zmenená
spektrálna citlivosť modrých
receptorov sietnice;
ovplyvňuje schopnosť
rozlišovať modro-žltý odtieň;
vzácna
normálne
protonamália
deuteranomália
tritanomália
Klasifikácia farbosleposti
2. podľa klinického výskytu
 celková farbosleposť
 čiastočná farbosleposť
 červeno-zelená
 dichromázia (protanopia a deuteranopia)
 anomálna trichromázia (protanomália a deuteranomália)
 modro-žltá
 dichromázia (tritanopia)
 anomálna trichromázia (tritanomália)
Farby z pohľadu prístupnosti
Jas

Kontrastný pomer

Kontrastný pomer - WCAG
 Kritériá úspechu
 1.4.3 Minimálny kontrast (Level AA)
 text je menší ako 18pt ak nie je tučné alebo menší ako 14p ak je tučné
– kontrastný pomer je min. 4,5:1
 text má aspoň 18pt ak nie je tučné alebo aspoň 14p ak je tučné –
kontrastný pomer je min. 3:1
 1.4.6 Zvýšený kontrast (Level AAA)
 text je menší ako 18pt ak nie je tučné alebo menší ako 14p ak je tučné
– kontrastný pomer je min. 7:1
 text má aspoň 18pt ak nie je tučné alebo aspoň 14p ak je tučné –
kontrastný pomer je min. 4,5:1
Nástroje
 http://www.colorsontheweb.com/colorcontrast.asp
 Color Contrast Analyzer
 http://www.stainlessvision.com/blog/projects/colour-contrastvisualiser
 Color Contrast Visualiser
 http://colororacle.org/
 Color Oracle – dichromázia
Ďakujem za pozornosť