SKEMA WARNA ROOT
Kode CSS dengan format #20212447 adalah format warna HEXA (Hexadecimal dengan Alpha/Transparansi) yang terdiri dari 8 karakter setelah tanda pagar.Dalam CSS, dua karakter terakhir (47) berfungsi untuk mengatur tingkat transparansi (opacity) dari warna tersebut.Penjabaran Kode Warna #20212447Kode ini dibagi menjadi 4 bagian (masing-masing 2 karakter):
20 (Red / Merah): Nilai warna merah dalam format heksadesimal.21 (Green / Hijau): Nilai warna hijau dalam format heksadesimal.24 (Blue / Biru): Nilai warna biru dalam format heksadesimal.47 (Alpha / Transparansi): Tingkat transparansi warna dalam format heksadesimal.
Hasil Warna & Konversi ke Format LainJika diterjemahkan ke format warna standar yang lebih mudah dibaca, hasilnya adalah warna abu-abu sangat gelap (hampir hitam) yang transparan:
RGB: rgb(32, 33, 36)RGBA (dengan Transparansi):
rgba(32, 33, 36, 0.28) (Artinya warna ini memiliki kepekatan/opacity sekitar 28%)
Cara Penggunaan di CSS
Anda bisa langsung memasukkan kode 8 karakter ini ke dalam file CSS Anda seperti biasa:css
.kotak-transparan {
background-color: #20212447; /* Warna latar belakang abu-abu gelap transparan */
color: #ffffff; /* Warna teks putih */
}
Perbandingan Efisiensi KodeKeduanya menghasilkan warna dan transparansi yang 100% sama, tetapi format HEX jauh lebih pendek:Format Lama (RGBA): rgba(32, 33, 36, 0.28) (23 karakter)Format Baru (HEXA): #20212447 (9 karakter)
Keuntungan Menggunakan HEX 8 KarakterLebih Ringkas: Menghemat ruang ketik dan membuat file CSS sedikit lebih ringan.Konsisten: Anda tidak perlu mencampur format HEX (seperti #ffffff) dengan rgba() dalam satu file CSS jika ingin bermain dengan transparansi.Mudah Diubah: Banyak aplikasi desain modern (seperti Figma atau Adobe XD) dan Color Picker di browser (Inspect Element) sekarang langsung menyediakan kode HEX 8 karakter ini saat kita mengatur opacity.
Nilai transparansi dari 0% sampai 100% menggunakan kode 00 sampai FF.Angka ini menggunakan sistem bilangan heksadesimal yang dihitung dari angka 0 hingga 255.Daftar Lengkap Transparansi (0% - 100%)Berikut adalah daftar kode 2 karakter terakhir untuk setiap kenaikan 5% agar Anda bisa langsung menyalinnya saat coding:
Pola Karakter yang UnikPerhatikan bahwa sistem heksadesimal tidak hanya memakai angka 0-9, tetapi juga huruf A-F (di mana A=10, B=11, C=12, D=13, E=14, F=15). Oleh karena itu, urutannya adalah 00 -> 99 -> AA -> FF.
KKKKKKKKKKKKKKK
| Persen | Kode | Persen | Kode | Persen | Kode | Persen | Kode |
|---|---|---|---|---|---|---|---|
| 0% | 00 | 25% | 40 | 50% | 80 | 75% | BF |
| 5% | 0D | 30% | 4D | 55% | 8C | 80% | CC |
| 10% | 1A | 35% | 59 | 60% | 99 | 85% | D9 |
| 15% | 26 | 40% | 66 | 65% | A6 | 90% | E6 |
| 20% | 33 | 45% | 73 | 70% | B3 | 95% | F2 |
| 100% | FF |
====================
1. Fungsi color-mix() (Si Paling Fleksibel)
:root {
color-scheme: light dark;
--bg-utama: light-dark(#ffffff, #0f0f0f);
}
/* LANGSUNG LANGSING: Tanpa memecah variabel angka, campur warna utama dengan transparan */
.lapisan-latar {
background-color: color-mix(in srgb, var(--bg-utama) 99.5%, transparent);
}
2. Relative Color Syntax / RCS (Si Paling Langsing & Presisi)
:root {
color-scheme: light dark;
--bg-warna-kontras: light-dark(#000000, #ffffff);
}
/* SANGAT CANTIK: Mengambil warna asal, lalu menyuntikkan nilai transparansi baru */
.lapisan-latar {
background-color: rgb(from var(--bg-warna-kontras) r g b / 0.005);
}
.lapisan-latar {
/* Mengambil warna dasar, memecah r g b, lalu menyuntikkan kelembutan 0.005 */
background-color: rgb(from light-dark(#000, #fff) r g b / 0.005);
}
Satu baris di atas sudah mencakup semuanya:Deteksi Mode Otomatis: Memilih hitam (#000) di mode terang atau putih (#fff) di mode gelap.Ekstraksi Instan: Membongkar nilai merah, hijau, dan biru (r g b) dari warna yang terpilih.Presisi Ekstrem: Menyuntikkan opacity sebesar 0.005 secara murni tanpa pembulatan kasar ala heksadesimal.
:root {
--warna-sakral: #ff0055; /* Warna solid dari root */
}
.elemen-cantik {
/* Browser membaca: "Ambil data DARI --warna-sakral,
bongkar nilainya jadi r, g, b, lalu beri opacity 0.005" */
background-color: rgb(from var(--warna-sakral) r g b / 0.005);
}
.elemen-lebih-terang {
/* Mengambil warna asal, lalu menaikkan nilai warna hijau (g) sebesar 20% */
background-color: rgb(from var(--warna-sakral) r calc(g + 20) b);
}
Perbandingan "Fisik" Kode (Mana yang Paling Elegan?)
| Kriteria | Trik Variabel rgb() Anda | Fungsi color-mix() | Fungsi Relative Color (from) |
|---|---|---|---|
| Kelebihan | Akurasi desimal tinggi. | Tidak perlu memecah kode warna. | Paling ringkas, membaca warna solid secara langsung. |
| Bentuk Kode | rgb(var(--warna) / 0.005) | color-mix(in srgb, var(--warna) 99.5%, transparent) | rgb(from var(--warna) r g b / 0.005) |
| Dukungan Browser | Sangat Luas (Aman). | Sangat Luas (Modern). | Luas (Terbaru). |
