Format Warna Dijelaskan: HEX, RGB, dan HSL
Jawaban Cepat
HEX (#RRGGBB) dan RGB (0—55 per saluran) secara langsung mengkodekan intensitas merah, hijau, dan biru. HSL (hue 0—60°, saturation/lightness 0—00%) mengkodekan warna dengan cara yang sesuai dengan persepsi manusia, sehingga memudahkan pembuatan palet dan corak. Konversikan ketiganya dengan Konverter Warna kami.
Perkenalan
Warna web ditentukan dalam tiga format dominan: HEX (base-16 merah, hijau, biru), RGB (desimal 0—55 per saluran), dan HSL (rona, saturasi, kecerahan). Ketiganya mendeskripsikan ruang warna sRGB yang sama namun menampilkan sumbu yang berbeda: HEX dan RGB berorientasi pada perangkat keras (nilai saluran langsung), sedangkan HSL berorientasi pada manusia (rona intuitif, saturasi, dan kecerahan). CSS modern juga mendukung alfa melalui HEX8, rgba(), dan hsla().
Langkah demi Langkah
-
Pahami notasi HEX
HEX menulis setiap saluran sebagai dua digit nomor basis-16: #RRGGBB. 00 mati, FF (255) intensitas penuh. #FF0000 berwarna merah murni, #00FF00 hijau murni, #0000FF biru murni, #FFFFFF putih, #000000 hitam. Singkatan 4 digit #RGB diperluas menjadi #RRGGBB, dan #RRGGBBAA menambahkan alfa (misalnya #FF573380 adalah 50% alfa).
-
Pahami notasi RGB
RGB menggunakan desimal 0—55 per saluran: rgb(255, 87, 51) sama dengan #FF5733. Fungsi rgba() menambahkan 0— alpha: rgba(255, 87, 51, 0.5) adalah 50% buram. RGB setara dengan HEX —hanya desimal, bukan basis-16.
-
Pahami notasi HSL
HSL menggunakan corak warna (0—60° pada roda warna: 0=merah, 120=hijau, 240=biru), saturasi (0% = abu-abu, 100% = penuh warna), dan kecerahan (0% = hitam, 50% = normal, 100% = putih). hsl(11, 100%, 60%) berwarna oranye cerah. HSL mempermudah pembuatan rona (menaikkan kecerahan) dan corak (menurunkan kecerahan) dengan rona yang sama.
-
Konversi antar format
HEX→RGB: parsing setiap pasangan sebagai basis-16. RGB→HEX: mengonversi setiap saluran menjadi 2 digit basis-16. RGB→HSL: menghitung maks/mnt saluran yang dinormalisasi, kecerahan = (maks+min)/2, saturasi bergantung pada kecerahan, rona adalah sudut saluran dominan. Gunakan Pengonversi Warna kami untuk melakukan semua ini secara instan.
-
Pilih format yang tepat untuk tugas tersebut
Gunakan HEX untuk kekompakan dalam desain token dan aset. Gunakan RGB/rgba() saat Anda perlu melakukan interpolasi atau menganimasikan saluran. Gunakan HSL/HSLA saat membuat palet, corak, atau variasi tema —menyesuaikan kecerahan sebesar 10% jauh lebih mudah daripada memikirkan tentang RGB delta.
Contoh
Merah murni dalam ketiga format
Masukan: #FF0000
Keluaran: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Oranye cerah
Masukan: #FF5733
Keluaran: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Putih dan hitam
Masukan: #FFFFFF dan #000000
Keluaran: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Membangun naungan 5 langkah dari satu rona HSL
Masukan: hsl(210, 70%, 50%) — tingkat kecerahan bervariasi 30/40/50/60/70%
Keluaran: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —palet biru yang koheren
Masalah Umum
- Mencampur HEX 3-digit dan 6-digit: #F00 dan #FF0000 memiliki warna yang sama, tetapi beberapa parser hanya menerima satu bentuk. Normalisasikan kode menjadi 6 digit untuk menghindari kejutan.
- Lupa bahwa HSL kecerahan 50% bukanlah 'setengah kecerahan': pada saturasi 100%, kecerahan 50% adalah rona murni; di atas 50% warnanya menjadi putih, di bawah 50% warnanya menjadi hitam. '50% abu-abu' adalah hsl(0, 0%, 50%).
- Kebingungan saluran alfa: #RRGGBBAA (HEX8) didukung di browser modern tetapi tidak di browser lama; rgba()/hsla() memiliki dukungan yang lebih luas. Selalu uji lingkungan target.
- Ketidakcocokan ruang warna: HEX, RGB, dan HSL semuanya menggambarkan sRGB. Jika Anda mengonversi ke/dari P3 atau Lab/OKLCH (digunakan oleh tampilan modern), salinan saluran yang naif menghasilkan warna yang salah — gunakan pustaka warna yang tepat.
Kiat
- Gunakan HSL saat mendesain palet: pilih satu rona, lalu variasikan kecerahan (misalnya 30/50/70%) dan saturasi (misalnya 60/80/100%) untuk menghasilkan corak dan rona yang koheren.
- Untuk aksesibilitas, periksa rasio kontras dengan latar belakang —WCAG AA memerlukan 4,5:1 untuk teks normal, AAA 7:1. Gunakan Pengonversi Warna kami untuk menghitung pencahayaan dan kontras relatif.
- Lebih suka CSS color-mix() atau oklch() modern untuk interpolasi yang seragam —RGB interpolasi dapat melewati abu-abu berlumpur saat mencampurkan warna komplementer.
- Saat membuat gradien, konversi titik akhir ke format yang sama terlebih dahulu —mencampur HEX dan HSL dalam satu deklarasi gradien dapat menghasilkan titik tengah yang tidak terduga.