Warna
You don’t always need it
You don’t always need it • Variasi kecerahan (brightness/ shades of grey) sudah mencukupi • Manusia secara sempurna dapat mengenali suatu obyek meskipun tidak berwarna • Beberapa keuntungan image tanpa warna – Ukuran file lebih kecil – Relatif sama jika ditampilkan pada segala media keluaran
• Jika digunakan secara efektif, sangat berguna
Warna • Warna adalah efek cahaya yang dipantulkan oleh benda ke mata kita • Obyek tampak berwarna karena kemampuan mereka untuk memantulkan, menyerap atau meneruskan cahaya
Persepsi
Spectral Power Distribution • Pengukuran kuantitas warna secara fisik • Panjang gelombang yang hanya dapat dilihat antara 400nm dan 700 nm
Model Warna • Agar warna dapat diproses secara elektronik/digital diperlukan model warna • Model warna ditujukan agar sensasi subyektif dapat diukur dan dapat diproduksi kembali untuk menghasilkan fenomena fisik warna
cones
rods
horizontal
bipolar
amacrine ganglion
light
Persepsi Warna • Struktur mata – Dua sel reseptor • Rods (sel batang) • Cones (sel kerucut)
• Cones memiliki 3 jenis, yang merespon panjang gelombang cahaya yang berbeda
Trisitimulus Theory • Sembarang warna dapat dispesifikasikan hanya dengan tiga nilai, dengan memberikan bobot pada setiap komponen • Sering disimpulkan (secara tidak akurat) sebagai respon tiap sel kerucut terhadap cahaya merah, hijau dan biru
Model Warna RGB • Mana yang disebut sebagai Red, Green, Blue? • Tidak ada standar yang secara universal diterima – ITU-R BT.709
• Tidak mungkin merepresentasikan seluruh warna di alam dengan model RGB
RGB • RGB additive primary colours – Berbeda dengan artist’s primary colours
• Layar televisi & CRT monitor dibuat dari tiga jenis fosfor & tiga jenis electron beam • Untuk produksi warna hanya memainkan intensitas electron beam
Model Warna RGB • Secara praktis, mayoritas warna yang ada di alam berada pada RGB Gamut • RGB useful, simple, efficient • Ditulis dalam format : (r,g,b) • Masing-masing komponen bernilai bebas
RGB Image 111
14
36
126
36 111 36 200 36 1712 11136 200 14 200 111 1414 36126 1217 128 36126 36200 12 36111 17111 111 1414
12
36
12 17 3636 12 36111 14
111 36 111 36
14 126
36 17 126 36 1736 126 14127236 72200 17 36111 12 126126 17 200 126 3617 12111 36200 12 126 200 7236 1212 17126 111 17 14 36 200 111 14 36 72
36
12
10 17 12
17
72
106
36
155 10 200 111 17 200 36 12 36 17 14 17 14 126 200 17 36 72 12
128 36 14 36 111 111 17 36 111 200 126 36 200 36 111 12 12 126
126 12 126 36 14 36 126 111 200 36 72 12 111 12 14 17 17 200
200 36 36 14 126 12 17 36 36 12 126 36 14 36 126 72 111 36
12 111 14 36 12 36 36 72 17 111 17 111 111 200 14 36 36 12 126 17 17 111 14 36 36 72 12 126 17 111 106 14 155 36 36 12
CMY Color Model • Cyan (C), Magenta (M), Yellow (Y), Black (K) • W = White • C=G+B=W–R • M=R+B=W–G • Y=R+G=W–B • Subtractive
• untuk tinta dan percetakan
CMY
CMYK = Cyan, Magenta, Yellow, blacK
transmit
CMYK Color Model Cyan – removes Red
B
G
R
Magenta – removes Green
B
G
R
Yellow – removes Blue
B
G
R
Black – removes all
Contoh: red = magenta + yellow
B
G
R
magenta
+
B
G
R
B
G
R
yellow = red B
G
R
R
CMY + Black C + M + Y = K (black) • Menggunakan tiga warna untuk Black sangat mahal • C+M+Y = dark brown bukan black • Black bukan dari C+M+Y lebih kontras dan tajam
= 100 C
50 M
70 Y
+ 50 K
50 C
0 M
20 Y
RGB & CMYK
Additive (RGB)
Subtractive (CMYK)
dari RGB ke CMY C 1 R M = 1 − G Y 1 B
R 1 C G = 1 − M B 1 Y
Ruang/Model Warna • • • • •
Linear (RGB, CMYK) Artistic View (Munsell, HSV, HLS) Standard (CIE-XYZ) Perceptual (LUV, Lab) Opponent (YIQ, YUV) – used in TV
The Artist Point of View • Hue – Warna yang kita lihat (red, green, purple) • Saturation – Seberapa jauh warna dari abu-abu. (pink kurang tersaturasi dibandingkan red) • Brightness/Lightness (Luminance) – Seberapa bright sebuah warna
white
Color Wheel • Dengan memutar seluruh warna 360o didapatkan magenta • Diukur dengan satuan derajat (0360) • Karena semua cahaya berkumpul di tengah maka terbentuk warna putih
HSV/HSB Color Space
HSV = Hue Saturation Value HSB = Hue Saturation Brightness
Saturation Scale
Brightness Scale
HSV
Saturation
Hue
Value
HLS Color Space HLS = Hue Lightness Saturation V
green 120°
cyan
yellow
red 0°
0.5
Blue 240°
magenta
H
0.0 black
S
Lab • L*a*b* (Lab) model • Luminance =100 (white) • Green to red component • Blue to yellow component • Luminance = 0 (black)
Color Depth • Jumlah bit yang digunakan untuk mewakili satu nilai warna • RGB Color biasanya ditampilkan dalam 24 bits (3 bytes atau 8 bits tiap warna) • contoh (255, 255, 255) putih
Kedalaman Warna • Umumnya 3 byte (24 bit) – Millions of colours (16,777,216) – True colour
• 16 bit (5,6,5) – Karena mata manusia lebih sensitif terhadap cahaya hijau – Thousands of colours (65,536) – hi colour
3 bits, 12 KB
16 bits, 18 KB
Indexed Colour • • • •
>< Direct colour Menggunakan lookup table CLUT (color look up table) Dithering
Palette • Memetakan warna fisik ke dalam warna logik • Palet yang terdiri dari 256 warna lebih disukai • Web-safe palette – 216 color • Dapat mengkonfigurasi palet sendiri – Contoh : – Munsell – Pantone
Munsell Color System Hue:
R, YR, Y, GY, G, BG, B, PB, P, RP (dibagi sepersepuluh) Value: 0 ... 10 (dark ... pure white) Chroma: 0 ... 20 (neutral ... saturated) Example: 5YR 8/4
Munsell Book of Colors
Munsell Book of Colors
Isu Buta warna • 1 dari 12 lelaki • Akibat sel kerucut yang sedikit berbeda • Gunakan warna terang terhadap warna gelap
•
Efek warna dalam desain • Bentuk dulu baru warna • pastikan bentuk dikenali lebih dahulu sebelum ditambahkan warna • Gubahkan warna yang senada untuk membuat hubungan antara produk dengan pesan yang disampaikan • Gunakan untuk hubungan antara produk dengan logo
• Gunakan warna untuk membuat hierarki informasi • Jangan gunakan drop shadows kecuali memang diperlukan (hanya menekankan produk/judul) • Seimbangkan antara image dengan teks
Mendapatkan palet warna • Kembali ke alam
Apakah warna sangat berpengaruh? • Riset membuktikan bahwa seseorang membuat keputusan cepat tentang sebuah benda dalam 90 detik berdasarkan faktor penglihatan dan 62%90%nya berdasarkan hanya pada warna
Atur warna sesuai ‘mood’
seragamkan
Cool Two Color
Tips • Batasi warna palet tidak lebih dari tiga untuk mengurangi visual clutter. • Gunakan warna yang cocok sesuai tema • Gunakan warna yang ditemukan di foto kunci/grafik dalam halaman untuk menambakan harmoni • Jauhi harsh oversaturated colors. • Desaturarsi warna untuk mengaproksimasi warna yang ada di alam dan tekstil
Monochromatic – Memakai gradasi saturasi – harmonious & peaceful. – Membentuk keseragaman dan pengikatan
Analogous – Memakai warna yang berhubungan tapi tidak sama – Biru dan ungu, merah & oranye – Ada sebagai dominan dan sebagai aksen
Contrasting • • • • •
Komplemen dan nyaman di mata Warna lawan Kuning dan ungu, merah dan hijau Warm <> cool Mata kesulitan memfokuskan dua warna kontras dalam satu waktu
Triadic – Tiga warna yang berlawanan. • Red, yellow, blue • Tidak perlu memakai full strength
Emosi Warna • Merah: – Semangat, hangat, kekuatan, sensual, bersahabat, kegembiraan, bahaya, peringatan, kemarahan, ketidaksabaran
• Oranye – Hangat, aman, kreativitas, lucu, menyenangkan, humor
• Kuning – Semangat, gembira, terang, stimulasi, hangat, cerdas, optimisme, / sakit, ketakutan,kematian
• Hijau – Uang, alam, lingkungan, sihir, rahasia, lembut, damai, seimbang, ramah, aman
• Biru – Lembut, luas ,bijaksana, terpercaya, dapat diterima
• Violet, Purple, Indigo – Dramatik, mewah, lembut
Warm color • Red: Warna paling hebat untuk menarik perhatian. Melambangkan hasrat, api, cinta, nafsu. Telah dibuktikan dapat menaikkan tekanan darah & berkeringat. Merefleksikan energi & memotivasi individu untuk melakukan tindakan. Juga melambangkan perang, kekerasan, darah dan agresi • Pink, lebih lembut dari Red, romantis, calming &feminine. • Orange: bernergi, vibrant, hangat. Dihubungkan dengan musim gugur, labu & halloween. Banyak menurunkan sifat red tapi lebih halus. Dapat membangkitakan selera makan & melambangkan kesehatan • Yellow: melambangkan matahari dan kehangatan. Dapat bermakna harapan, cahaya dan energi. Di sisi lain dapat mencerminkan kelemahan, kesakitan atau pengecut
Cool Color • Green: melambangkan kesehatan, pertumbuhan (tanaman) dan kemakmuran (uang). Mewakili musim semi, pembaharuan & kesuburan. Juga berarti kecemburuan & tidak berpengalaman. • Blue: warna paling menenangkan dan dihubungkan dengan langit dan laut. Dianggap sebagai warna “aman”, melambangkan kecerdasan, kepastian & kepercayaan. Diketahui dapat menekan selera makan & melambangkan depresi & kesedihan • Purple: melambangkan kreatifitas, spiritual & misterius. Deep purple dihubungkan dengan kemewahan, kekayaan, sedang Lavender dihubungkan dengan romance & nostalgia
Neutral colors • Black: melambangkan kekuatan, elegan, kepuasan. Juga kematian (adat barat), setan, kejahatan, kemarahan & kesedihan • White: melambangkan kebersihan, kemurniah & spiritual, kehidupan & perkawinan (adat Barat) tapi juga kematian (adat timur) • Grey: Warna konservatif. Melambangkan keamanan, kedewasaan, kekokohan. Namun juga kesedihan dan kelesuan. • Brown: warna spesial. Dapat digunakan sebagai warna netral atau hangat. Melambangkan kredibilitas & stabil, hati, rumah dan bumi
Warna Foreground vs background
