Penukar HSL kepada RGB

Keunikan Halaman Ini: HSL untuk Pemikiran Manusia, RGB untuk Skrin

Kebanyakan alat penukar warna dalam talian hanya menukar antara format tanpa menjelaskan sebab anda perlu menggunakan satu model berbanding yang lain. Halaman ini dibina khusus untuk menjembatani dua cara berfikir tentang warna: HSL, yang direka untuk penaakulan manusia, dan RGB, yang merupakan ruang kerja sebenar untuk matematik warna pada skrin.

Apabila anda melaraskan kecerahan dalam HSL, warna asal (hue) kekal utuh. Ini sebabnya HSL digunakan secara meluas dalam penjanaan palet dan tema – anda boleh menghasilkan variasi warna yang konsisten tanpa mengubah rona asas. Sebaliknya, dalam RGB, menukar satu nombor secara rawak akan mengubah kedua-dua kecerahan dan hue secara serentak, menyukarkan rekaan manual. Alat ini mengambil nilai HSL yang anda fahami (contohnya 243°, 75%, 59%) dan memberikan nombor tepat yang diperlukan oleh skrin untuk memancarkan cahaya: rgb(79, 70, 229).

Lebih penting lagi, penukaran ini adalah tanpa kehilangan (lossless). Setiap nilai HSL yang sah memetakan kepada satu triplet RGB dalam julat yang boleh dipaparkan. Tidak seperti penukaran daripada ruang warna lain seperti LAB atau CMYK ke RGB, tiada pemotongan di luar gamut (out‑of‑gamut clipping) berlaku di sini. Warna yang anda lihat dalam HSL akan sama apabila ditukar kembali ke RGB – tiada pergeseran warna.

Semua pengiraan dijalankan terus dalam pelayar anda. Tiada data yang dimuat naik ke pelayan. Dengan itu, alat ini sesuai digunakan untuk kerja sensitif atau semasa luar talian.

Bagaimana Penukaran HSL ke RGB Berfungsi

Penukaran ini menggunakan algoritma piawai yang ditakrifkan dalam spesifikasi CSS. Berikut adalah langkah asasnya:

1. Hue (0–360°) diubah menjadi sudut pada roda warna. Nilai ini kemudian ditukar kepada kedudukan dalam ruang RGB menggunakan fungsi trigonometri dan pemetaan berperingkat.
2. Saturation (0–100%) menentukan keamatan warna berbanding kelabu. Pada 0%, warna menjadi kelabu sepenuhnya; pada 100%, warna paling tulen.
3. Lightness (0–100%) mengawal kecerahan: 0% ialah hitam, 100% ialah putih, dan 50% memberikan warna yang paling "tulen" tanpa penambahan putih atau hitam.

Algoritma teras menggunakan formula berikut (dipaparkan dalam banyak rujukan CSS):

• Jika lightness <= 0.5, maka temp2 = lightness * (1 + saturation)
• Jika lightness > 0.5, maka temp2 = lightness + saturation - lightness * saturation
• temp1 = 2 * lightness - temp2

Kemudian, untuk setiap saluran RGB (merah, hijau, biru), satu nilai perantaraan temp3 dikira berdasarkan kedudukan hue yang dilaraskan. Akhirnya, setiap saluran diperoleh dengan:

• Jika temp3 < 1/6 → channel = temp1 + (temp2 - temp1) * 6 * temp3
• Jika 1/6 <= temp3 < 1/2 → channel = temp2
• Jika 1/2 <= temp3 < 2/3 → channel = temp1 + (temp2 - temp1) * (2/3 - temp3) * 6
• Selainnya → channel = temp1

Nilai channel kemudian didarab dengan 255 dan dibundarkan untuk menghasilkan integer RGB antara 0 dan 255.

Contoh kerja: Untuk HSL (243°, 75%, 59%):

• Lightness 59% = 0.59 (>0.5), maka temp2 = 0.59 + 0.75 - 0.59*0.75 = 0.9875
• temp1 = 2*0.59 - 0.9875 = 0.1925
• Untuk saluran merah (hue asas 243° → sekitar 0.675 dalam unit bulatan), pengiraan menghasilkan nilai ~0.31, maka R = 79.
• Saluran hijau dan biru menghasilkan 70 dan 229. Hasil akhir: rgb(79, 70, 229).

Formula ini terjamin menghasilkan nilai dalam julat 0–255 tanpa pemotongan, kerana HSL sendiri direka untuk mewakili semua warna yang boleh dipaparkan oleh RGB.

Input dan Output yang Disediakan

Alat ini menerima satu input utama dan terus mengemas kini enam output secara langsung.

Setiap kali anda menaip atau menampal nilai HSL yang sah, semua medan output berikut dikemas kini serentak:

Nota penting mengenai CMYK: Nilai CMYK yang dipaparkan hanyalah anggaran berdasarkan penukaran langsung daripada RGB. Dalam percetakan profesional, nilai sebenar CMYK bergantung pada profil dakwat, jenis kertas, dan mesin cetak. Jangan gunakan angka ini untuk kerja cetak akhir tanpa pengesahan melalui profil ICC atau perisian pra-cetak.

Peraturan dan Kesilapan Biasa

Alat ini menguatkuasakan format input yang ketat untuk mengelakkan kekeliruan. Jika nilai HSL dimasukkan secara tidak sah, mesej ralat berikut akan dipaparkan:

“Masukkan HSL sebagai hue 0–360 dengan dua peratusan, contoh 243, 75%, 59%.”

Beberapa kesilapan tipikal yang perlu dielakkan:

• Hue di luar julat 0–360 – Nilai seperti 400° tidak sah. Walaupun sesetengah pengguna beranggapan 360° bersamaan 0°, alat ini hanya menerima 0–360.
• Saturation atau Lightness tanpa simbol peratus – Menulis 75 tanpa % akan ditolak. Simbol peratus diperlukan untuk membezakan daripada nombor integer biasa.
• Penggunaan koma yang salah – Format tepat ialah hue, saturation%, lightness% dengan satu koma selepas hue dan satu koma selepas saturation, tetapi tanpa koma tambahan. Contoh sah: 243, 75%, 59%.
• Nilai peratus melebihi 100% – Nilai seperti 150% untuk saturation tidak bermakna dalam HSL piawai. Julat bagi kedua-duanya ialah 0% hingga 100%.

Perlu diingat bahawa walaupun HSL membenarkan nilai lightness 0% (hitam) dan 100% (putih), saturation tidak akan memberi kesan pada titik tersebut – warna akan kekal kelabu. Ini bukan ralat, tetapi ciri model HSL. Alat ini akan tetap menukar dengan betul.

Siapa yang Memerlukan Alat Ini?

• Pereka bentuk yang membina palet warna atau tema – Apabila anda bekerja dalam HSL untuk menghasilkan variasi warna yang harmoni (contohnya, menukar kecerahan tanpa mengubah hue), anda memerlukan nilai RGB tepat untuk dimasukkan ke dalam kod CSS, SwiftUI, atau library lain yang menggunakan RGB.
• Pembangun front‑end – Banyak alat reka bentuk (Figma, Sketch, Adobe XD) membolehkan anda menyalin warna dalam HSL, tetapi kod CSS sering menggunakan RGB atau HEX. Alat ini menjimatkan langkah pengiraan manual.
• Sesiapa yang lebih selesa berfikir dalam istilah manusia – Daripada meneka tiga nombor antara 0–255, anda boleh menentukan hue sebagai "biru kebiruan sekitar 240°", menetapkan saturation untuk keamatan, dan mengawal kecerahan terus. Alat ini memberikan jambatan antara fikiran dan skrin.

Perbandingan dengan Model Warna Lain

Model warna berbeza dicipta untuk tujuan berbeza. Jadual di bawah meringkaskan perbezaan utama yang berkaitan dengan halaman ini:

Mengapa tiada pemotongan gamut di sini? HSL dan RGB berkongsi gamut yang sama – iaitu semua warna yang boleh diwakili dalam sRGB. Apabila anda menukar dari HSL ke RGB, anda hanya mengubah suai perwakilan, bukan ruang warna. Sebaliknya, jika anda menukar dari LAB (yang boleh mewakili warna di luar sRGB) ke RGB, warna di luar julat perlu dipotong atau diubah suai, menyebabkan pergeseran warna. Inilah sebab mengapa halaman ini bebas daripada isu clipping – ia kekal dalam ruang sRGB sepanjang masa.

Soalan Lazim (FAQ)

1. Apakah perbezaan antara HSL dan HSV? HSL (Hue, Saturation, Lightness) menggunakan kecerahan (lightness) yang diambil sebagai purata antara hitam dan putih penuh. HSV (Hue, Saturation, Value) menggunakan value, iaitu komponen maksimum antara R, G, B. Bentuk modelnya berbeza: dalam HSL, kecerahan maksimum (100%) menghasilkan putih, manakala dalam HSV, value maksimum (100%) menghasilkan warna tulen tanpa penambahan hitam. Akibatnya, palet yang dijana dalam HSL lebih intuitif untuk pelarasan cahaya, manakala HSV lebih sesuai untuk pemilihan warna dalam aplikasi lukisan.

2. Bolehkah saya memasukkan nilai perpuluhan untuk hue, seperti 243.5°? Ya, alat ini menerima hue dengan satu tempat perpuluhan. Contoh: 243.5, 75%, 59% adalah sah. Walau bagaimanapun, nilai perpuluhan untuk saturation dan lightness hanya diterima jika disertakan simbol peratus (75.5% sah,.75% tidak sah).

3. Mengapa nilai CMYK yang dipaparkan berbeza daripada apa yang saya dapat dalam Photoshop? Photoshop menggunakan profil ICC khusus untuk peranti cetak tertentu, manakala alat ini menggunakan formula penukaran generik (contohnya, algoritma penukaran perpuluhan tanpa penyesuaian profil). Untuk kerja cetak profesional, rujuk nilai CMYK yang dihasilkan oleh perisian yang menyokong profil warna, atau lakukan ujian cetak fizikal.

4. Apakah maksud "lossless" dalam konteks penukaran ini? Bermaksud setiap nilai HSL yang sah menghasilkan satu dan hanya satu nilai RGB dalam julat 0–255, dan apabila anda menukar RGB tersebut kembali ke HSL, anda akan mendapat nilai HSL asal yang tepat (dengan toleransi pembundaran). Tiada kehilangan maklumat atau perubahan warna berlaku. Ini tidak benar untuk semua penukaran model warna, contohnya, daripada LAB atau CMYK ke RGB.

5. Bolehkah saya menggunakan alat ini untuk semakan aksesibiliti warna? Tidak secara langsung. Alat ini hanya menukar format warna. Untuk aksesibiliti, anda perlu mengira nisbah kontras antara warna latar dan teks menggunakan nilai RGB yang dihasilkan. Terdapat alat khusus untuk tujuan itu. Namun, menggunakan HSL memudahkan anda memilih variasi warna dengan kecerahan terkawal, yang membantu dalam mereka bentuk kontras yang mencukupi.

6. Adakah alat ini berfungsi di luar talian? Ya. Semua kod JavaScript untuk penukaran dimuatkan dalam halaman sekali sahaja. Setelah halaman dimuat, tiada sambungan internet diperlukan untuk melakukan penukaran. Anda boleh menyimpan halaman ini secara setempat dan menggunakannya tanpa akses web.