Tutorial Belajar CSS: Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA

Posted on

Selain kode warna basic RBG yang telah kita pelajari pada panduan belajar CSS basic: Cara Penulisan Kode Warna pada CSS. CSS masih mempunyai kode warna lain yang disebut dengan RGBA, HSL, dan HSLA. Pada artikel kali ini kita akan membahas Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA dalam CSS.

Dukungan web browser bagi kode warna RGBA, HSL, dan HSLA lebih terbatas bagi web browser modern seperti : IE9+, Firefox 3+, Chrome, Safari, dan Opera 10+. Sekiranya pengunjung web kamu banyak menggunakan IE8 kebawah, sebaiknya tak menggunakan kode warna ini.


Pengertian Kode Warna RGBA

Sekiranya kode warna RGB adalah sebuah singkatan dari Red Green Blue, karenanya kode warna RGBA yakni singkatan dari Red Green Blue Alpha. Tambahan kata Alpha disini merujuk kepada alpha channel. Alpha channel yakni sebuah sistem bagi menentukan tingkat transparan sebuah warna, yakni apakah sebuah warna akan melewatkan objek lain dibelakangnya atau tak.

Nilai alpha 0 akan membangun sebuah warna transparan (tembus pandang), dan nilai alpha 1 akan membangun warna pekat dan tak akan melewatkan objek lain dibelakangnya (ini adalah sebuah nilai default). Namun kita dapat membangun nilai alpha berada diantara 0 dan 1, dengan penulisan desimal seperti 0.5, 0.6, dan 0.9. Dengan demikian kita dapat membangun efek “tembus” dengan CSS, terutama bagi beberapa objek yang saling bertumpuk.


Panduan Cara Penulisan Kode Warna RGBA

Bagi penulisan kode warna RGBA pada CSS, kita menggunakan notasi penulisan desimal, dan menambahkan keyword rgba diawal penulisan nilai. Berikut yakni contoh penulisannya:

Selaku panduan bagi membangun kode RGBA, berikut yakni contoh kode CSS dan HTML yang akan menjadi bahan kita:

 Seperti yang terlihat, dengan mengubah nilai alpha, kita dapat membangun sebuah nilai warna mempunyai nilai ke-transparan-an. Bagi baris terakhir, saya menggunakan nilai alpha 0, sehingga objek tersebut akan menjadi transparan sepenuhnya.


Pengertian Kode Warna HSL

Kode warna HSL yakni singkatan dari Hue, Saturation, dan Lightness (atau sering ditulis pun dengan Luminance). Kode warna HSL adalah sebuah cara lain bagi “membangun” warna pada CSS. Sekiranya kamu telah terbiasa menggunakan kode warna RGB, kode warna HSL mungkin agak sedikit membingungkan.

Selaku contoh, bagi membangun warna merah, pada HSL kita menulisnya menjadi:

Bagi menulis kode HSL, kita membutuhkan 3 nilai:

Nilai pertama-tama yakni Hue adalah sebuah derajat warna dengan nilai 0 hingga 360. Nilai ini didapat dari lingkaran warna (color wheel) yang tertata dari warna pelangi, dimulai dari merah, jingga, kuning, hijau, biru, nila, ungu (me-ji-ku-hi-bi-ni-u). Sehingga nilai Hue 0 (atau 360 ,karena itu telah 1 putaran) menghasilkan warna merah. Merujuk kepada color wheel, warna kuning akan berada sekitar angka 50, orange di angka 100, hijau di sekitar 150, dan seterusnya. Setiap warna berada pada jarak sekitar 51 derajat.

Nilai kedua dari kode
warna HSL yakni Saturation. Saturation menyatakan seberapa “murni” sebuah warna. Nilai dari Saturation yakni persen dari 0% hingga dengan 100%, dimana nilai 0% akan membangun warna menjadi pudar dan menghasilkan warna abu-abu (terlepas dari apapun warna Hue yang dipilih). Dan nilai Saturation 100% yakni warna murni.

Nilai ketiga dari HSL yakni Lightness atau kecerahan dari warna. Sama seperti Saturation, nilai Lightness berada pada angka 0% hingga dengan 100%. Nilai 0% akan membangun warna apapun menjadi hitam, dan nilai 100% akan membangun warna apapun menjadi putih. Bagi memperoleh warna ‘normal’ angkanya berada di nilai 50%.

Kode warna HSL diperuntukkan bagi membangun kode warna yang lebih jelas dan intuitif. Namun seandainya kamu telah terbiasa menggunakan kode warna RBG, tak masalah seandainya tak menggunakan kode HSL sama sekali. Pun dengan menggunakan program seperti Photoshop atau plugin web browser, pemilihan warna dan notasi RBG dan HSL nya akan lebih gampang digunakan.


Pengertian Kode Warna HSLA

Sama seperti kode warna RGB dan RGBA, huruf “A” dari HSLA pun singkatan dari Alpha Channel. Nilai yang digunakan pun sama, yakni nilai 1 bagi warna solid, dan nilai 0 bagi warna transparan. Berikut yakni contoh penulisannya:


Panduan Cara Penulisan Kode Warna HSL dan HSLA

Bagi sesi panduan kode warna HSL dan HSLA, berikut yakni kode HTML dan CSS sederhana yang merupkan modifikasi dari contoh kita di panduan RGBA:

 Pada contoh diatas, saya membagi 2 kode CSS, 3 baris bagi HSL, dan 3 baris bagi HSLA.

Jadi, kode warna apa sebaiknya yang digunakan?

Kode warna HSL (dan HSLA) masih relatif baru pada CSS, namun telah lama digunakan di pada program desain seperti Adobe Photoshop. Sebaliknya, karena telah lebih dahulu muncul dan hampir segala web developer memahaminya, kode warna RGSB (dan RGBA) masih lebih populer dan akan sering kamu jumpai pada CSS diperbandingkan dengan HSL.


eBook CSS Uncover Duniailkom

Sekiranya kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/