Ada beberapa cara untuk merepresentasikan warna dalam CSS. Salah satunya adalah sistem HSL. Pada artikel ini saya akan menunjukkan kepada Anda kemungkinan apa yang terbuka untuk perancang tata letak.Apa itu HSL?
Nama format HSL berasal dari kombinasi huruf pertama Hue (hue), Saturate (saturation) dan Lightness (lightness atau brightness).Hue adalah nilai warna pada roda warna dan diatur dalam derajat. 0 ° sesuai dengan merah, 120 ° ke hijau, dan 240 ° ke biru. Nilai rona dapat bervariasi dari 0 hingga 359.
Kejenuhan adalah intensitas warna, diukur dalam persen dari 0% hingga 100%. Menentukan seberapa jauh warnanya dari abu-abu dengan kecerahan yang sama.Brightness mencirikan seberapa cerah warna dan diindikasikan sebagai persentase dari 0% hingga 100%. Nilai kecil membuat warna lebih gelap dan nilai tinggi lebih terang, nilai ekstrim 0% dan 100% sesuai dengan hitam dan putih.
Manfaat HSL ()
Keuntungan utama HSL adalah kemampuan untuk menentukan karakteristik warna secara independen satu sama lain . Ini membuka peluang besar bagi Anda. Anda dapat dengan mudah membuat warna lebih cerah, lebih gelap, lebih jenuh atau berubah warna. Dan sambil mempertahankan naungannya. Atau sebaliknya - mengubah nuansa tanpa mengubah saturasi atau kecerahannya. Seringkali, preprosesor digunakan untuk menggunakan fitur-fitur ini, tetapi Anda juga dapat melakukannya tanpa mereka.Beberapa contoh
Berasal dari warna yang sama
Salah satu tugas yang paling umum: membuat komponen yang akan mengambil satu naungan dasar tunggal, tetapi terdiri dari beberapa variasi. Dalam contoh saya, ini adalah peringatan khas di mana warna teks, latar belakang dan goresan memiliki rona dan saturasi yang sama tetapi kecerahan berbeda:.success {
border-color: hsl(120, 50%, 40%);
color: hsl(120, 50%, 20%);
background-color: hsl(120, 50%, 90%);
}
Lihat betapa cantik dan jelasnya? Segera jelas bahwa ini adalah "keluarga" bunga. Dalam format lain, akan terlihat seperti ini:
.alert {
border-color: rgb(51, 153, 51);
color: rgb(25, 77, 25);
background-color: rgb(217, 242, 217);
}
.alert {
border-color: #339933;
color: #194d19;
background-color: #d9f2d9;
}
Saya tidak tahu tentang Anda, tetapi sulit bagi saya untuk melihat kode seperti itu untuk mengatakan apakah warna-warna ini entah bagaimana terhubung atau tidak.Tapi ini sepele. Kekuatan sejati terungkap saat menggunakan properti khusus css.Seperti yang mereka katakan, perhatikan tangan Anda. Jika kita membuat komponen warna apa pun, misalnya rona, variabel, maka kita dapat dengan mudah membuat variasi variasi komponen tanpa batas dengan mengubah rona dasar saja. Dan semua turunannya akan ditolak..alert {
border-color: hsl(var(--hue), 50%, 40%);
color: hsl(var(--hue), 50%, 20%);
background-color: hsl(var(--hue), 50%, 90%);
}
Pemutihan
Dalam contoh ini, tombol mati memiliki saturasi yang berkurang. Itu masih memiliki warna biru yang halus, tetapi hampir abu-abu. Dan ketika Anda membawa tombol tetap rona dan saturasi, tetapi menjadi lebih gelap.Untuk mengatasi masalah ini, cukup mengubah hanya satu dari tiga parameter untuk mendapatkan turunan, namun warnanya mirip. Apa saat menggunakan rgb atau hex tidak begitu mudah dilakukan.Seperti pada contoh pertama, Anda dapat dengan mudah mengubah rona tanpa memengaruhi semua karakteristik warna lain di komponen Anda.Pewarisan warna
Salah satu teknik paling keren: membuat satu warna, mulai dari yang lain. Ini dicapai dengan penambahan sederhana pada calc ().:root{
--hue: 120;
}
header {
background-color: hsl(var(--hue), 30%, 20%)
}
header button {
background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}
Dalam contoh ini, rona tombol tergantung (+ 130 ° pada roda warna) pada rona wadah.Jadi dengan cara yang sederhana, Anda dapat membuat palet warna fleksibel penuh untuk situs Anda, hanya menetapkan satu warna dasar dan mulai dari itu.Dan semua komponen Anda akan mempertahankan saturasi dan kecerahan, seperti ditunjukkan dalam contoh sebelumnya.
Masa depan
Dalam spesifikasi Modul Warna CSS Level 4 , fungsi baru dijelaskan: lab () dan lch () untuk menentukan warna dalam format nama yang sama. LCH memiliki fleksibilitas yang sama dengan hsl, tetapi membawa sejumlah peningkatan, dengan memperhatikan perangkat modern. Anda dapat membaca lebih lanjut tentang ini di artikel “ LCH colors in CSS: what, why, and how? ".Total
Menurut pendapat saya, format hsl memiliki fleksibilitas yang luar biasa dibandingkan dengan alternatif. Dalam kombinasi dengan variabel, Anda secara praktis membawa semua kemungkinan untuk bekerja dengan warna dari preprosesor ke CSS asli.PS Maaf untuk judul yang keras :)