TEORI WARNA - telaga.cs.ui.ac.idtelaga.cs.ui.ac.id/~wibowo/lectures/color.pdf · Berapa Warna? – Resiko lebih besar pada penggunaan lebih banyak warna daripada resiko pada penggunaan

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 WheelHarmoni, kedamaian

Complementary Color

Warna berlawanan dalam Color WheelLebih terang dan lebih hidup, highlight

Split Complementary Color

Kontras, tetapi tidak ekstrem

Color Triads

Warna segitiga dalam Color WheelLebih 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