HEX, RGB, HSL: Memahami Kod Warna Web

Anda sedang mengedit laman web dan melihat #FF5733 dalam CSS. Atau anda bekerja dengan pereka yang menghantar rgb(255, 87, 51). Atau alat reka bentuk menunjukkan warna sebagai hsl(11, 100%, 60%). Ini semua menerangkan warna yang sama tepat, merah-oren yang menyala, tetapi dalam tiga format berbeza.

Jika anda pernah keliru dengan kod warna web, panduan ini akan menjelaskan semuanya dalam lima minit.

Cara Warna Digital Berfungsi

Setiap warna pada skrin anda dicipta dengan mencampurkan tiga warna utama cahaya: Merah, Hijau, dan Biru. Ini adalah model warna RGB. Dengan mengubah keamatan setiap saluran dari sifar (mati) hingga maksimum (kecerahan penuh), anda boleh mencipta mana-mana daripada kira-kira 16.7 juta warna yang boleh ditunjukkan oleh paparan standard.

• Merah 255, Hijau 0, Biru 0 = merah tulen
• Merah 0, Hijau 255, Biru 0 = hijau tulen
• Merah 0, Hijau 0, Biru 255 = biru tulen
• 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 berbeza untuk menyatakan nilai saluran ini.

Warna HEX

Rupa Mereka

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

Cara Mereka Berfungsi

Kod warna HEX adalah rentetan enam aksara yang didahului oleh simbol hash. Enam aksara dibahagikan kepada tiga pasangan, setiap satu mewakili saluran warna dalam heksadesimal (asas 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 bersamaan dengan 255 dalam desimal (15 × 16 + 15 = 255).

Memecahkan #FF5733:

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

Ini menghasilkan merah-oren yang menyala.

Singkatan

Apabila setiap pasangan mempunyai dua aksara yang sama, anda boleh menggunakan singkatan tiga aksara:

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

Warna RGB

Rupa Mereka

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

Cara Mereka Berfungsi

Notasi RGB menyatakan secara langsung nilai saluran merah, hijau, dan biru sebagai nombor desimal dari 0 hingga 255. Ia adalah format yang paling intuitif kerana nombor-nombor itu secara langsung sepadan dengan keamatan setiap saluran cahaya.

rgb(255, 87, 51) bermakna:

• Merah: 255 (maksimum)
• Hijau: 87 (kira-kira satu pertiga)
• Biru: 51 (kira-kira satu perlima)

RGBA: Menambah Ketelusan

RGBA menambah nilai keempat untuk kelegapan (alpha), dari 0 (sepenuhnya telus) hingga 1 (sepenuhnya legap):

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

Ini berguna untuk overlay, bayang, dan mana-mana elemen reka bentuk yang perlu menunjukkan kandungan di belakangnya.

Warna HSL

Rupa Mereka

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

Cara Mereka Berfungsi

HSL bermaksud Hue (Rona), Saturation (Ketepuan), Lightness (Kecerahan). Daripada berfikir dalam istilah pencampuran saluran merah/hijau/biru, HSL menerangkan warna sebagaimana manusia secara semula jadi memikirkannya.

Rona adalah warna itu sendiri, dinyatakan sebagai darjah pada roda warna (0-360):

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

Ketepuan adalah seberapa menyala warna itu, dari 0% (kelabu) hingga 100% (sepenuhnya tepu).

Kecerahan adalah seberapa cerah atau gelap warna itu, dari 0% (hitam) hingga 100% (putih). 50% adalah kecerahan "normal."

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

• Rona: 11° (merah-oren sedikit)
• Ketepuan: 100% (sepenuhnya menyala)
• Kecerahan: 60% (sedikit lebih cerah dari normal)

HSLA: Menambah Ketelusan

Seperti RGBA, HSLA menambah saluran alpha:

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

Bila Menggunakan Format Yang Mana

Untuk Pembangunan Web

HEX adalah standard de facto. Kebanyakan CSS ditulis dengan kod HEX kerana ia padat dan setiap pembangun mengenalinya.

Untuk Sistem Reka Bentuk

HSL ideal untuk mencipta palet warna yang konsisten. Untuk mencipta varian lebih cerah dan lebih gelap dari warna jenama, anda hanya perlu melaraskan nilai kecerahan:

• Utama: hsl(210, 80%, 50%)
• Varian cerah: hsl(210, 80%, 70%)
• Varian gelap: hsl(210, 80%, 30%)

Rona dan ketepuan kekal sama, menjamin varian adalah "warna" yang sama pada kecerahan yang berbeza.

Untuk Ketelusan

Gunakan RGBA atau HSLA apabila anda memerlukan warna separa telus untuk overlay, bayang, atau kesan kaca.

Menukar Antara Format

Anda akan kerap perlu menukar antara format. Pereka menghantar nilai HSL tetapi pangkalan kod anda menggunakan HEX. Panduan jenama menyatakan RGB tetapi anda memerlukan HSL untuk mencipta varian.

Matematiknya adalah mudah tetapi membosankan untuk dilakukan secara manual. Alat penukar mengendalikannya dengan segera.

Mula bekerja dengan warna:

• Tukar Kod Warna
• Alat Penukar Warna
• Penjana Palet Warna

Semua alat adalah percuma dan berfungsi terus dalam pelayar anda.