Teori Warna

Grafik Komputer 2

Hal.: 1 Isikan Judul Halaman Grafik Komputer 2

 Apa
p itu Warna?

Warna adalah elemen terpenting

dalam desain grafis.
grafis Warna
menjadi indikator pembeda
antara satu objek dengan yang
lain.
lain
Dari sudut pandang ilmu fisika,
warna dihasilkan dari
representasi sinar putih yang
dihasilkan oleh matahari atau
bola lampu
p ppada spektrum
p
prisma.

Hal.: 2 Isikan Judul Halaman Grafik Komputer 2

 Teori Warna

Warna di Komputer

Di dunia komputer ada banyak

sistem warna
warna, antara lain
RGB (Red-Green-Blue), CMYK
(Cyan-Magenta-Yellow-
Black), LAB Color (lightness
A (Green-red axis)
axis)) HLS
B(blueyellow axis)),
(Hue-Lightness-Saturation).
Banyaknya sistem warna
karena ada perbedaan dalam
aplikasi saat cetak.

Hal.: 3 Isikan Judul Halaman Grafik Komputer 2

 Teori Warna

Berdasarkan fungsinya,
g y , aplikasi
p warna di layar
y komputer
p
dibedakan menjadi dua, yaitu :
1. warna additive
Warna additive
dd d
digunakan
k untuk
k desain
d tampilan
l d layar
di l monitor,
tidak untuk kebutuhan cetak. Di antara sistem warna additive
adalah RGB, LAB Color dan HLS. Desain yang menggunakan
model warna additive, misalnya game, wallpaper, web dan
video.

2. warna subtractive.
Warna ini merupakan perpaduan beberapa warna primer. Warna
subtractive digunakan untuk kebutuhan cetak. Sistem warna
yang digunakan adalah CMYK. Sistem warna ini berasal dari
tiga
g warna pprimer dan p
perpaduan
p ketiganya
g y menghasilkan
g
warna hitam.
Hal.: 4 Isikan Judul Halaman Grafik Komputer 2
 Spektrum
p warna

 Cahaya matahari yang dilewatkan pada prisma

menghasilkan spetrum warna.
 ‘warna’ objek yang diterima oleh penglihatan
manusia ditentukan oleh cahaya dipantulkan
oleh objek tersebut.

Hal.: 5 Isikan Judul Halaman Grafik Komputer 2

 Akromatik vs Kromatik

 Cahaya akromatik: tidak berwarna,

berwarna hanya
menggunakan intensitas yang diukur
dengan tingkat
 keabuan. Contoh: TV hitam-putih, citra
monokrom y yang g kita g
gunakan
 Cahaya kromatik: panjang gelombang
400~700 nm. Tiga satuan yang
digunakan untuk mendeskripsikan
kualitas dari sumber cahaya akromatik:
 R
Radiance
di
 Luminance
 Brightness

Hal.: 6 Isikan Judul Halaman Grafik Komputer 2

 Cahaya
y Kromatik

 Radiansi:
 jumlah energi yang memancar dari sumber cahaya (dalam
satuan watt)
 Luminasi:
 jumlah energi yang diterima oleh observer dari sumber cahaya
(dalam satuan lumens, lm). contoh: sinar inframerah memiliki
radiansi
di i yang besar
b ttapii nyaris
i tid
tidak
kddapatt dilih
dilihatt oleh
l h observer
b
 Brightness:
 Deskriptor yang subjektif
subjektif, mirip dengan pengertian intensitas
pada akromatik, walah satu faktor penentu dalam
menggambarkan sensasi warna

Hal.: 7 Isikan Judul Halaman Grafik Komputer 2

 Gelombang
g warna

Hal.: 8 Isikan Judul Halaman Grafik Komputer 2

 Pemrosesan Informasi oleh
Observer Manusia

 Persepsi visual
 Berhubungan dg bagaimana persepsi thd citra oleh observer manusia
• Pemrosesan awal oleh mata
• Pemrosesan lebih jauh oleh otak
 Penting utk mengembangkan image fidelity measure
• Diperlukan utk perencanaan & evaluasi algoritma & sistem DIP/DIV
 Trichromatic color theory (Thomas Young): color vision
adalah hasil dari tiga photoreceptors berbeda

Hal.: 9 Isikan Judul Halaman Grafik Komputer 2

 Anatomi
m Mata

Hal.: 10 Isikan Judul Halaman Grafik Komputer 2

 Mata vs Kamera

Hal.: 11 Isikan Judul Halaman Grafik Komputer 2

 Persepsi Warna Manusia
 Retina berisi photo receptors
 Cones: day vision dp melihat (persepsi) color
tone (Hue)
• Tiga tipe cones (Red, green & blue cones) 
pp g p
overlapping passband dggp
puncak sekitar merah (560
nm),
) hijau
h (530 nm)) dan
d biru
b (440 nm))
• Teori Tri-receptors color vision [Young 1802]
 Rods: night vision, persepsi hanya brightness

 Sensasi color dikarakteristikkan oleh

 Luminance (brightness)
 Chrominance
• Hue
H ((color
l tone))
• Saturation (color purity)

• Respon dari suatu cone bergantung pd panjang gelombang dan

i t
intensitasnya
it
• Interaksi diantara paling sedikit 2 tipe cone diperlukan utk
mendpka kemmampuan mempersepsi warna
• Diperkirakan masing2 dari tipe cone HVS dp membedakan 100
gradasi berbeda, otak mengkombinasikan variasi ini shg manusi dp
membedakan sekita 1 juta warna berbeda
Hal.: 12 Isikan Judul Halaman Grafik Komputer 2
 Trichromatic
m Color Mixing
g
 Dari struktur mata manusia, semua warna dipandang
p g sebagai
g
kombinasi variabel dari primary color: red (R), green (G) dan
blue (B)
 Utk standarisasi CIE (Commission Internationale de
l’Eclairage – the International Commission on Illumination):
 Blue = 435,8 nm
 Green = 546,1
546 1
 Red = 700 nm
 Nilai R, G, dan B yg diperlukan utk membentuk sembarang
color disebut nilai tristimulus: X, Y, Z
 Suatu color dispesifikasikan oleh trichromatic coefficient:
x = Z/(X+Y+Z)
y = Y/(X+Y+Z)  x + y + z =1
z = Z/(X+Y+Z)

Hal.: 13 Isikan Judul Halaman Grafik Komputer 2

 Bagaimana Warna Dinyatakan

 Warna dinyatakan dalam komponen RGB (red,

green, blue), CMYK (cyan, magenta, yellow, black),
HSV HLS atau YIQ
HSV, YIQ.

Mengubah
g RGB ke CMYK:

C = 1 - R
M = 1 - G
Y = 1 - B
K = min(C,M,Y)
C’ = C - K
C
M’ = M - K
RGB color cube Y’ = Y - K

Hal.: 14 Isikan Judul Halaman Grafik Komputer 2

 CIE Colorspace

 CIE (Commision Internationale d’Eclairage)

mendefinisikan spektrum warna seperti gambar
berikut:

Hal.: 15 Isikan Judul Halaman Grafik Komputer 2

 CIE Chromacity Diagram

 Lebih mudah melihat warna CIE dalam diagram

berikut

Hal.: 16 Isikan Judul Halaman Grafik Komputer 2

 Color Gamut

 Beberapa device hanya bisa menampilkan

spektrum warna yang terbatas

10

Hal.: 17 Isikan Judul Halaman Grafik Komputer 2

 Dithering

Classical
halftone pada
suratkabar

 Dithering dilakukan untuk mensimulasikan warna

yang lebih banyak daripada yang bisa dihasilkan
suatu device
 Dibutuhkan saat kapan?

11

Hal.: 18 Isikan Judul Halaman Grafik Komputer 2

 Dither Pattern

 Pada komputer, dithering merupakan trade-off

antara spatial resolution dan warna.

Hal.: 19 Isikan Judul Halaman Grafik Komputer 2

 Membuat Dither Pattern

 Pattern ukuran berapapun dapat dibuat dengan rule

di atas. Lihat contoh pattern 8x8 di atas!

Hal.: 20 Isikan Judul Halaman Grafik Komputer 2

 Warna primer vs warna sekunder
(pada cahaya)

Warna primer:
 red (R), green (G), blue (B)
 perhatikan bahwa komponen RGB saja tidak bisa
menghasilkan semua spektrum warna, kecuali jika
panjang
p j gg gelombangnya
g y jjuga
g dapat
p bervariasi
Warna sekunder:
 Magenta (R+B),
(R+B) cyan (G+B),
(G+B) yellow(R+G)
Campuran 3 warna primer: putih

Hal.: 21 Isikan Judul Halaman Grafik Komputer 2

 Warna primer vs warna sekunder
pada pigmen

Warna primer:
 magenta, cyan, yellow
 Definisi: menyerap warna primer cahaya dan
merefleksikan/mentransmisikan dua warna
lainnya
Warna sekunder:
 R,G,B
RGB
Campuran ketiga warna: hitam

Hal.: 22 Isikan Judul Halaman Grafik Komputer 2

Hal.: 23 Isikan Judul Halaman Grafik Komputer 2
 Brightness,
g , hue,, saturation

 Tiga
g karakteristik yyangg digunakan
g untuk
membedakan satu warna dengan lainnya
 Brightness: intensitas kromatik
 Hue: panjang gelombang dominan dalam
campuran gelombang cahaya (warna dominan
yang diterima oleh observer). Kita menyebut
suatu benda ‘merah’
merah atau ‘biru’
biru ->
> berarti kita
menyebutkan hue-nya
 Saturasi: kemurnian relatif (p(pada spektrum
p
warna murni: merah, oranye, kuning, hijau, biru,
dan violet tersaturasi penuh, sedangkan pink
saturasinya
y lebih rendah
 Hue + saturasi  kromatisitas

Hal.: 24 Isikan Judul Halaman Grafik Komputer 2

 Model Warna

Memfasilitasi spesifikasi warna,

warna
model warna digunakan untuk
menspesifikasikan sebuah sistem
koordinat 3D untuk representasi
warna
 Model warna berorientasi hardware: model
RGB untuk monitor warna dan kamera video
video,
model CMY untuk printer warna, model YIQ
untuk siaran TV warna

Hal.: 25 Isikan Judul Halaman Grafik Komputer 2

 Model RGB- unit cube

Hal.: 26 Isikan Judul Halaman Grafik Komputer 2

 Model RGB: kubus warna

Hal.: 27 Isikan Judul Halaman Grafik Komputer 2

Hal.: 28 Isikan Judul Halaman Grafik Komputer 2
 Safe RGB Colors

Banyak sistem terbatas pada 256

warna walaupun 24-bit citra RGB
tersedia
Dibentuklah kumpulan warna RGB
aman (dapat digunakan pada semua
sistem: all-systems-safe)
D i 256 warna ttersebut,
Dari b t 40 warna
diproses dengan cara yang berbeda
oleh
l h bermacam
b OS
OS, sisanya
i tinggal
ti l
216 warna yang berlaku umum bagi
semua sistem.
i t
Hal.: 29 Isikan Judul Halaman Grafik Komputer 2
 Safe RGB Colors

 216 warna ini telah menjadi standar de

facto untuk safe colors
colors, terutama untuk
aplikasi internet.
p 216 warna ini terdiri dari 3
 Setiap
komponen RGB, tapi masing-masing
hanya boleh bernilai 0,51,102, 153, 204,
255 (lihat tabel di bawah)
 Warna merah murni: FF0000, biru
murni: 0000FF,, hitam: 000000,, pputih:
FFFFFF

Hal.: 30 Isikan Judul Halaman Grafik Komputer 2

 216 safe colors

Hal.: 31 Isikan Judul Halaman Grafik Komputer 2

 Model CMY

Asumsikan semua nilai warna

dinormalisasi menjadi [0
[0,1]
1]
Model CMY digunakan untuk membuat
output hardcopy
CMYK  K adalah warna keempat:
hitam; karena CMY yang dicampur
tidak
id k dapat
d menghasilkan
h ilk warna hi
hitam
pekat, sedangkan seringkali kita harus
mencetak dengan warna hitam pekat.
pekat
Rumusan:
 C=1–R
 M=1–G
Hal.: 32  Y = 1 – B Isikan Judul Halaman Grafik Komputer 2
 Model HSI

RGB dan CMY tidak cocok untuk

mendeskripsikan colors berdasarkan
interpretasi manusia
Hue (H), Saturation (S), Intensitas
(I)
 Hue: mendeskripsikan warna murni
 Saturasi:
S t i d
derajat
j tbbanyaknya
k warna murnii dil
dilunakkan
kk
dengan warna putih
 Intensitas: menggabungkan informasi warna dari H
dan S

Hal.: 33 Isikan Judul Halaman Grafik Komputer 2

 Model HSI

 I (intensity)  garis yang menghubungkan

titik black dan white
 Semua titik ppada g
garis ini adalah abu-abu.

Hal.: 34 Isikan Judul Halaman Grafik Komputer 2

 Model HSI

H (
(hue))  semua titik ppada bidangg
yang dibatasi oleh titik black, white
dan warna-x, memiliki hue yang
sama yaitu warna
sama, warna-x.
x
Contoh pada gambar sebelumnya:
warna-x:
warna x: cyan
S (saturasi)  untuk menentukan
saturasi (
(kemurnian) ) dari warna-x:
buat bidang dari titik warna-x tegak
lurus dengan sumbu intensitas dan
memiliki hue yang sama.
sama Saturasi
adalah jarak terdekat antara titik
warna-x dengan
g sumbu intensitas

Hal.: 35 Isikan Judul Halaman Grafik Komputer 2

Hal.: 36 Isikan Judul Halaman Grafik Komputer 2
Hal.: 37 Isikan Judul Halaman Grafik Komputer 2
 Model YIQ

YIQ (Y for luminance, I for in-phase and Q for quadrature), like YUV, is
a color space used in television signals.
signals YIQ is used predominantly by
the NTSC television standard for encoding color information. The Y
component, like in YUV, is used to encode luminance information, and
is the only component used by blackblack-and-white
and white television receivers
receivers.
The I and Q signals contain the actual color information. The YIQ color
space is actually exactly the same as YUV, except the I-Q plane differs
from the UU-VV plane by a simple 33-degree
33 degree rotation and axis-swap
axis swap. This
rotation puts the I color axis in the orange region of the color space,
which is where flesh tones are found. Since the human eye notices
incorrect flesh tones more easily than other color defects, I can then be
given a higher bandwidth than Q in a severely limited-bandwidth video
signal such as NTSC by modifing the circle-based quadrature
modulation into an ellipse-based
p variant,, where the I axis is the major
j
axis of the ellipse and the Q axis is the minor axis.

Hal.: 38 Isikan Judul Halaman Grafik Komputer 2

 Model YIQ
Q

 Most newer systems from PAL onward, that

don't suffer from such tight bandwidth
li it prefer
limits, f the
th technically
t h i ll easier-to-use
i t
YUV color space.
 A formula exists for converting colors from
the RGB color space to YIQ.
YIQ This formula,
formula
where R, G, and B are defined on a scale
from zero to one, is shown below.
 The approximate value of the matrix is:

Hal.: 39 Isikan Judul Halaman Grafik Komputer 2