Embed Size (px)
Citation preview
TEORI WARNA
Jenis Warna● Warna Primer ● Warna Sekunder
● Warna Tersier
Browsersafe 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, semitransparent */
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
