Konverter Warna — HEX, RGB & HSL

Konversikan warna antara tiga format yang sering ditemui setiap desainer dan developer: HEX (#3B82F6), RGB (rgb(59, 130, 246)), dan HSL (hsl(217, 91%, 60%)). Tempel kode hex untuk melihat nilai RGB dan HSL-nya, atau ganti mode untuk membuat kode hex dari nilai RGB.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

Cara kerja perhitungan ini

Warna HEX menggabungkan tiga saluran — merah, hijau, biru — ke dalam string heksadesimal (basis 16) 6 digit, dua digit per saluran, masing-masing berkisar dari 00 hingga FF (0–255 dalam desimal). Bentuk singkat 3 digit seperti #FFF menggandakan setiap digit, sehingga #FFF sama dengan #FFFFFF.

RGB menuliskan ketiga saluran yang sama sebagai angka desimal biasa 0–255, itulah sebabnya rgb(59, 130, 246) dan #3B82F6 menggambarkan warna yang persis sama — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

HSL menggambarkan warna yang sama dengan cara berbeda: Hue adalah posisi pada roda warna 0–360° (0 = merah, 120 = hijau, 240 = biru), Saturation menunjukkan seberapa cerah warna tersebut (0% = abu-abu, 100% = saturasi penuh), dan Lightness menunjukkan seberapa dekat warna dengan hitam atau putih (0% = hitam, 100% = putih). Nilai ini dihitung dari nilai RGB dengan mencari saluran maksimum/minimum beserta selisihnya.

Contoh perhitungan

"blue-500" bawaan Tailwind CSS adalah #3B82F6. Jika dikonversi, hasilnya rgb(59, 130, 246) dan hsl(217, 91%, 60%) — warna biru yang sama, ditulis dengan tiga cara berbeda dalam CSS.

HEX vs RGB vs HSL — kapan menggunakan masing-masing

Format	Contoh	Cocok untuk
HEX	#3B82F6	Alat desain, lembar warna merek, copy-paste cepat ke CSS
RGB	rgb(59, 130, 246)	Saat butuh nilai saluran eksplisit atau opasitas rgba()
HSL	hsl(217, 91%, 60%)	Membuat palet warna — menyesuaikan lightness/saturation sambil mempertahankan hue

Cara digit hex berkaitan dengan saluran warna

#RRGGBB — RR adalah merah (00–FF), GG adalah hijau (00–FF), BB adalah biru (00–FF)
Setiap pasangan adalah angka basis 16: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 adalah hitam, #FFFFFF adalah putih, #FF0000 adalah merah murni
Bentuk singkat 3 digit menggandakan setiap digit: #ABC → #AABBCC

Membaca nilai HSL sekilas

hsl(217, 91%, 60%) langsung memberi tahu tiga hal: 217° adalah corak biru (biru berada sekitar 210–250°), saturasi 91% berarti warnanya cerah, bukan pudar, dan lightness 60% berarti warnanya berada nyaman di antara hitam dan putih — biru yang terang dan jernih.

Ini membuat HSL praktis untuk membuat palet yang konsisten: pertahankan hue tetap di 217 dan ubah lightness dari 20% (navy yang hampir hitam) hingga 90% (biru langit pucat) untuk mendapatkan rangkaian corak/gelap-terang yang serasi dalam keluarga warna yang sama.

Warna referensi umum

Nama	HEX	RGB
Hitam	#000000	rgb(0, 0, 0)
Putih	#FFFFFF	rgb(255, 255, 255)
Merah	#FF0000	rgb(255, 0, 0)
Hijau	#00FF00	rgb(0, 255, 0)
Biru	#0000FF	rgb(0, 0, 255)

Pertanyaan umum

Format warna apa yang sebaiknya digunakan di CSS?

Ketiganya tampil identik di semua browser modern, jadi ini soal alur kerja. HEX ringkas dan umum dipakai di alat desain; RGB eksplisit soal nilai setiap saluran dan mendukung rgba() untuk opasitas; HSL paling mudah disesuaikan manual karena Anda bisa mengubah lightness atau saturation tanpa menghitung ulang ketiga saluran.

Apakah alat ini menyimpan atau mengunggah warna saya?

Tidak. Setiap konversi berjalan langsung di browser Anda dengan perhitungan sederhana — tidak ada data yang dikirim ke server atau disimpan.

Apa bedanya #FFF dan #FFFFFF?

Tidak ada bedanya — #FFF adalah singkatan CSS di mana setiap digit digandakan, sehingga #FFF, #ffFFFF, dan #FFFFFF semuanya berarti putih murni. Alat ini menerima kode hex 3 digit maupun 6 digit.

Bagaimana cara menambahkan transparansi (alpha)?

Tambahkan saluran ke-4: rgba(59, 130, 246, 0.5) atau hsla(217, 91%, 60%, 0.5) untuk opasitas 50%, atau kode hex 8 digit seperti #3B82F680 (dua digit hex tambahan adalah saluran alpha, 00–FF). Konverter ini berfokus pada trio RGB/HEX/HSL yang solid (tanpa transparansi); tambahkan alpha secara manual jika Anda membutuhkannya.

Mengapa RGB dan HSL menghasilkan angka yang tampak berbeda untuk warna yang sama?

Keduanya adalah dua sistem koordinat untuk titik yang sama dalam ruang warna. RGB adalah saluran cahaya aditif; HSL menyusun ulang informasi itu menjadi hue/saturation/lightness, yang sering kali lebih intuitif untuk memilih atau menyesuaikan corak warna — misalnya menjaga hue dan saturation tetap dan hanya menaikkan lightness untuk mendapatkan warna yang lebih terang.

Apakah huruf besar atau huruf kecil yang benar untuk kode hex?

Keduanya berfungsi di mana saja — hex tidak membedakan huruf besar/kecil. Alat ini menampilkan hasil dalam huruf besar (#3B82F6) demi keterbacaan, tetapi #3b82f6 adalah warna yang persis sama.

Apa yang terjadi jika saya memasukkan kode hex yang tidak valid?

Kolom RGB dan HSL akan tetap kosong sampai Anda memasukkan nilai hex 3 atau 6 digit yang valid (hanya huruf A–F/a–f dan angka 0–9, dengan atau tanpa tanda # di depan).

Alat ini hanya untuk informasi umum. Verifikasi angka penting secara mandiri. · Terakhir ditinjau: 25 Agustus 2026