6 Nilai Warna yang Valid dalam CSS

Nilai warna dalam CSS dapat kita berikan dengan berbagai cara. Salah satunya dengan menuliskan nama warna dalam bahasa inggris. Misalnya, warna teks untuk paragraf adalah merah, maka kita bisa berikan color:red. Selain menggunakan nama warna, terdapat juga cara lain yang valid seperti fungsirgb(), kode heksa, dsb. 

1. Nama warna

Nama warna merupakan cara yang sering digunakan, karena lebih mudah mengingatnya. Misalnya, saya suka warna hijau (teal), maka nanti dalam CSS-nya bisa langsung kita tulis teal.

header {
    background: teal; 
}

2. Kode Heksadesimal

Kode heksadesmial merupakan kode yang menggunakan bilangan heksa desmial, memiliki nilai dari 0 sampai f (16 dalam desimal). Kode heksa demsial diawali dengan tanda pagar (#), kemudian diikuti kode heksanya. Kode ini dapat terdiri dari 3 digit atau 6 digit bilangan. Contoh:

#0011ff (6 digit)
#01f (3 digit)

Setiap angka dalam kode heksa desimal menentukan nilai warna dalam RGB (#RRGGBB atau #RGB). Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah, dua angka berikutnya untuk warna hijua, dan dua angka terakhir untuk warna biru.

3. Fungsi RGB

Fungsi RGB memiliki tiga parameter, yaitu nilai untuk merah (red), hijau (green), dan biru (blue). Nilai yang diberikan pada parameter tersebut dimulai dari angka0~255. Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut. Contoh penggunaan fungsi RGB.

h2 {
    color: rgb(88, 255, 21); 
}

Pada contoh diatas, nilai paramter kedua (green) diberikan maksimal, maka nanti hasilnya warna hijau akan menjadi warna dominan.

4. Fungsi RGBA

Fungsi ini sama seperti fungsi RGB, tapi ada penambahan A dibelakangnya. Huruf A artinya Alpha. Nilai alpha ini akan menjadi nilai transparansi dari warnanya. Nilai alpha dapat diberikan dari 0.0~1.0. Semakin mendekati angka satu,  warnanya akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin menghilang. Contoh penggunaan fungsi RGBA.

p {
    background: rgba(40,23,11,0.7);
}

Pada contoh di atas, nilai alpha yang diberikan adalah 0.7, atau sama dengan 70%.

5. Fungsi HSL

HSL merupakan singkatan dari Hue, Saturation, Lightness. Nilai H (hue) yang diberikan pada fungsi ini dimulai dari 0~360, karena palet warna HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari tutup tabungnya. Sedangkan untuk nilai S dan L menggunakan persen, dari 0%~100%.

Contoh penggunaan fungsi HSL dalam CSS:

h3 {
    background: hsl(324, 70%, 40%); 
}

6. Fungsi HSLA

Seperti fungsi RGB, fungsi HSL juga memiliki nilai alpha untuk menyatakan nilai transparansi warna. Contoh:

h2 {
    background: hsla(267, 80%, 45%, 0.6); 
}

Itulah 6 nilai warna yang valid dalam CSS. Manakah cara yang paling sering kalian gunakan?

Share this article please, on :

Share on fb Tweet Share on G+