Warna di CSS

Ada 4 metode memberikan warna di CSS: keyword, hexadecimal, rgb dan hsl. Dua yang pertama dikenalkan pertama kali waktu di CSS1 dan didukung di semua web browser sampai CSS3, dimana masuklah rgb dan hsl masing-masing memiliki "alpha" dalam memberikan efek opacity. 

Keywords 

Color Keywords sudah lama di dukung oleh web browser. Ada 16 keyword yang secara resmi dijadikan standar oleh W3C. black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. Contoh: 

Lalu CSS3 mengembangkan lists warna yang ada menjadi 140 standar warna website. Contoh seperti: salmon, aliceblue, smoke etc.  

Hexadecimal 

Ketika warna Keyword hanya sampai 140 tidaklah demikian dengan Hexadecimal dimana bisa memunculkan 256 warna. Wow, banyak sekali. Supaya aman dulu ada istilah yang dinamakan "Web Safe Color" dimana ada table yang memperlihatkan 216 warna dari total 256 kode warna Hexadecimal. Kalau sekarang, monitor sudah bisa memunculkan jutaan warna. Paling tidak minimal 16.384 warna. Sering kita lihat istilah 16k. Jadi sudah tidak di batasin lagi hanya 256 warna. 

Sistem Hexadecimal memiliki 16 digits 0 sampai 9 lalu di ikuti dengan a sampai f. Untuk menentukan warna, ada 3 set nomor Hexadecimal yang mewakili Red, Green dan Blue. Setiap set memiliki 2 nomor Hexadecimal. Jadi #ffffff artinya Red, Green dan Blue dalam keadaan full memberikan efek warna putih. Sedangkan #000000 memberikan efek warna yang paling lemah yaitu hitam. #ff0000 adalah Red, #00ff00 adalah Green dan #0000ff adalah Blue. Sedangkan #777777 adalah Grey.  

Web Safe Color hanya menggunakan 1 dari 2 nomor Hexadecimal. Misalkan #f00 artinya Red. Warna di Hexadecimal tidak harus selalu berpasangan. Bisa #3fa027. 

RGB 

Metode RGB lebih gampang untuk diatur atau di manipulasi di script. Nilai RGB bisa di beri dari antara 0 dan 255. 

Atau persen: 

Lalu CSS3 memperkenalkan RGBA, dimana a itu adalah alpha atau opacity dimana nilai 0 adalah (full transparan) dan 1 (full buram). 

Contoh, kita mau buat sebuah div dengan id background-color merah transparant 50%. 

HSL

Yang terakhir adalah HSL ( Hue, Saturation & Luminosity ). Secara teori, HSL akan mempermudah developer dalam menentukan "Deeper" atau "Lighter" sebuah warna dengan cepat. 

HSL berdasarkan color wheel, geser dari Red ke Yellow, Green, Blue dan Violet dan kembali ke Red lagi. HUE itu diambil dari derajat dari sisi luar wheel. Dengan Red sebagai 0 derajat dan juga 360 derajat. Saturation dan Luminosity diatur dengan persen. Silahkan ber-experimen dengan kombinasinya. 

Juga ada hsla, dan caranya sama seperti cara penulisan rgba. 

Untuk mengetahui bagaimana mendapatkan code hsla, bisa akses di artikel yang sebelumnya di www.dumetschool.com/blog/Menerapkan-HSLa-dan-RGBa-Pada-CSS

Selamat Mencoba