Bagaimana cara mengonversi HEX ke RGB dan HSL?
Untuk mengonversi warna HEX ke RGB, pisahkan menjadi tiga pasangan 2 digit dan ubah masing-masing dari heksadesimal ke desimal (0-255); untuk mendapatkan HSL, hitung hue, saturasi, dan lightness dari nilai RGB tersebut. Contoh: #4F46E5 dikonversi menjadi rgb(79, 70, 229) dan hsl(243, 75%, 59%).
Langkah mengonversi HEX ke RGB dan HSL
- Hapus simbol # dan pisahkan kode HEX 6 digit menjadi tiga pasangan 2 digit (untuk #4F46E5: 4F, 46, E5).
- Ubah tiap pasangan heksadesimal menjadi bilangan desimal 0 sampai 255 (4F=79, 46=70, E5=229) untuk mendapatkan nilai RGB.
- Bagi tiap nilai RGB dengan 255 untuk menormalkannya ke rentang 0-1, lalu cari nilai maksimum dan minimum dari ketiganya.
- Lightness adalah rata-rata dari maks dan min; saturasi dan hue dihitung dari selisih maks dan min memakai rumus HSL baku.
- Bulatkan hue ke satuan derajat penuh (0-360) serta saturasi dan lightness ke satuan persen penuh (0-100%) untuk ditampilkan.
HEX ke RGB ke HSL
Kanal RGB = parseInt(pasangan hex, 16) · Lightness = (maks(R,G,B) + min(R,G,B)) / 2, dinormalkan 0-1
- R, G, B = nilai kanal merah, hijau, biru, masing-masing 0-255
- H, S, L = hue dalam derajat (0-360), saturasi dan lightness dalam persen (0-100%)
Konversi warna yang paling sering dicari
#FF0000 jika diubah ke RGB berapa?
#FF0000 adalah rgb(255, 0, 0) — merah murni, dengan kanal merah di nilai maksimum dan hijau serta biru di nol.
#FFFFFF jika diubah ke RGB berapa?
#FFFFFF adalah rgb(255, 255, 255) — putih murni, dengan ketiga kanal di nilai maksimum.
#000000 jika diubah ke RGB berapa?
#000000 adalah rgb(0, 0, 0) — hitam murni, dengan ketiga kanal di nol.
rgb(0, 128, 0) jika diubah ke kode hex berapa?
rgb(0, 128, 0) adalah #008000, karena 128 desimal sama dengan 80 heksadesimal (hijau tingkat menengah).
#FFA500 jika diubah ke RGB berapa?
#FFA500 adalah rgb(255, 165, 0) — warna oranye standar.
#00FF00 jika diubah ke RGB berapa?
#00FF00 adalah rgb(0, 255, 0) — hijau murni, hanya kanal hijau di nilai maksimum.
#0000FF jika diubah ke RGB berapa?
#0000FF adalah rgb(0, 0, 255) — biru murni, hanya kanal biru di nilai maksimum.
rgb(255, 255, 0) jika diubah ke kode hex berapa?
rgb(255, 255, 0) adalah #FFFF00 — kuning murni, campuran merah dan hijau di nilai maksimum.
Contoh konversi warna
| HEX | RGB | HSL |
|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Pertanyaan yang sering diajukan
Apa perbedaan HEX, RGB, dan HSL?
HEX dan RGB menjelaskan warna dengan cara yang sama, yaitu sebagai jumlah cahaya merah, hijau, dan biru, hanya berbeda notasi (basis-16 vs basis-10). HSL menjelaskan warna yang sama berdasarkan hue (warna itu sendiri), saturasi (intensitas), dan lightness (seberapa terang atau gelap), yang sering lebih intuitif untuk menyesuaikan warna secara manual.
Mengapa putih menunjukkan saturasi 0%?
Saturasi mengukur seberapa jauh suatu warna dari abu-abu. Putih murni, hitam, dan setiap corak abu-abu di antaranya memiliki nilai merah, hijau, dan biru yang sama, sehingga saturasinya selalu 0%, berapa pun tingkat lightness-nya.
Bisakah saya memasukkan kode HEX 3 digit seperti #FFF?
Alat ini mengharapkan format HEX 6 digit penuh (#RRGGBB). Singkatan 3 digit seperti #FFF adalah singkatan CSS untuk #FFFFFF, di mana tiap digit digandakan; perluas menjadi 6 digit sebelum memasukkannya di sini.
Bagaimana hue dihitung ketika merah, hijau, dan biru semuanya berbeda?
Hue bergantung pada kanal mana, merah, hijau, atau biru, yang memiliki nilai tertinggi, dan dihitung dari posisi relatif dua kanal lainnya. Hasilnya adalah sudut pada roda warna 360 derajat, di mana 0 derajat adalah merah, 120 adalah hijau, dan 240 adalah biru.
Alat ini mengonversi warna HEX 6 digit baku yang dipakai di web; tidak mendukung kanal alpha (transparansi), nama warna CSS, atau ruang warna di luar sRGB seperti HSV atau LAB.
Sources: W3C CSS Color Module Level 4