teori warna

1. Grafik Komputer 2
Hal.: 1 Isikan Judul Halaman
Teori Warna
Grafik Komputer 2

2. Grafik Komputer 2
Hal.: 2 Isikan Judul Halaman
Apa itu Warna?
Warna adalah elemen terpenting
dalam desain grafis. Warna
menjadi indikator pembeda
antara satu objek dengan yang
lain.
Dari sudut pandang ilmu fisika,
warna dihasilkan dari
representasi sinar putih yang
dihasilkan oleh matahari atau
bola lampu pada spektrum
prisma.

3. Grafik Komputer 2
Hal.: 3 Isikan Judul Halaman
Teori Warna
Warna di Komputer
Di dunia komputer ada banyak
sistem warna, antara lain
RGB (Red-Green-Blue), CMYK
(Cyan-Magenta-Yellow-
Black), LAB Color (lightness
A (Green-red axis)
B(blueyellow axis)), HLS
(Hue-Lightness-Saturation).
Banyaknya sistem warna
karena ada perbedaan dalam
aplikasi saat cetak.

4. Grafik Komputer 2
Hal.: 4 Isikan Judul Halaman
Teori Warna
Berdasarkan fungsinya, aplikasi warna di layar komputer
dibedakan menjadi dua, yaitu :
1. warna additive
Warna additive digunakan untuk desain tampilan di layar 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 warna primer dan perpaduan ketiganya menghasilkan
warna hitam.

5. Grafik Komputer 2
Hal.: 5 Isikan Judul Halaman
Spektrum warna
 Cahaya matahari yang dilewatkan pada prisma
menghasilkan spetrum warna.
 ‘warna’ objek yang diterima oleh penglihatan
manusia ditentukan oleh cahaya dipantulkan
oleh objek tersebut.

6. Grafik Komputer 2
Hal.: 6 Isikan Judul Halaman
Akromatik vs Kromatik
 Cahaya akromatik: tidak berwarna, hanya
menggunakan intensitas yang diukur
dengan tingkat
 keabuan. Contoh: TV hitam-putih, citra
monokrom yang kita gunakan
 Cahaya kromatik: panjang gelombang
400~700 nm. Tiga satuan yang
digunakan untuk mendeskripsikan
kualitas dari sumber cahaya akromatik:
 Radiance
 Luminance
 Brightness

7. Grafik Komputer 2
Hal.: 7 Isikan Judul Halaman
Cahaya 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 yang besar tapi nyaris tidak dapat dilihat oleh observer
 Brightness:
 Deskriptor yang subjektif, mirip dengan pengertian intensitas
pada akromatik, walah satu faktor penentu dalam
menggambarkan sensasi warna

8. Grafik Komputer 2
Hal.: 8 Isikan Judul Halaman
Gelombang warna

9. Grafik Komputer 2
Hal.: 9 Isikan Judul Halaman
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

10. Grafik Komputer 2
Hal.: 10 Isikan Judul Halaman
Anatomi Mata

11. Grafik Komputer 2
Hal.: 11 Isikan Judul Halaman
Mata vs Kamera

12. Grafik Komputer 2
Hal.: 12 Isikan Judul Halaman
Persepsi Warna Manusia
 Retina berisi photo receptors
 Cones: day vision dp melihat (persepsi) color
tone (Hue)
• Tiga tipe cones (Red, green & blue cones) 
overlapping passband dg puncak sekitar merah (560
nm), hijau (530 nm) dan biru (440 nm)
• Teori Tri-receptors color vision [Young 1802]
 Rods: night vision, persepsi hanya brightness
 Sensasi color dikarakteristikkan oleh
 Luminance (brightness)
 Chrominance
• Hue (color tone)
• Saturation (color purity)
• Respon dari suatu cone bergantung pd panjang gelombang dan
intensitasnya
• 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

13. Grafik Komputer 2
Hal.: 13 Isikan Judul Halaman
Trichromatic Color Mixing
 Dari struktur mata manusia, semua warna dipandang sebagai
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
 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)

14. Grafik Komputer 2
Hal.: 14 Isikan Judul Halaman
Bagaimana Warna Dinyatakan
 Warna dinyatakan dalam komponen RGB (red,
green, blue), CMYK (cyan, magenta, yellow, black),
HSV, HLS atau YIQ.
RGB color cube
Mengubah RGB ke CMYK:
C = 1 - R
M = 1 - G
Y = 1 - B
K = min(C,M,Y)
C’ = C - K
M’ = M - K
Y’ = Y - K

15. Grafik Komputer 2
Hal.: 15 Isikan Judul Halaman
CIE Colorspace
 CIE (Commision Internationale d’Eclairage)
mendefinisikan spektrum warna seperti gambar
berikut:

16. Grafik Komputer 2
Hal.: 16 Isikan Judul Halaman
CIE Chromacity Diagram
 Lebih mudah melihat warna CIE dalam diagram
berikut

17. Grafik Komputer 2
Hal.: 17 Isikan Judul Halaman
Color Gamut
 Beberapa device hanya bisa menampilkan
spektrum warna yang terbatas
10

18. Grafik Komputer 2
Hal.: 18 Isikan Judul Halaman
Dithering
 Dithering dilakukan untuk mensimulasikan warna
yang lebih banyak daripada yang bisa dihasilkan
suatu device
 Dibutuhkan saat kapan?
11
Classical
halftone pada
suratkabar

19. Grafik Komputer 2
Hal.: 19 Isikan Judul Halaman
Dither Pattern
 Pada komputer, dithering merupakan trade-off
antara spatial resolution dan warna.

20. Grafik Komputer 2
Hal.: 20 Isikan Judul Halaman
Membuat Dither Pattern
 Pattern ukuran berapapun dapat dibuat dengan rule
di atas. Lihat contoh pattern 8x8 di atas!

21. Grafik Komputer 2
Hal.: 21 Isikan Judul Halaman
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 gelombangnya juga dapat bervariasi
Warna sekunder:
 Magenta (R+B), cyan (G+B), yellow(R+G)
Campuran 3 warna primer: putih

22. Grafik Komputer 2
Hal.: 22 Isikan Judul Halaman
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
Campuran ketiga warna: hitam

23. Grafik Komputer 2
Hal.: 23 Isikan Judul Halaman

24. Grafik Komputer 2
Hal.: 24 Isikan Judul Halaman
Brightness, hue, saturation
 Tiga karakteristik yang digunakan 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’ atau ‘biru’ -> berarti kita
menyebutkan hue-nya
 Saturasi: kemurnian relatif (pada spektrum
warna murni: merah, oranye, kuning, hijau, biru,
dan violet tersaturasi penuh, sedangkan pink
saturasinya lebih rendah
 Hue + saturasi  kromatisitas

25. Grafik Komputer 2
Hal.: 25 Isikan Judul Halaman
Model Warna
Memfasilitasi spesifikasi 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,
model CMY untuk printer warna, model YIQ
untuk siaran TV warna

26. Grafik Komputer 2
Hal.: 26 Isikan Judul Halaman
Model RGB- unit cube

27. Grafik Komputer 2
Hal.: 27 Isikan Judul Halaman
Model RGB: kubus warna

28. Grafik Komputer 2
Hal.: 28 Isikan Judul Halaman

29. Grafik Komputer 2
Hal.: 29 Isikan Judul Halaman
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)
Dari 256 warna tersebut, 40 warna
diproses dengan cara yang berbeda
oleh bermacam OS, sisanya tinggal
216 warna yang berlaku umum bagi
semua sistem.

30. Grafik Komputer 2
Hal.: 30 Isikan Judul Halaman
Safe RGB Colors
 216 warna ini telah menjadi standar de
facto untuk safe colors, terutama untuk
aplikasi internet.
 Setiap 216 warna ini terdiri dari 3
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, putih:
FFFFFF

31. Grafik Komputer 2
Hal.: 31 Isikan Judul Halaman
216 safe colors

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

33. Grafik Komputer 2
Hal.: 33 Isikan Judul Halaman
Model HSI
RGB dan CMY tidak cocok untuk
mendeskripsikan colors berdasarkan
interpretasi manusia
Hue (H), Saturation (S), Intensitas
(I)
 Hue: mendeskripsikan warna murni
 Saturasi: derajat banyaknya warna murni dilunakkan
dengan warna putih
 Intensitas: menggabungkan informasi warna dari H
dan S

34. Grafik Komputer 2
Hal.: 34 Isikan Judul Halaman
Model HSI
 I (intensity)  garis yang menghubungkan
titik black dan white
 Semua titik pada garis ini adalah abu-abu.

35. Grafik Komputer 2
Hal.: 35 Isikan Judul Halaman
Model HSI
H (hue)  semua titik pada bidang
yang dibatasi oleh titik black, white
dan warna-x, memiliki hue yang
sama, yaitu warna-x.
Contoh pada gambar sebelumnya:
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. Saturasi
adalah jarak terdekat antara titik
warna-x dengan sumbu intensitas

36. Grafik Komputer 2
Hal.: 36 Isikan Judul Halaman

37. Grafik Komputer 2
Hal.: 37 Isikan Judul Halaman

38. Grafik Komputer 2
Hal.: 38 Isikan Judul Halaman
Model YIQ
YIQ (Y for luminance, I for in-phase and Q for quadrature), like YUV, is
a color space used in television 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 black-and-white television 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 U-V plane by a simple 33-degree rotation and 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 variant, where the I axis is the major
axis of the ellipse and the Q axis is the minor axis.

39. Grafik Komputer 2
Hal.: 39 Isikan Judul Halaman
Model YIQ
 Most newer systems from PAL onward, that
don't suffer from such tight bandwidth
limits, prefer the technically easier-to-use
YUV color space.
 A formula exists for converting colors from
the RGB color space to YIQ. This 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: