Dalam tutorial kali ini kita akan membahas jenis-jenis pewarnaan pada css, kalau kita berbicara jenis-jenis artinya css memiliki metode atau cara untuk menentukan warna pada dokumen html. Ada banyak cara untuk menentukan warna pada css, dimana css miliki kode warna yang tidak terbatas selama browser yang dipakai mendukung pewarnaan tersebut, meksi memang pada saat ini tidak ada browser yang tidak mendukung kode warna yang disediakan oleh css.
Jenis-jenis pewarnaan pada css ini bisa digunakan untuk memberi warna teks, background, border, dan lain sebagainya. Penulis biasanya menentukan warna sesuai dengan desain web yang disediakan, untuk mengambil warna pada desain tersebut penulis menggunakan bantuan Adobe Photosop, meksi banyak cara untuk mengambil kode warna.
Jenis-jenis Pewarnaan Pada CSS
Seperti awal dikatakan bahwa didalam css ada beberapa cara atau metode untuk menentukan jenis-jenis pewarnaan pada css, salah satu yang sering digunakan adalah dengan menggunakan Hex Code. Berikut ini penjelasan masing-masing jenis-jenis pewarnaan pada css.
Pewarnaan Css Dengan Hex Code
Hexadecimal memiliki 6 digit kode untuk merepesentasikan sebuah warna pada css diawali dengan simbol pagar (#) yang mengacu pada kode warna RGB dimana dua kode warna awal mewakili nilai merah atau red (RR), dua warna berikutnya mewakili nilai hijau atau green (GG), dan dua digit terakhir mewakili warna biru atau blue (BB).
Untuk mengambil kode warna hexadecimal ini dapat menggunakan perangkat lunak desain grafis seperti photoshop, jasc paintshop dan lain sebagainya, itu tergantung kebanyanan saja. Berikut ini contoh penggunaan hex code pada css.
h1 {
color: #000000;
background-color: #f1f1f1;
}Code language: CSS (css)Kode warna hex code diawali dengan tanda pagar (#) dan enam digit hex code setelahnya. Berikut ini cara mengambil kode warna menggunakan perangkat lunak grafis photoshop yang biasa penulis gunakan untuk menentukan warna hex code css.
Pertama silahkan buka adobe photoshop, lalu dibagian daftar tools sebelah kiri bawah klik set foreground color.
Jika sudah maka akan muncul sebuah window dialog untuk menentukan warna, lihat dibagian kanan bawah, silahkan ambil kode tersebut dan letakan pada kode css yang anda ingin tentukan dengan kode warna tersebut.
Mudah bukan…?
Sebenarnya tidak harus 6 digit, kita dapat menggunakan 3 digit hex code, yang perlu diingat adalah perwakilan dari RGB saja. Misalkan jika kode warna putih adalah #ffffff maka 3 digit hex code warna putih adalah #fff dimana jika FF (RR), FF (GG) dan FF (BB) maka jika disingkat F (R), F (G), dan F (B).
Pewarnaan CSS dengan Kode RGB
Lain lagi dengan menggunakan RGB, untuk menggunakan pewarnaan dengan metode kode RGB maka diperlukan 3 digit masing-masing perwakilan warna dimana 3 digit untuk R lalu 3 digit untuk G dan 3 digit untuk B. Nilai dari masing-masing 3 digit tersebut menggunakan format tipe data integer. Yang perlu diingat bahwa tidak semua browser mendukung penggunaan warna dengan menggunakan metode RGB ini. Berikut ini contoh cara menggunakan metode pewarnaan kode RGB.
h1 {
color: rgb(0, 0, 0);
background-color: rgb(241, 241, 241);
}Code language: CSS (css)Kode rgb (0, 0, 0) adalah kode warna hitam sedangkan kode rgb(241, 241, 241) adalah kode warna putih ke abu-abu. Untuk mengambil warna rgb dengan photosop cara awalnya sama dengan cara pertama, namun yang kedua letak kode warnanya saja yang berbeda.
Sekali lagi yang perlu diingat, tidak semua browser mendukung metode mewarnaan dengan menggunakan rgb ini, namun sebagian besar browser memang sudah mendukung metode pewarnaan menggunakan rgb ini.
Pewarnaan CSS Dengan Kata Kunci Warna
Bagian ini adalah yang paling mudah, dimana kita hanya menyebutkan nama warna yang diinginkan, namun wajib dengan menggunakan bahasa inggris. Contoh kodenya.
h1 {
color: black;
background-color: grey;
}Code language: CSS (css)Akan tetapi kekurangan dengan menggunakan kata kunci warna dalam menentukan warna di sintaks css ini adalah keterbatasan kata kunci sehingga warna yang dihasilkan akan terbatas. Penulis sendiri lebih sering menggunakan hexadecimal dalam menentukan kode warna untuk css.
Demikian tutorial jenis-jenis pewarnaan pada css, tips dari penulis adalah bahwa untuk menentukan sebuah kode warna untuk css jika memang mendadak bisa menggunakan versi web, anda bisa cari digoogle.
