HEX, RGB, HSL: Memahami Kode Warna Web

Anda sedang mengedit website dan melihat #FF5733 dalam CSS. Atau Anda bekerja dengan desainer yang mengirimkan rgb(255, 87, 51). Atau alat desain menampilkan warna sebagai hsl(11, 100%, 60%). Ketiganya menggambarkan warna yang persis sama, merah-oranye yang cerah, tetapi dalam tiga format berbeda.

Jika Anda pernah bingung dengan kode warna web, panduan ini akan menjelaskan semuanya dalam lima menit.

Cara Kerja Warna Digital

Setiap warna di layar Anda dibuat dengan mencampur tiga warna primer cahaya: Merah, Hijau, dan Biru. Ini adalah model warna RGB. Dengan memvariasikan intensitas setiap saluran dari nol (mati) hingga maksimum (kecerahan penuh), Anda dapat membuat salah satu dari sekitar 16,7 juta warna yang dapat ditampilkan layar standar.

• Merah 255, Hijau 0, Biru 0 = merah murni
• Merah 0, Hijau 255, Biru 0 = hijau murni
• Merah 0, Hijau 0, Biru 255 = biru murni
• Merah 255, Hijau 255, Biru 255 = putih (semua saluran penuh)
• Merah 0, Hijau 0, Biru 0 = hitam (semua saluran mati)
• Merah 255, Hijau 255, Biru 0 = kuning (merah + hijau)

Setiap format warna yang digunakan di web hanyalah cara berbeda untuk mengekspresikan nilai saluran ini.

Warna HEX

Tampilannya

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Cara Kerjanya

Kode warna HEX adalah string enam karakter yang didahului tanda pagar. Enam karakter dibagi menjadi tiga pasang, masing-masing mewakili saluran warna dalam heksadesimal (basis 16):

Heksadesimal menggunakan digit 0-9 dan huruf A-F, di mana A=10, B=11, C=12, D=13, E=14, F=15. Jadi FF dalam heksadesimal sama dengan 255 dalam desimal (15 × 16 + 15 = 255).

Menguraikan #FF5733:

• FF = Merah pada 255 (maksimum)
• 57 = Hijau pada 87
• 33 = Biru pada 51

Ini menghasilkan merah-oranye yang cerah.

Singkatan

Ketika setiap pasang memiliki dua karakter yang identik, Anda dapat menggunakan singkatan tiga karakter:

• #FF0000 dapat ditulis sebagai #F00
• #3366FF dapat ditulis sebagai #36F
• #000000 dapat ditulis sebagai #000

Warna RGB

Tampilannya

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Cara Kerjanya

Notasi RGB secara langsung menyatakan nilai saluran merah, hijau, dan biru sebagai angka desimal dari 0 hingga 255. Ini adalah format yang paling intuitif karena angkanya langsung sesuai dengan intensitas setiap saluran cahaya.

rgb(255, 87, 51) berarti:

• Merah: 255 (maksimum)
• Hijau: 87 (sekitar sepertiga)
• Biru: 51 (sekitar seperlima)

RGBA: Menambahkan Transparansi

RGBA menambahkan nilai keempat untuk opasitas (alpha), berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram):

rgba(255, 87, 51, 0.5)   /* 50% transparan */
rgba(0, 0, 0, 0.8)        /* 80% buram hitam */

Ini berguna untuk overlay, bayangan, dan elemen desain mana pun yang perlu menampilkan konten di belakangnya.

Warna HSL

Tampilannya

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Cara Kerjanya

HSL singkatan dari Hue (Rona), Saturation (Saturasi), Lightness (Kecerahan). Alih-alih berpikir dalam hal pencampuran saluran merah/hijau/biru, HSL menggambarkan warna seperti cara manusia secara alami memikirkannya.

Hue adalah warna itu sendiri, dinyatakan sebagai derajat pada roda warna (0-360):

• 0° / 360° = Merah
• 60° = Kuning
• 120° = Hijau
• 180° = Cyan
• 240° = Biru
• 300° = Magenta

Saturation adalah seberapa cerah warnanya, dari 0% (abu-abu) hingga 100% (jenuh penuh).

Lightness adalah seberapa terang atau gelap warnanya, dari 0% (hitam) hingga 100% (putih). 50% adalah kecerahan "normal".

hsl(11, 100%, 60%) berarti:

• Hue: 11° (sedikit merah oranye)
• Saturation: 100% (sangat cerah)
• Lightness: 60% (sedikit lebih terang dari normal)

HSLA: Menambahkan Transparansi

Seperti RGBA, HSLA menambahkan saluran alpha:

hsla(11, 100%, 60%, 0.5)   /* 50% transparan */

Kapan Menggunakan Format Mana

Untuk Pengembangan Web

HEX adalah standar de facto. Sebagian besar CSS ditulis dengan kode HEX karena kompak dan setiap pengembang mengenalinya.

Untuk Sistem Desain

HSL ideal untuk membuat palet warna yang konsisten. Untuk membuat varian lebih terang dan lebih gelap dari warna merek, Anda cukup menyesuaikan nilai kecerahan:

• Primer: hsl(210, 80%, 50%)
• Varian terang: hsl(210, 80%, 70%)
• Varian gelap: hsl(210, 80%, 30%)

Hue dan saturasi tetap sama, menjamin varian adalah "warna" yang sama pada kecerahan yang berbeda.

Untuk Transparansi

Gunakan RGBA atau HSLA saat Anda memerlukan warna semi-transparan untuk overlay, bayangan, atau efek kaca.

Konversi Antar Format

Anda akan sering perlu mengonversi antar format. Desainer mengirimkan nilai HSL tetapi codebase Anda menggunakan HEX. Panduan merek menentukan RGB tetapi Anda memerlukan HSL untuk membuat varian.

Matematikanya mudah tetapi membosankan jika dilakukan secara manual. Alat konverter menanganinya secara instan.

Mulai bekerja dengan warna:

• Konversi Kode Warna
• Alat Konverter Warna
• Generator Palet Warna

Semua alat gratis dan berfungsi langsung di browser Anda.