Kita buka kembali source code kita dari pelajaran sebelumnya. Sebelumnya kita telah membuat dua buah list, yaitu Daftar Buah dan Daftar Binatang Peliharaan. Dan kita telah belajar mengenai cara memberi warna pada konten list.

Selama ini kita telah mempelajari mengenai cara mengisikan nilai pada properti color dan background, dengan menggunakan keyword warna dasar, seperti red, green, blue, yellow, dan lain-lain. Masalahnya, warna-warna dasar seperti ini sudah sering digunakan sejak tahun 90an, sehingga apabila kita masih menggunakannya sekarang, maka situs kita akan kelihatan jadul.

Kita memerlukan cara lain untuk memilih warna untuk situs yang sedang kita buat. Untuk itu, kita bisa melakukan search google dengan kata kunci css color dan membuka referensi dari w3schools.com. Disini kita bisa menemukan 140 kata kunci untuk warna yang dapat kita gunakan untuk situs kita.

Dan misalnya kita tertarik dengan salah satu dari warna tersebut, misalkan kita pilih BlueViolet. Maka kemudian kita dibawakan ke halaman lain, dimana kita bisa melihat bagaimana hasil kombinasi warna latar belakang BlueViolet dengan tulisan yang menggunakan warna lain.

Apabila kita tertarik untuk menggunakan warna ini, kita bisa copy baik nama warnanya BlueViolet, atau kode hexadesimalnya, ataupun kode RGB-nya ke CSS kita. Sebagai contoh, saya copy nama BlueViolet untuk mengganti nilai background-color pada kelas daftar-buah. Kita simpan dan lihat hasilnya pada browser. Sekarang warna latar belakang daftar buah sudah lebih menarik ya.

Kita juga bisa mengganti warna buah agar lebih menarik dan lebih mudah dibaca dengan cara mencari kombinasi warna yang lebih enak dilihat dari w3schools.com. Misalnya warna merah Apel kita ganti menjadi Hotpink. Kita bisa copy kata kunci HotPink, dan paste ke nilai color dari ID Apel.

Kemudian untuk warna hijau kita bisa menggunakan LawnGreen, kita coba copy kode hexadesimalnya dan paste ke nilai color dari ID Jeruk. Ingat bahwa untuk menggunakan kode hexadecimal, kita harus menambahkan simbol hash di depan nilainya.

Dan yang terakhir untuk nilai kuning pada lemon, kita bisa gunakan warna LemonChiffon. Sebagai contoh kita copy nilai RGB-nya dan kita paste ke nilai color pada ID Lemon. Untuk menggunakan kode RGB, kita mesti menambahkan kode rgb, buka kurung, setelah itu barulah kita paste nilainya.

Kita simpan dan lihat hasilnya pada browser. Sekarang tampilan dari Daftar Buah sudah jauh lebih menarik ya. Karena kita telah memilih warna-warna yang jarang digunakan, dan kita telah memilih kombinasi warna yang lebih mudah untuk dibaca.

Selanjutnya kita akan membahas lebih detil mengenai beberapa cara yang dapat kita gunakan untuk mengisikan nilai warna pada CSS. Seperti yang barusan kita bahas, ada 3 cara yang paling sering digunakan untuk mengisi nilai warna, yaitu menggunakan keyword, menggunakan kode hexadesimal dan menggunakan kode RGB. Untuk menggunakan keyword, kita bisa membuka halaman referensi seperti pada w3schools untuk melihat 140 kata kunci warna yang didukung oleh css.

Selanjutnya kita akan membahas lebih detil, mengenai kode RGB terlebih dahulu ya. RGB ini adalah singkatan dari 3 warna dasar yang digunakan pada komputer, yaitu Red atau Merah, Green atau Hijau dan Blue atau Biru. Jadi di dalam kode RGB ini, kita memberikan 3 buah nilai, yang pertama untuk jumlah merahnya, kemudian kita berikan nilai untuk jumlah hijaunya, dan yang terakhir adalah nilai untuk jumlah birunya. Nilai yang bisa kita masukkan dimulai dari 0 hingga 255.

Sekarang kita coba di dalam kode kita. Kita lihat ke kode CSS kelas binatang. Kita ganti nilai colornya menjadi RGB. Pertama kita tuliskan dahulu rgb ditambah buka kurung. Setelah itu kita masukkan nilai red 0, nilai green 0, dan nilai blue 0. Artinya tidak ada warna sama sekali. Kita simpan dan lihat hasilnya di browser. Tulisan pada Daftar Binatang Peliharaan berubah menjadi hitam.

Selanjutnya kita coba ubah nilai red menjadi penuh. Kita ubah nilai pertama dalam rumus RGB menjadi 255. Kita simpan dan lihat hasilnya di browser. Maka warna tulisan berubah menjadi merah.

Kita bisa coba apabila nilai green penuh, sementara nilai lainnya kosong. Maka warna tulisan berubah menjadi hijau. Dan kita coba lagi apabila nilai blue yang penuh. Dan warna tulisan menjadi biru.

Nilai yang diberikan tidak harus 0 atau 255. Kita bisa memberikan nilai di tengah-tengahnya. Semakin kecil nilai yang kita berikan, maka warnanya akan semakin hitam. Sebagai contoh, kita coba berikan nilai 170 untuk Blue. Maka hasilnya adalah warna biru yang lebih gelap.

Selain mengubah nilai pada salah satu warna, kita juga bisa mengkombinasikan beberapa warna untuk membuat warna baru. Misalkan kita beri nilai 255 pada red dan green, sedangkan nilai blue adalah 0. Maka sistem akan menghasilkan warna kuning.

Apabila kita memberikan warna 255 pada red dan blue, maka hasilnya adalah Magenta. Sedangkan kalau warna 255 pada green dan blue, maka hasilnya adalah Cyan atau biru muda. Dan apabila kita memberikan nilai 255 untuk ketiga warna, maka hasilnya adalah warna putih.

Kita kembalikan dahulu warnanya menjadi biru. Selanjutnya kita akan mempelajari mengenai cara memberikan nilai dengan menggunakan rgba. Disini kita bisa menambahkan satu nilai yang mengatur kadar transparansi dari warna kita. Nilai yang bisa kita berikan dimulai dari 0, yang artinya transparan penuh. Contohnya seperti ini. Berhubung warnanya transparan penuh, maka tulisannya menjadi tidak kelihatan, hanya kelihatan latar belakangnya saja.

Sedangkan kalau nilainya kita ubah menjadi 1, artinya warna menjadi solid berwarna biru seperti menggunakan rgb biasa.

Untuk mengatur kadar transparansi, kita bisa memberikan nilai bilangan desimal diantara 0 dan 1. Misalkan kita ingin agar tulisan kita hanya kelihatan samar-samar. Kita bisa coba memberikan nilai 0,2. Ingat bahwa penulisan titik dan koma pada bahasa Inggris adalah kebalikan dari bahasa Indonesia. Kita menuliskan nilai desimal disini dengan tulisan 0.2. Kita lihat hasilnya di browser bahwa tulisan akan terlihat samar-samar.

Selanjutnya kita akan mempelajari mengenai cara menuliskan nilai warna dalam bentuk hexadesimal atau biasanya lebih singkat disebut hex. Sistem penomoran yang biasa kita gunakan adalah desimal, dimana kita mengenal ada 10 simbol angka, dimulai dari 0, 1, 2, 3, 4, 5, 6, 7, 8, dan 9. Diatas 9, kita akan menggabungkan 2 simbol angka, yaitu satu dan nol sehingga membentuk satu buah bilangan dengan dua digit, yaitu sepuluh. Dan selanjutnya adalah 11, 12, 13, 14, 15, 16, 17, 18, dan 19.

Dalam sistem hexadesimal, kita menggunakan 16 simbol angka di setiap digitnya. Jadi kalau kita tuliskan disamping nilai desimal ini, maka nilai hexadesimal yang setara dengan nilai 0 adalah 0 juga. Dilanjutkan dengan 1, 2, 3, 4, 5, 6, 7, 8, dan 9. Untuk nilai 10 pada sistem desimal yang sudah menjadi dua digit, pada sistem hexadesimal masih tetap satu digit, dan kita menggunakan simbol huruf A. Selanjutnya sebelas adalah huruf B, dua belas adalah huruf C, tiga belas adalah huruf D, empat belas adalah huruf E, dan lima belas adalah huruf F.

Dan selanjutnya di nilai enam belas desimal, maka di hexadesimal akan menjadi dua digit, yaitu nilai 10. Dan kemudian kita lanjutkan lagi tujuh belas menjadi sebelas. Delapan belas menjadi dua belas. Dan sembilan belas menjadi tiga belas.

Nah sekarang pertanyaannya, bagaimana caranya kita menghitung nilai hexadesimal dari suatu angka desimal? Berhubung kita sedang menggunakan komputer, maka kita bisa menggunakan bantuan program calculator. Kebetulan sistem operasi yang saya gunakan adalah Windows 10. Apabila teman-teman sedang menggunakan sistem operasi lain, kemungkinan program calculatornya akan sedikit berbeda.

Sebagai contoh ini adalah program Calculator pada Windows 10. Calculator secara default diatur dalam tipe Standart. Kita bisa menekan tombol menu untuk mengubah jenis Calculator tersebut menjadi jenis Programmer. Nah, sekarang dibawah nilai calculator, kita bisa menemukan 4 sistem penomoran, yaitu hex atau hexadesimal, desimal, octal dan binari. Perhatikan bahwa nilai desimal berwarna merah, artinya sekarang kita sedang berhitung dengan menggunakan sistem desimal.

Misalkan kita masukkan angka 100. Maka calculator akan secara otomatis menghitungkan berapa nilai 100 yang ditulis menggunakan masing-masing sistem penomoran. Dan bisa kita lihat pada hex bahwa nilainya adalah 64. Jadi kalkulator disini bisa kita gunakan untuk mengubah nilai desimal menjadi hexadesimal.

Disini kita bisa melihat bahwa nilai tertinggi yang bisa disimpan dalam 2 digit hexadesimal adalah 255. Jadi apabila kita masukkan nilai desimal 255, maka nilai hex-nya adalah FF. Selanjutnya apabila kita memasukkan nilai desimal 256, maka nilai hex-nya sudah menjadi 3 digit yaitu 100.

Kita perhatikan lagi nilai color pada ID jeruk. Disini kita menemukan ada 6 digit nilai hexadesimal. Keenam digit ini bisa kita bagi menjadi 3 bagian, yaitu 2 digit pertama mewakili nilai merah, 2 digit selanjutnya mewakili nilai green dan 2 digit terakhir mewakili nilai blue. Jadi sebenarnya kode hexadesimal ini sama dengan kode rgb ya, hanya saja yang hexadesimal menggunakan sistem penomoran hexadesimal, sedangkan kode rgb menggunakan sistem penomoran desimal.

Sebagai contoh, kita akan mengubah warna jeruk menjadi sama dengan warna lemon, namun kita akan menggunakan kode hexadesimal yang kita konversi dari kode rgb pada lemon. Pertama warna jeruk kita simpan dahulu sebagai komentar. Lalu kita isikan dengan nilai awal simbol hash.

Kita lihat nilai pertama pada RGB lemon adalah 255, dan kita konversikan ke hexadesimal. Tadi sudah kita bahas bahwa nilai 255 pada hexadesimal adalah FF. Jadi kita bisa langsung menuliskan FF.

Kemudian kita lihat lagi nilai kedua pada RGB lemon adalah 250. Kita buka program kalkulator dan kita isikan dengan nilai 250. Kita lihat kode hex-nya adalah FA. Kita tambahkan FA ke nilai color.

Dan nilai terakhir adalah 205. Kita masukkan angka 205 pada kalkulator, dan kita lihat kode hexnya adalah CD. Kita tambahkan CD ke nilai color jeruk.

Nah, setelah kita melengkapi keenam digit hexadesimal pada warna jeruk, maka kita akan mendapatkan warna yang sama persis dengan warna lemon. Kita simpan dan lihat hasilnya pada browser.

Ini adalah cara praktis untuk mengkonversi nilai desimal pada rumus RGB menjadi nilai hexadesimal. Mungkin teman-teman yang baru belajar mengenai sistem hexadesimal akan merasa bingung dan repot. Namun kenyataannya, sistem hexadesimal ini sangat banyak digunakan untuk pewarnaan di komputer. Bukan hanya di kode CSS saja. Apabila kita menggunakan software pengolah gambar seperti Adobe Photoshop, mereka juga menggunakan sistem hexadesimal ini untuk merujuk warna.

Mengapa sistem hexadesimal untuk pewarnaan bisa lebih popular daripada sistem desimal? Jawabannya adalah karena cara penulisannya jauh lebih sederhana. Kita bisa bandingkan nilai warna pada jeruk dan lemon. Keduanya merujuk ke warna yang sama. Pada jeruk, kita hanya menggunakan kode hash, dan kemudian diikuti oleh 6 digit hexadesimal. Sedangkan pada lemon, kita harus menuliskan rgb, buka kurung dan tutup kurung, terus ada 2 buah tanda koma, dan nilai desimalnya juga bisa 3 digit. Jadinya warna yang dengan sistem hexadesimal bisa kita tuliskan dengan 7 karakter, pada sistem desimal menjadi 16 karakter.

Sekarang kita kembalikan warna jeruk ke warna sebelumnya. Dan kita akan belajar untuk melakukan konversi kebalikannya. Kita memiliki kode hexadesimal untuk warna hijau jeruk, dan kita akan mengubah kode hexadesimal ini menjadi kode rgb pada lemon.

Pertama kita ubah dahulu warna asli lemon menjadi komentar. Kemudian kita tambahkan tulisan rgb dan buka kurung. Kita ambil dua digit pertama pada kode hex jeruk, yaitu 7C. Kita buka kalkulator kita. Kalkulator kita sedang menggunakan sistem penomoran desimal, untuk mengubahnya menjadi hexadesimal, kita klik pada tulisan hex hingga warnanya berubah menjadi merah. Lalu kita berikan nilai 7C. Bisa kita lihat pada kalkulator bahwa nilai desimal dari 7C adalah 124. Kita masukkan nilai ini ke kode CSS kita, setelah itu kita ikuti dengan tanda koma.

Kita ambil dua digit kode hexadesimal berikutnya, yaitu FC. Kita lakukan hal yang sama di kalkulator. Dan kita bisa melihat bahwa hasilnya adalah 252. Kita ketikkan angka 252 pada kode RGB kita, diikuti dengan tanda koma.

Dan dua digit kode hexadesimal terakhir adalah 00. Kita tidak perlu kalkulator untuk konversi angka nol ya. Kita langsung masukkan saja nilainya adalah 0 ke kode RGB kita. Kita simpan dan lihat hasilnya di browser. Sekarang Jeruk dan Lemon sudah menggunakan warna hijau yang sama.

Sebelum kita melanjutkan pelajaran, kita kembalikan lagi nilai RGB lemon ke warna kuning.

Pada awal video ini kita sudah mempelajari mengenai cara memilih warna dengan bantuan situs w3schools.com, dimana kita bisa menemukan 140 kombinasi warna. Pertanyaan berikutnya, bagaimana jika ternyata semua warna disini kurang cocok untuk situs kita? Bagi yang sudah terbiasa bermain di warna, bisa langsung mengubah nilai pada kode RGB atau hexadesimal warna untuk mencari warna baru, atau bisa juga menggunakan software seperti Adobe Photoshop untuk mencari warna yang cocok.

Namun apabila kita masih belum terbiasa bermain warna, maka kita akan membutuhkan bantuan dari ahli warna. Tidak perlu khawatir. Karena sekarang sudah tersedia banyak situs pencari warna yang bisa membantu kita. Salah satunya yang saya rekomendasikan disini adalah colorhunt.co. Kita bisa buka langsung situsnya dari browser.

Disini kita bisa menemukan banyak contoh warna yang direkomendasikan oleh ahli warna untuk digunakan di situs kita. Sebagai contoh disini saya hendak mencari warna latar belakang merah dan warna tulisan biru untuk mengganti warna pada Daftar Binatang Peliharaan.

Apabila ada warna yang kita sukai pada colorhunt, kita bisa mengkliknya. Dan kemudian kita bisa mengklik lagi kode hex dari warna tersebut untuk copy. Dan bisa kita paste langsung ke kode css kita. Sebagai contoh saya ambil kode hex warna merahnya dan kita pindahkan ke kelas warnamerah. Jangan lupa tambahkan tanda hash setiap kali kita menggunakan kode hex.

Kemudian kita copy juga warna biru dari situs colorhunt dan kita paste ke kelas binatang. Kita simpan dan lihat hasilnya di browser. Sekarang tampilan dari situs kita menjadi lebih menarik ya. Karena kita tidak menggunakan warna-warna dasar yang sudah sering digunakan oleh situs-situs lama.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.