Warna (color) dalam CSS sedikitnya didefiniskan melalui empat metode, yaitu Hexadecimal, Color Names, RGB & RGBA, dan HSL & HSLA, (nama warna). Keempat metode tersebut mampu menghasilkan warna yang sama dengan katakunci nilai yang berbeda. Mungkin pada awal pengembangan website Hexadecimal, dan Color Names (nama warna) sudah ada terlebih dahulu daripada RGB & RGBA, HSL & HSLA. Jika kita sudah mendapatkan katakunci nilai dari warna yang kita harapkan menggunakan salah satu metode di atas, maka kita tinggal menerapkannya dalam sintaks CSS. Tapi sebelum itu, kita akan membahas terlebih dahulu keempat metode tersebut.

Hexadecimal

Hexadecimal Color adalah kode warna yang ditentukan dengan menggunakan format 6 atau 3 karakter dari angka 0 sampai 9 dan huruf dari A sampai F yang dimulai dengan tanda pagar # , contoh #FF4F72 akan menghasilkan warna ini dan #00AABB akan menghasilkan warna ini .
Untuk penerapannya sintaks CSS bisa ditulis seperti berikut

Contoh

 #elemen {color: #FF4F72; background: #00AABB}

Sebagai catatan, jika kita mendapati diantara digit kode yang enam itu terdiri dari huruf atau angka yang sama pada dua digit pertama, kedua, dan ketiganya maka kita bisa meringkas kodenya menjadi tiga digit, contoh #00AABB bisa diringkas menjadi #0AB contoh #FF4F72. Tentu saja hal itu tidak akan bekerja jika pada dua digit pertama, kedua, dan ketiganya ada huruf atau angka yang berbeda. Itu semua terjadi dikarenakan konstruksi kode Hexadecimal Color bekerja seperti RGB (lihat sub bahasan RGB) dimana dua digit pertama untuk red, dua digit kedua untuk green dan dua digit terakhir untuk blue. Oleh karena itu jika dikonversi, digit "0" ekivalen dengan numeral heksadesimal "00", "A" ekivalen dengan "AA", "B" ekivalen dengan "BB", secara keseluruhan "0AB" ekivalen dengan #00AABB.
Selengkapnya untuk mendapatkan kode warna heksadesimal bisa dilihat di bagian ini.

RGB & RGBA

RGB Color adalah singkatan dari Red, Green, dan Blue. Huruf "A" diakhir berarti Alpha yang berfungsi untuk membuat warna transpaaran. Kode warna RGB memang terdiri dari 3 kategori warna: merah, hijau, dan biru dimana ketiga warna itu merupakan warna dasar cahaya layar yang dipancarkan. Sementara untuk menghasilkan warna lain dengan cara mengkombinaksikan ketiga warna dasar tersebut.

Nilai-nilai yang terdapat pada tiap-tiap entitas RGB ditentukan dalam angka desimal mulai 0 sampai 255. Angka terendah (0) akan menghasilkan warna gelap dan angka tertinggi (255) akan menghasilkan warna terang. Logikanya jika kita ingin menentukan warna gelap, misalnya hitam pekat, maka nilai dari tiap entitas RGB harus sama-sama "0", R = 0, G = 0, B = 0. Sebaliknya jika kita menginginkan warna putih terang, maka nilai yang dibutuhkan dari tiap-tiap entitas RGB adalah "255". Selain menggunakan angka desimal bisa juga menggunakan persentase dari 0% (hitam) sampai 100% (putih). Perlu diketahui, pada dasarnya, seperti yang sudah saya utarakan di atas, dikarenakan RGB adalah warna dasar cahaya layar, bisa dikatakan warna hitam adalah warna tanpa cahaya (bayangkan mati lampu), sehingga nilai dari tiap-tiap entitas RGB adalah nol.

Sintaks CSS

selektor {properti: rgb(255, 0, 0)}

Catatan

1. Nilai entitas dibungkus dalam tanda kurung
2. Setiap nilai dipisahkan dengan tanda koma, kecuali nilai terakhir

Sementara untuk menghasilkan warna transparan kita harus menggunakan selektor rgba, huruf a berarti alphaa. Nilai dari entitas alpha juga ditentukan dengan angka desimal dari 0 sampai 1. Angka terendah (0) akan menghasilkan warna yang benar-benar transparan bahkan sampai tak terlihat dan angka tertinggi (1) akan mengembalikan warna yang sebenarnya, diantara kedua nilai tersebut kita dapat menentukan nilai 0,1 - 0,2, - 0,3 dst.

Sintaks CSS

selektor {properti: rgba(255, 50, 0, 0,3)}

Secara keseluruhan contoh penerapannya bisa dilihat di bawah ini

Contoh

#main {background-color: rgba(255, 50, 0, 0,3); color: rgb(0, 0, 0)}

Bersambung lagi ya :)