Format warna dijelaskan: HEX, RGB, dan HSL

Di web, warna yang sama bisa ditulis dengan beberapa cara — #3498db, rgb(52, 152, 219), dan hsl(204, 70%, 53%) semuanya biru yang sama persis. Mengetahui arti tiap format (dan kapan memakai yang mana) membuat memilih, menyetel, dan mencocokkan warna jauh lebih mudah. Panduan ini menguraikan HEX, RGB, dan HSL, serta hubungannya.

Semua dimulai dari merah, hijau, dan biru

Layar membuat warna dengan mencampur tiga cahaya warna: merah, hijau, dan biru. Setiap warna yang Anda lihat adalah kombinasi dari tiga kanal itu, masing-masing disetel ke intensitas dari 0 (mati) sampai 255 (penuh). Hitam total adalah 0, 0, 0; putih total adalah 255, 255, 255. HEX dan RGB hanyalah dua notasi untuk tiga angka yang sama ini.

RGB

RGB menyatakan tiga nilai kanal secara langsung:

rgb(52, 152, 219)
     R    G    B

Ia paling mudah dibaca dari ketiganya karena angkanya langsung memetakan ke "berapa banyak merah, hijau, biru". Bagus ketika Anda ingin menalar tentang kanal itu sendiri.

HEX

HEX mengodekan nilai kanal 0–255 yang sama itu dalam heksadesimal (basis 16), sebagai # diikuti tiga pasang:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Setiap pasang berjalan dari 00 (0) sampai ff (255). HEX ringkas dan merupakan default di kebanyakan alat desain dan CSS, itulah sebabnya ia format yang paling sering Anda salin-tempel. Ada juga bentuk singkat: #39f mengembang menjadi #3399ff dengan menggandakan tiap digit.

HSL

HSL menggambarkan warna dengan cara orang memikirkannya secara intuitif, dengan tiga sumbu berbeda:

• Rona (Hue) (0–360°) — warna itu sendiri pada roda: 0° merah, 120° hijau, 240° biru.
• Saturasi (Saturation) (0–100%) — seberapa cerah, dari abu-abu ke warna penuh.
• Terang (Lightness) (0–100%) — seberapa terang, dari hitam melewati warna itu ke putih.

hsl(204, 70%, 53%)
    hue  sat  light

Kekuatan super HSL adalah menyetel warna. Ingin versi lebih gelap dari sebuah warna? Turunkan terang dan biarkan rona serta saturasi. Ingin satu set bayangan yang serasi? Tahan rona tetap dan variasikan terang. Melakukan itu di HEX atau RGB berarti menghitung ulang ketiga kanal; di HSL cuma satu angka.

Alfa: menambahkan transparansi

Setiap format punya varian dengan kanal alfa untuk keburaman, dari 0 (sepenuhnya transparan) sampai 1 (sepenuhnya buram): rgba(52, 152, 219, 0.5) dan hsla(204, 70%, 53%, 0.5). CSS modern juga mengizinkan HEX 8 digit yang pasangan terakhirnya adalah alfa — #3498db80 adalah biru yang sama pada 50%.

Mana yang harus Anda pakai?

• HEX — menyalin warna merek yang tetap, atau menempel ke alat desain. Ringkas dan universal.
• RGB / RGBA — ketika Anda menalar tentang kanal mentah atau butuh transparansi sederhana.
• HSL / HSLA — ketika Anda mendesain: membangun palet, bayangan hover/aktif, atau menyetel warna berdasarkan rasa.

Kabar baiknya Anda tak perlu mengonversi dengan tangan. Konverter HEX↔RGB kami menerjemahkan antar-format seketika, dan pemilih warna membiarkan Anda memilih warna secara visual dan membaca nilai HEX, RGB, dan HSL-nya sekaligus — plus membuat gradien dan palet. Perlu mengambil warna dari gambar? Pemilih warna gambar melakukan persis itu.