Mengenal CSS HSL Colors: Cara Seru Mainan Warna di Web (Tutorial CSS Part 9)
 |
| Gambar 9.0 : Logo CSS |
Kalau kamu sudah pernah mainan warna pakai RGB di CSS, ada satu cara lain yang gak kalah keren dan lebih intuitif: HSL. Singkatan dari Hue, Saturation, Lightness, HSL ini bisa dibilang lebih gampang dipahami, apalagi buat yang suka mikir warna kayak di roda warna.
Yuk kita kulik satu-satu!
1. Apa Itu Nilai HSL?
Format warna HSL di CSS ditulis kayak gini:
color: hsl(hue, saturation, lightness);
- Hue (warna dasar): Diukur dalam derajat (0 sampai 360). Bayangin lingkaran warna, 0° itu merah, 120° itu hijau, 240° itu biru, dan seterusnya.
- Saturation (kejenuhan): Seberapa “murni” warna itu. Ditulis dalam persen, 100% itu warnanya “nendang”, 0% jadi abu-abu.
- Lightness (kecerahan): Juga persen. 0% itu hitam, 100% itu putih. Nilai 50% biasanya warna aslinya.
Contoh:
color: hsl(0, 100%, 50%); /* Merah cerah */
color: hsl(240, 100%, 50%); /* Biru cerah */
color: hsl(120, 100%, 25%); /* Hijau gelap */
Contoh kode dengan internal CSS:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh HSL Colors</title>
<style>
.merah {
color: hsl(0, 100%, 50%); /* Merah cerah */
}
.biru {
color: hsl(240, 100%, 50%); /* Biru cerah */
}
.hijau {
color: hsl(120, 100%, 25%); /* Hijau gelap */
}
</style>
</head>
<body>
<h1 class="merah">Ini Teks Merah Cerah</h1>
<h1 class="biru">Ini Teks Biru Cerah</h1>
<h1 class="hijau">Ini Teks Hijau Gelap</h1>
</body>
</html>
Hasilnya:
 |
| Gambar 9.1 : Contoh CSS Colors HSL Value |
2. Saturation: Mainan Kejenuhan Warna
Saturation ngaruh banget ke “seberapa hidup” suatu warna. Coba perhatiin ini:
color: hsl(200, 100%, 50%); /* Biru laut pekat */
color: hsl(200, 50%, 50%); /* Biru lebih kalem */
color: hsl(200, 0%, 50%); /* Jadi abu-abu! */
Lihat kan? Semakin kecil saturation, makin pucat warnanya, sampai akhirnya jadi abu-abu kalau 0%.
Contoh kode dengan internal CSS:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Eksperimen Warna HSL</title>
<style>
.biru-laut-pekat {
color: hsl(200, 100%, 50%);
}
.biru-kalem {
color: hsl(200, 50%, 50%);
}
.abu-abu {
color: hsl(200, 0%, 50%);
}
</style>
</head>
<body>
<h2 class="biru-laut-pekat">Ini Biru Laut Pekat</h2>
<h2 class="biru-kalem">Ini Biru Lebih Kalem</h2>
<h2 class="abu-abu">Ini Jadi Abu-Abu</h2>
</body>
</html>Hasilnya:
 |
| Gambar 9.2 : Contoh HSL Value Saturation |
3. Lightness: Ubah Cerah-Gelap Warna
Lightness ini ibarat ngatur lampu sorot ke warna tersebut. Makin kecil, makin gelap. Makin gede, makin terang.
color: hsl(0, 100%, 20%); /* Merah gelap */
color: hsl(0, 100%, 50%); /* Merah cerah */
color: hsl(0, 100%, 80%); /* Pink pucat */
Bisa bikin efek terang-gelap tanpa ngubah warna dasar—cocok banget buat bikin tombol atau efek hover.
Contoh kode dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.merah-gelap {
color: hsl(0, 100%, 20%); /* Merah gelap */
}
.merah-cerah {
color: hsl(0, 100%, 50%); /* Merah cerah */
}
.pink-pucat {
color: hsl(0, 100%, 80%); /* Pink pucat */
}
</style>
</head>
<body>
<h2 class="merah-gelap">Ini Merah Gelap</h2>
<h2 class="merah-cerah">Ini Merah Cerah</h2>
<h2 class="pink-pucat">Ini Pink Pucat</h2>
</body>
</html>
Hasilnya:
 |
| Gambar 9.3 : Contoh Lightness HSL Value |
4. Shades of Gray: Trik Simple Bikin Abu-Abu
Kamu bisa bikin berbagai nuansa abu-abu hanya dengan satu warna (saturation = 0%).
color: hsl(0, 0%, 10%); /* Abu-abu hampir hitam */
color: hsl(0, 0%, 50%); /* Abu-abu netral */
color: hsl(0, 0%, 90%); /* Abu-abu terang */
Gak peduli nilai hue-nya berapa, selama saturation 0%, hasilnya tetap abu-abu.
Contoh kode dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.abu-hitam {
color: hsl(0, 0%, 10%); /* Abu-abu hampir hitam */
}
.abu-netral {
color: hsl(0, 0%, 50%); /* Abu-abu netral */
}
.abu-terang {
color: hsl(0, 0%, 90%); /* Abu-abu terang */
}
</style>
</head>
<body>
<h2 class="abu-hitam">Ini Abu-Abu Hampir Hitam</h2>
<h2 class="abu-netral">Ini Abu-Abu Netral</h2>
<h2 class="abu-terang">Ini Abu-Abu Terang</h2>
</body>
</html>Hasilnya:
 |
| Gambar 9.4 : Contoh Shades of Gray dengan HSL Value |
5. HSLA: Tambahin Transparansi
Kalau HSL itu keren, HSLA lebih keren lagi—karena bisa nambahin transparansi! Formatnya:
hsla(hue, saturation, lightness, alpha);
- Alpha: Nilai transparansi dari 0 (transparan total) sampai 1 (opacity penuh).
Contoh:
color: hsla(0, 100%, 50%, 0.5); /* Merah setengah transparan */
color: hsla(200, 100%, 50%, 0.3); /* Biru muda transparan */
Pas banget buat elemen yang pengen kelihatan "melayang" atau semi transparan.
Contoh kode dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.merah-transparan {
color: hsla(0, 100%, 50%, 0.5); /* Merah setengah transparan */
}
.biru-transparan {
color: hsla(200, 100%, 50%, 0.3); /* Biru muda transparan */
}
</style>
</head>
<body>
<h2 class="merah-transparan">Merah Setengah Transparan</h2>
<h2 class="biru-transparan">Biru Muda Transparan</h2>
</body>
</html>
Hasilnya:
 |
| Gambar 9.5 : Transparansi warna dengan HSLA Value |
Kesimpulan
Main warna pakai HSL/HSLA itu kayak punya kuas digital. Kamu bisa ngatur warna secara lebih natural: mau lebih gelap, lebih terang, atau dikasih efek transparan—semuanya jadi lebih mudah.
Kalau kamu lagi ngulik desain web, coba deh pakai HSL. Sekali ngerti logikanya, rasanya lebih seru daripada RGB!
Butuh demo langsung? Coba mainin kode HSL di CSS Gradient Generator atau CodePen dan lihat perubahan warnanya secara real time!
Kalau kamu suka artikel ini, jangan lupa share ke temen ngodingmu juga, ya!
Posting Komentar untuk "Mengenal CSS HSL Colors: Cara Seru Mainan Warna di Web (Tutorial CSS Part 9)"