Belajar CSS Color

Color CSS

Selamat pagi, sambil belajar css sambil didokumentasikan lewat tulisan ini, hari ini mulai belajar css untuk pembuatan warna (color), untuk membuat warna pada css 3 kita dapat menuliskan dengan tag color kemudian diikuti dengan nama warna standar, ada sekitar 140 nama warna yang disediakan, sehingga cukup menuliskan nama warna seperti, red, blue, green, white,black dan lain-lain sebagainya, namun untuk tulisan pada halaman ini kita akan mencoba, untuk membuat warna menggunakan function yang disediakan css diantaranya function rgb, rgba, hsl dan hsla, cara lainnya yaitu dengan menyebutkan nomor warna dalam HEX (hexadecimal).

RGB

Function warna RGB, merupakan perpaduan warna antara Red, Green dan Blue, dengan kisaran angka antara 0 - 255, misalnya untuk membuat warna putih dapat ditulis dengan function rgb(255,255,255) dan untuk membuat warna hitam dengan function rgb(0,0,0), masing-masing kisaran angka red, green dan blue dapat ditentukan dengan angka kisaran dari 0 - 255.

RGA

Hampir sama dengan function warna RGB, cuma ditambahkan parameter alpha pada urutan terakhir sehingga function rgba mempunyai 4 parameter yaitu Red, Green, Blue dan Aplha, nilai alpha berkisar antara 0.1 sampai dengan 1.0, yang mana nilai 0.1 adalah transparent penuh, sedangkan nilai 1.0 adalah full color, contoh penulisan function rgba adalah rgba(0.0.0.0.1).

HSL

HSL kepanjangan dari Hue, Saturation dan Lightness, hampir sama dengan penulisan format RGB, function HSL ditulis dengan nilai dari Hue, Saturation, Lightness, penulisan function hsl adalah hsl(H,S,L). Nilai Hue berkisar antara 0 - 360 dengan rincian 0 adalah Red, 120 adalah hijau dan 240 adalah biru. Nilai saturation adalah nilai persentase dari gray dan full color, 0% adalah gray dan 100% adalah full color. Contoh penulisan function HSL adalah hsl(120,50%,50%).

HSLA

Huruf A pada function HSLA juga sama dengan function pada RGBA, yaitu menunjukkan nilai alpha, yang memberikan kesan transparent atau full color, parameter alpha tersebut berkisar antara 0/1 dan 1.0, dengan nilai 0.1 melambangkan full transparent sedangkan nilai 1.0 adalah full color.

HEX

Pembuatan color dapat juga menggunakan format HEX (Hexadecimal) yang merupakan perpaduan tiga warna utama yaitu Red, Green dan Blue, formatnya adalah diawali dengan tanda pagar (#) kemudian diikuti oleh RR untuk nilai hexa Red, kemudian GG untuk green dan terakhir adalah nilai hexa untuk BB yaitu warna Blue, singkatnya format penulisan kode warna HEX adalah #RRGGBB, untuk membuat warna hitam penulisannya adalah #000000 sedangkan warna putih adalah #FFFFFF, kode hexa berkisar antara angka 0 sampai dengan huruf F, (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Terkadang kode hex ditulisa menggunakan tiga angka saja, contoh #FC0, sebenarnya itu adalah penulisan singkat dari 6 kode yaitu #FFCC00,

File html di bawah ini akan menunjukkan bagaimana membuat warna tersebut menggunakan beberapa format warna yang disediakan pada css.

Hasil ketika file index.html tersebut dijalankan pada browser adalah sebagai berikut :

Demikian contoh penggunakan tag color pada css, semoga bermanfaat terutama untuk yang sedang menulis tulisan ini, dan kita semua, sampai jumpa pada dokumentasi belajar css yang akan datang semoga sehat selalu dan bertambah ilmu, aamiin.