Anda di halaman 1dari 23

TEORI WARNA

   
Jenis Warna

Warna Primer ●
Warna Sekunder


Warna Tersier

   
Browser­safe Colors

Kombinasi dari 

00, 33, 66, 99, CC, FF 

#FF33FF  #996633 

   
Analogous Color

Warna berdekatan dalam Color Wheel
  Harmoni, kedamaian  
Complementary Color

Warna berlawanan dalam Color Wheel
  Lebih terang dan lebih hidup, highlight
 
Split Complementary Color

Kontras, tetapi tidak ekstrem
   
Color Triads

Warna segitiga dalam Color Wheel
  Lebih hidup lagi  
Monotone Chromatic

Satu warna dengan variasi saturasi dan bayangan

   
Monotone Achromatic

Satu warna dari putih ke hitam

   
CSS Color

RGB model 
– p { color: #F00 }        /* #rgb */
– p { color: #FF0000 }       /* #rrggbb */
– p { color: rgb(255,0,0) }    /* integer range 0 ­ 255 */
– p { color: rgb(100%, 0%, 0%) } /* float range 0.0% ­ 
100.0% */

   
CSS Color

RGB with alpha channel
– p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semi­
transparent */

   
CSS Color

HSL model
– p { color: hsl(0, 100%, 50%) }  /* red */
– p { color: hsl(120, 100%, 50%) } /* green */ 
– p { color: hsl(120, 100%, 25%) } /* light green */ 
– p { color: hsl(120, 100%, 75%) } /* dark green */ 
– p { color: hsl(120, 50%, 50%) } /* pastel green */

   
CSS Color

HSL model with alpha channel
– p { color: hsla(120, 100%, 50%, 1) }  /* green */
– p { color: hsla(120, 100%, 50%, 0.5) } /* semi­
transparent green */
– p { color: hsla(120, 100%, 50%, 0.1) } /* very 
transparent green */

   
Color Combination

Berapa Warna?
– Resiko lebih besar pada penggunaan lebih banyak 
warna daripada resiko pada penggunaan lebih 
sedikit warna
– Banyak Warna: Sibuk, Menyulitkan, Melelahkan
– Sedikit Warna: Terkesan membosankan

   
Color Combination

Three Color
– Warna Primer

Warna utama halaman web

Menempati sebagian besar tampilan

Membuat 'tone' warna webpage secara keseluruhan
– Warna Sekunder

Backup warna primer

Mendekati warna primer
   
Color Combination
– Warna Highlight

Memberi tekanan pada sebagian halaman

Kontras dengan warna primer dan sekunder

Sedikit Warna: Terkesan membosankan