Belajar CSS - Warna, Opacity, dan Model Warna Modern
Episode ini mengupas warna dalam CSS: format HEX, RGB, RGBA, dan HSL, perbedaan opacity dengan alpha channel, serta model warna modern seperti color() dan oklch untuk gamut yang lebih luas.
#Pendahuluan
Episode 3 memperkenalkan properti color dan background-color dengan nilai HEX. Episode 6 memperluas itu: kalian akan memahami format warna secara utuh — HEX, RGB, RGBA, dan HSL — serta mengontrol transparansi dengan opacity dan alpha channel. Model warna modern seperti color() dan oklch memberi kontrol yang lebih akurat, dan menjalankan npx serve . memudahkan kalian menguji semuanya.
#Format Warna: HEX dan RGB
#HEX
Notasi HEX menuliskan warna dalam enam digit heksadesimal, dua digit untuk setiap channel merah, hijau, dan biru:
.primary {
background-color: #2563eb;
}
.shorthand {
border-color: #0f0;
}#2563eb berarti merah 0x25, hijau 0x63, dan biru 0xeb. Bila kedua digit per channel sama, kalian bisa menyingkatnya menjadi tiga digit, seperti #0f0 untuk hijau penuh.
#RGB dan RGBA
Fungsi rgb() menerima nilai desimal 0-255 atau persentase:
.solid {
color: rgb(37, 99, 235);
}
.soft {
background-color: rgba(37, 99, 235, 0.2);
}Parameter keempat pada rgba() adalah alpha — tingkat transparansi antara 0 dan 1. Alpha berpadu dengan warna latar belakang di belakangnya, sehingga warna terlihat "menyala" atau "tipis" tergantung nilai alpha.
#HSL: Warna yang Lebih Intuitif
HSL menyusun warna dari tiga dimensi: hue (roda warna, 0-360 derajat), saturation (persen), dan lightness (persen):
.base {
background-color: hsl(221, 83%, 53%);
}
.hover {
background-color: hsl(221, 83%, 40%);
}
.alpha-hsl {
border: 1px solid hsla(221, 83%, 53%, 0.5);
}Keunggulan HSL: untuk membuat warna lebih gelap atau lebih terang, kalian cukup menurunkan atau menaikkan lightness tanpa menyentuh hue. Ini jauh lebih mudah dibayangkan daripada mengutak-atik tiga nilai RGB.
#Opacity vs Alpha Channel
opacity dan alpha keduanya membuat elemen transparan, tetapi efeknya berbeda:
.opacity-full {
opacity: 0.5;
}
.alpha-bg {
background-color: rgba(37, 99, 235, 0.5);
}opacity: 0.5 membuat seluruh elemen termasuk teks dan border menjadi setengah transparan, dan menciptakan stacking context baru. Alpha channel hanya mewarnai bagian yang diberi nilai — teks di dalam elemen dengan rgba pada latar belakang tetap pekat.
.kartu {
background-color: rgb(37, 99, 235);
opacity: 0.5;
}
.badge {
color: rgba(255, 255, 255, 0.8);
}Gunakan opacity untuk menyembunyikan atau meredupkan seluruh elemen. Gunakan alpha untuk membuat overlay, bayangan, atau warna latar yang tembus pandang tanpa memengaruhi teks.
#Model Warna Modern
#Color Function dan Oklch
Fungsi color() bisa merujuk ruang warna lain seperti display-p3. Ruang warna oklch meniru cara mata manusia melihat warna dan memberikan distribusi lightness yang lebih merata:
.modern {
color: oklch(0.55 0.2 255);
}
.wide-gamut {
background-color: color(display-p3 1 0 0);
}Pada oklch, nilai pertama adalah lightness (0-1), kedua adalah chroma (intensitas), dan ketiga adalah hue dalam derajat. Browser modern mendukung oklch, dan nilai ini memberi kontrol warna yang lebih konsisten saat diubah lightness-nya.
#Color-Mix
color-mix() mencampur dua warna dengan persentase tertentu, berguna untuk membuat varian warna secara otomatis:
.warna-hover {
background-color: color-mix(in srgb, #2563eb 85%, black);
}
.warna-active {
background-color: color-mix(in oklch, #2563eb 70%, white);
}Alih-alih menebak HEX varian hover, campur warna dasar dengan hitam atau putih. color-mix() juga bekerja dengan custom properties, sehingga tema bisa menghasilkan varian secara konsisten.
#Latihan: Palet Warna
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Palet Warna</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swatch swatch-primary">HEX</div>
<div class="swatch swatch-rgba">RGBA</div>
<div class="swatch swatch-hsl">HSL</div>
<div class="swatch swatch-oklch">OKLCH</div>
</body>
</html>.swatch {
display: inline-block;
width: 120px;
padding: 24px;
color: white;
border-radius: 8px;
text-align: center;
}
.swatch-primary {
background-color: #2563eb;
}
.swatch-rgba {
background-color: rgba(37, 99, 235, 0.7);
}
.swatch-hsl {
background-color: hsl(221, 83%, 40%);
}
.swatch-oklch {
background-color: oklch(0.55 0.2 255);
}Buka halaman di browser dan perhatikan perbedaan setiap swatch. Untuk pengujian cepat, buka DevTools lalu ubah nilai warna dan klik tombol simpan di tab Colors.
#Kesalahan Umum dan Solusinya
#Alpha Double Di Mana-mana
Bila teks terlihat pudar, cek apakah opacity dipakai pada elemen induk — itu meredupkan seluruh turunannya. Gunakan alpha channel pada latar belakang bila hanya warna yang harus transparan.
#HSL dan Lightness Ekstrem
Nilai lightness 100 persen selalu putih dan 0 persen selalu hitam, apa pun hue-nya. Bila warna terlihat "mencuci", turunkan lightness dan naikkan chroma.
#Mencampur Model Secara Sembarangan
HEX, RGB, dan HSL menampilkan hasil yang sama untuk warna yang setara. Pilih satu gaya dominan di proyek, misalnya HSL atau oklch, agar konsisten dan mudah dirawat.
#Penutup
Inti yang harus dibawa pulang:
- HEX adalah singkatan RGB dua digit per channel;
rgba()danhsla()menambahkan alpha. - HSL mengekspresikan hue, saturation, dan lightness sehingga varian warna lebih mudah dibuat.
opacitymeredupkan seluruh elemen; alpha hanya memengaruhi warna yang diberi nilai.oklchmenawarkan ruang warna yang lebih akurat dan konsisten secara persepsi.color-mix()menghasilkan varian warna secara otomatis tanpa menebak angka.- Selalu uji kontras teks terhadap warna latar untuk aksesibilitas.
Di episode 7 selanjutnya kita akan membahas Flexbox untuk layout satu dimensi — cara menyusun elemen secara horizontal atau vertikal dengan control penuh terhadap perataan, pembagian ruang, dan urutan. Siapkan HTML latihan kalian.