Penukar RGB kepada HSL

Dari RGB ke HSL: Mengapa Model Ini Berbeza

Halaman ini menukar warna daripada model RGB—cara skrin menjana cahaya merah, hijau dan biru—ke dalam model HSL yang direka untuk cara manusia memahami warna. Perbezaan asas ini menjadikan HSL alat pilihan apabila anda perlu melaraskan kecerahan tanpa mengubah rona asas. Dalam RGB, menukar satu saluran (misalnya menaikkan merah dari 200 ke 255) boleh mengubah rona yang dilihat, menjadikan pelarasan warna yang halus sukar. HSL pula membolehkan anda mengawal kecerahan secara bebas: anda boleh menurunkan lightness dari 59% ke 40% sementara hue kekal pada 243°, menghasilkan bayangan warna yang konsisten. Inilah sebab pereka UI, pembangun tema, dan pereka visualisasi data beralih kepada HSL untuk menghasilkan palet, variasi terang/gelap, dan skala warna yang tertib secara persepsi.

Bagaimana Alat Ini Berfungsi

Anda masukkan tiga nombor RGB antara 0 dan 255—misalnya 79, 70, 229—dan alat ini serta-merta mengira padanannya dalam HSL, HEX, HSV, CMYK (anggaran skrin) dan LAB. Setiap medan boleh diedit; sebaik sahaja anda mengubah satu nilai, semua nilai lain dikemas kini secara automatik. Semua penukaran berlaku dalam pelayar anda—tiada data dihantar ke pelayan. Ini bermakna warna sensitif atau rekaan anda kekal peribadi.

Output utama ialah HSL dalam format:

• Hue (H) – sudut pada bulatan warna, 0–360°. 0° merah, 120° hijau, 240° biru.
• Saturation (S) – peratus, 0% (kelabu) hingga 100% (warna tulen).
• Lightness (L) – peratus, 0% (hitam) hingga 100% (putih). 50% memberikan warna paling terang tanpa dicampur putih atau hitam.

Selain itu, alat ini turut memaparkan HEX (format #rrggbb), HSV (hue, saturation, value), CMYK (cyan, magenta, yellow, black—anggaran sahaja) dan LAB (model warna bebas peranti). Editing mana-mana medan akan mencetuskan pengiraan semula ke semua format lain. Contoh: jika anda tahu nilai HSL yang dikehendaki, anda boleh masukkan terus dan alat akan mengira semula RGB, HEX dan selebihnya.

Cara Membaca dan Menggunakan Nilai HSL

Nilai HSL sering digunakan dalam CSS moden melalui fungsi hsl() dan hsla(). Sintaksnya mudah: hsl(243, 75%, 59%) bersamaan dengan warna ungu kebiruan daripada contoh sebelumnya. Dalam CSS, anda boleh tulis:

background-color: hsl(243, 75%, 59%);

Untuk menambah ketelusan, guna hsla():

background-color: hsla(243, 75%, 59%, 0.8);

Keistimewaan HSL untuk tema adalah jelas: untuk menghasilkan variasi gelap bagi warna jenama, anda hanya kurangkan lightness sambil mengekalkan hue dan saturation yang sama. Contohnya, jenama dengan hsl(210, 90%, 50%) (biru terang) boleh mempunyai variasi gelap hsl(210, 90%, 30%) dan variasi terang hsl(210, 90%, 70%). Ini mustahil dilakukan dengan mudah dalam RGB kerana menurunkan nilai merah, hijau dan biru secara serentak boleh mengubah rona.

Contoh kerja: Warna RGB (255, 0, 0) – merah tulen. Dalam HSL: hsl(0, 100%, 50%). Warna RGB (0, 255, 0) – hijau tulen. HSL: hsl(120, 100%, 50%). Warna RGB (0, 0, 255) – biru tulen. HSL: hsl(240, 100%, 50%).

Perhatikan bahawa lightness untuk warna tulen sentiasa 50%—ini kerana warna paling terang tanpa putih atau hitam berada di titik tengah skala kecerahan. Apabila lightness di bawah 50%, warna mula bercampur hitam (shade); di atas 50%, bercampur putih (tint). Ini memudahkan penciptaan palet konsisten.

Panduan Input dan Peraturan Sempadan

Alat ini menerima input dalam format yang ketat untuk mengelakkan kekeliruan.

RGB (input utama)

• Tiga nombor integer antara 0 dan 255, dipisahkan dengan koma atau ruang.
• Contoh sah: 79, 70, 229 atau 79 70 229.
• Jika input tidak sah—misalnya huruf, nombor di luar julat, atau format salah—alat akan memaparkan mesej ralat: “Masukkan RGB sebagai tiga nombor 0–255, seperti 79, 70, 229.”

HSL (input langsung)

• Hue: nombor 0–360 (boleh tanpa darjah).
• Saturation: nombor diikuti simbol % (contohnya 75%).
• Lightness: nombor diikuti simbol % (contohnya 59%).
• Contoh sah: 243, 75%, 59% atau 243 75% 59%.
• Ralat: “Masukkan HSL sebagai hue 0–360 dengan dua peratusan, seperti 243, 75%, 59%.”

LAB dan CMYK (input langsung)

• Alat ini menerima input LAB (L* 0–100, a* dan b* sekitar -128 hingga 127) dan CMYK (0–100% setiap satu).
• Peraturan penting: Jika anda memasukkan nilai LAB atau CMYK yang terletak di luar gamut warna RGB yang boleh dipaparkan (misalnya warna yang sangat tepu dalam CMYK yang tiada dalam sRGB), alat akan melaraskan warna tersebut kepada warna yang paling hampir boleh dipaparkan. Akibatnya, menukar warna yang dilaraskan itu semula ke format asal mungkin menghasilkan sedikit perbezaan. Ini adalah had fizikal skrin—bukan kelemahan alat.

CMYK sebagai anggaran

• Output CMYK adalah anggaran pada skrin dan tidak boleh digunakan untuk cetakan profesional tanpa pengesahan. Ini kerana ruang warna CMYK (cetakan) berbeza dengan sRGB (skrin). Untuk kerja cetak, gunakan profil ICC dan perisian khusus.

Aplikasi Praktikal untuk Pereka dan Pembangun

Palet warna dan tema

Apabila mereka bentuk antara muka, anda sering perlu menghasilkan variasi terang dan gelap bagi satu warna jenama. Dengan HSL, ini menjadi operasi satu langkah: ubah lightness. Contohnya, untuk warna utama hsl(220, 80%, 50%):

• Variasi gelap (untuk teks): hsl(220, 80%, 20%) – memenuhi nisbah kontras WCAG AA (4.5:1) terhadap latar putih.
• Variasi terang (untuk latar butang): hsl(220, 50%, 90%) – latar lembut tanpa mengubah rona.

Pembangun boleh menulis fungsi JavaScript ringkas untuk menjana variasi ini:

function lighten(hsl, amount) {
  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l + amount}%)`;
}

Visualisasi data

Skala warna untuk carta dan peta perlu menunjukkan perubahan beransur-ansur dalam kuantiti. Lightness dalam HSL adalah saluran yang paling intuitif untuk mencipta skala sekuens—mulai dari lightness rendah (warna gelap) hingga tinggi (warna terang) memberikan gradi yang mudah dibaca. Walaupun HSL tidak sempurna dari segi keseragaman persepsi, ia cukup baik untuk kebanyakan visualisasi web.

Aksesibiliti (WCAG)

Nisbah kontras antara teks dan latar dikira berdasarkan kecerahan relatif (luminans). Dengan HSL, anda boleh melaraskan lightness secara linear sehingga mencapai kontras yang dikehendaki tanpa mengubah identiti warna. Contohnya, jika butang biru hsl(220, 80%, 50%) tidak cukup kontras terhadap latar putih (nisbah ~3:1), anda boleh turunkan lightness kepada 40% untuk mencapai kontras ~5:1—masih biru yang sama, hanya lebih gelap.

Had dan Pertimbangan Model HSL

Walaupun HSL sangat berguna, ia tidak sempurna. Dua had utama:

1. Ketidakseragaman persepsi: Dua warna dengan lightness yang sama pada skala HSL (contohnya kuning hsl(60, 100%, 50%) dan biru hsl(240, 100%, 50%)) mempunyai kecerahan subjektif yang sangat berbeza. Kuning kelihatan lebih terang. Ini kerana sistem visual manusia tidak linear. Untuk keperluan yang memerlukan keseragaman persepsi sebenar (misalnya skala warna saintifik), model seperti LAB atau LCH lebih sesuai. Alat ini menyediakan output LAB untuk tujuan tersebut.

2. Gamut paparan: Kedua-dua RGB dan HSL terikat kepada ruang warna sRGB (atau lebih luas jika monitor menyokong). Apabila menukar daripada LAB atau CMYK, warna yang berada di luar gamut skrin akan dilaraskan. Ini adalah kekangan fizikal—bukan kelemahan alat.

3. Anggaran CMYK: Seperti disebut, CMYK hanyalah anggaran. Untuk kerja cetak profesional, rujuk panduan cetakan sebenar.

Soalan Lazim (FAQ)

1. Saya masukkan RGB 255, 0, 0 tetapi HSL menunjukkan hsl(0, 100%, 50%). Mengapa hue 0° dan bukan 360°? Hue diukur dalam bulatan 0–360°. 0° dan 360° adalah titik yang sama (merah). Alat ini memaparkan 0° untuk kekonsistenan.

2. Bolehkah saya masukkan nilai HSL dengan perpuluhan untuk hue? Ya. Hue boleh menjadi perpuluhan seperti 243.5. Saturation dan Lightness juga boleh perpuluhan (contoh 75.2%). Alat akan memprosesnya.

3. Apabila saya menukar LAB ke RGB, warnanya kelihatan berbeza daripada yang saya jangkakan. Apa yang berlaku? Mungkin warna LAB tersebut terletak di luar gamut sRGB. Alat ini akan melaraskannya ke warna paling hampir dalam julat paparan. Untuk melihat sama ada warna asal dalam gamut, semak nilai RGB—jika mana-mana saluran di luar 0–255 selepas penukaran, ia telah dilaraskan.

4. Adakah alat ini berfungsi di luar talian? Ya. Semua penukaran berlaku dalam pelayar menggunakan JavaScript. Tiada sambungan internet diperlukan selepas halaman dimuatkan.

5. Saya mahu menggunakan nilai CMYK yang dipaparkan untuk mencetak, tetapi warnanya pudar. Kenapa? CMYK output adalah anggaran berdasarkan ruang warna sRGB. Profil cetakan sebenar (misalnya FOGRA atau SWOP) akan menghasilkan hasil berbeza. Gunakan alat ini untuk rujukan pantas, bukan untuk spesifikasi cetakan.

6. Bolehkah saya menyalin nilai HSL terus ke dalam CSS? Ya. Nilai yang dipaparkan dalam format hsl(243, 75%, 59%) adalah sah terus untuk digunakan dalam sifat background-color, color, border-color, dan lain-lain dalam CSS3+. Jangan lupa tambah koma dan simbol peratus seperti ditunjukkan.