Tulisan berlabel tutorial CSS kali ini berisi hal yang paling sederhana dalam CSS. Bagi anda yang sudah mahir di dunia web design bisa melewatkan tulisan ini karena akan membuat anda bosan. Kalian cukup mendapatkan ucapan salam dari saya. Mudah-mudahan tulisan ini bisa menambah wawasan dan memberi manfaat bagi yang lainnya.

Value warna dalam propeti CSS (background-color dan color) dapat dideklarasikan dalam 4 cara yaitu : color name, hex, rgb dan rgba.

Contoh pada masing-masing metode di bawah ini, elemen DIV akan saya beri warna background hitam.

1. Color Name

div{background-color: Black;}

Hasil :

Metode ini jarang digunakan karena keterbatasannya pada warna tertentu saja. Tidak semua warna yang kita inginkan bisa dideklarasikan dengan color name. Daftar nama warna dapat diperoleh di sini.

2. Hex

div{background-color: #000000;}

Hasil :

Warna hex (hexademical) lebih memiliki banyak pilihan warna daripada color name. Sehingga kita lebih fleksibel memilih warna sesuai keinginan. Value warna hex #000000 adalah warna hitam. Warna hexademical dapat diperoleh melalui color picker yang ada di Photoshop atau software pengolah grafis lainnya atau bisa juga menggunakan aplikasi Adobe Air : Color Picker, COLOURlovers Desktop Color Finder, Kuler Desktop, Color Brwoser.

3. RGB

div{background-color: rgb(0, 0, 0);}

Hasil :

Value RGB (Red, Green, Blue) juga diperoleh melalui color picker yang ada di Photoshop atau software yang telah saya sebut sebelumnya.

Jika dalam color picker Photoshop, R=0, G=0, B=0, maka dalam CSS ditulis rgb(0, 0, 0) angkanya disusun sesuai urutan R-G-B. Jika tidak urut, maka warnanya akan berbeda. Kebetulan dalam contoh angkanya sama.

4. RGBA

div{background-color: rgba(0, 0, 0, 0.5);}

Hasil :

Warna RGBA merupakan turunan dari RGB. A dibelakang RGB berarti Alpha. Nilai A digunakan untuk menentukan tingkat transparansi warna RGB dengan nilai terendah 0 hingga nilai tertinggi 1. 0 artinya 0% dan 1 artinya 100%. Pada contoh diatas, saya membuat warna background hitam transparan 50%.