HSL ke HEX

Bandingkan HSL dengan HEX

CSS 3 memperkenalkan cara lain untuk mendefinisikan warna menggunakan HSL (dari bahasa Inggris. Hue, Saturation, Lightness). adalah model di mana warna ditentukan oleh tiga parameter: hue, saturation, dan lightness. Mari kita lihat setiap parameter secara terpisah. Keuntungan utama dari HSL adalah kemampuannya untuk menentukan karakteristik warna secara independen satu sama lain. Ini membuka peluang luar biasa bagi Anda. Anda dapat dengan mudah membuat warna menjadi lebih cerah, lebih gelap, lebih jenuh, atau desaturasi. Dan dengan tetap menjaga keteduhannya. Atau sebaliknya - ubah rona tanpa mengubah saturasi atau kecerahannya. Seringkali, preprocessor digunakan untuk menggunakan fitur-fitur tersebut, tetapi mungkin saja tanpa mereka. Fungsi hsl () digunakan untuk menentukan warna HSL. Fungsi tersebut mengambil tiga nilai, dipisahkan dengan koma: Hue, Saturation, dan Lightness. Dengan mengubah nilai saturasi dan kecerahan, Anda bisa mendapatkan rona yang berdekatan untuk warna tertentu.

Dalam kebanyakan kasus, dimungkinkan untuk mengenali warna dengan kode hex, hanya dengan mempertimbangkan digit pertama dari pasangan. Pada contoh di bawah ini, terlihat jelas bahwa warna tersebut bercampur dengan banyak warna merah, sedikit biru, dan tidak ada hijau sama sekali. Memahami warna dengan kode hex memungkinkan perancang web untuk menavigasi kode halaman lebih cepat, dan selain itu, Anda selalu dapat mengesankan kolega atau klien dengan mengatakan Ah, betapa indahnya warna merah anggur. Anda juga dapat dengan mudah mengubah kecerahan, corak, atau saturasi warna hanya dengan mengedit kode heksadesimalnya. Pada contoh pertama di bawah, salah satu pasangan diubah dalam langkah 10%, sementara kecerahan warna meningkat. Pada contoh kedua, kecerahan naik, tetapi saturasinya turun. Nilai RGB juga dapat ditentukan menggunakan nilai warna heksadesimal (HEX) berupa: #RRGGBB, dimana RR (merah), GG (hijau), dan BB (biru) adalah nilai heksadesimal dari 00 hingga FF (sama seperti desimal 0- 255). Sistem heksadesimal, berbeda dengan sistem desimal, didasarkan, seperti namanya, pada angka 16.