![Page 1: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/1.jpg)
TEORI WARNA
![Page 2: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/2.jpg)
Jenis Warna● Warna Primer ● Warna Sekunder
● Warna Tersier
![Page 3: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/3.jpg)
Browsersafe Colors
Kombinasi dari
00, 33, 66, 99, CC, FF
#FF33FF #996633
![Page 4: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/4.jpg)
Analogous Color
Warna berdekatan dalam Color WheelHarmoni, kedamaian
![Page 5: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/5.jpg)
Complementary Color
Warna berlawanan dalam Color WheelLebih terang dan lebih hidup, highlight
![Page 6: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/6.jpg)
Split Complementary Color
Kontras, tetapi tidak ekstrem
![Page 7: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/7.jpg)
Color Triads
Warna segitiga dalam Color WheelLebih hidup lagi
![Page 8: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/8.jpg)
Monotone Chromatic
Satu warna dengan variasi saturasi dan bayangan
![Page 9: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/9.jpg)
Monotone Achromatic
Satu warna dari putih ke hitam
![Page 10: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/10.jpg)
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% */
![Page 11: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/11.jpg)
CSS Color● RGB with alpha channel
– p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semitransparent */
![Page 12: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/12.jpg)
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 */
![Page 13: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/13.jpg)
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 */
![Page 14: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/16.jpg)
Color Combination– Warna Highlight
● Memberi tekanan pada sebagian halaman● Kontras dengan warna primer dan sekunder● Sedikit Warna: Terkesan membosankan
![Page 17: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/17.jpg)
![Page 18: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/18.jpg)
![Page 19: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/19.jpg)
![Page 20: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/20.jpg)
![Page 21: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/21.jpg)
![Page 22: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/22.jpg)
![Page 23: 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](https://reader035.vdocuments.mx/reader035/viewer/2022070115/60a3585c07e8a759535f4499/html5/thumbnails/23.jpg)