Penukar HSL kepada HEX

Tukar HSL kepada HEX: Panduan Lengkap untuk Pereka dan Pembangun

Apabila anda bekerja dengan warna dalam reka bentuk digital, dua model warna yang sering digunakan ialah HSL (Hue, Saturation, Lightness) dan HEX (heksadesimal). Halaman hsl-to-hex menyediakan penukaran terus antara kedua-dua format ini. HSL direka bentuk untuk cara manusia berfikir tentang warna — mengubah kecerahan (lightness) sahaja mengekalkan rona (hue), menjadikannya pilihan utama untuk penjanaan palet dan tema. HEX pula merupakan notasi RGB enam digit (atau tiga digit singkatan) yang digunakan secara meluas dalam CSS dan alat reka bentuk. Penukaran antara HSL dan HEX adalah langsung dan tanpa kehilangan data dalam gamut sRGB, tidak seperti penukaran yang melibatkan LAB atau CMYK yang mungkin melaraskan warna di luar gamut.

Halaman ini membolehkan anda memasukkan warna HSL — rona dalam darjah (0–360), ketepuan (saturation) sebagai peratusan, dan kecerahan (lightness) sebagai peratusan — dan serta-merta memaparkan kod HEX yang setara. Semua pemprosesan berlaku dalam pelayar anda; tiada data dimuat naik ke pelayan.

Apakah Perbezaan Utama Halaman Ini?

Halaman hsl-to-hex ini khusus untuk penukaran HSL kepada HEX. Berbanding dengan alat penukaran warna lain yang mungkin menyokong pelbagai format, halaman ini menekankan hubungan antara dua model warna yang sering digunakan dalam pembangunan web: HSL yang mesra manusia dan HEX yang mesra mesin. HSL (dengan komponen hue, saturation, lightness) memudahkan pelarasan warna secara intuitif — misalnya, meningkatkan kecerahan tanpa mengubah rona. HEX pula merupakan perwakilan tepat bagi nilai RGB dalam bentuk perenambelasan (heksadesimal).

Perbezaan utama ialah penukaran ini tidak melibatkan pelarasan gamut. Warna yang boleh diwakili dalam HSL dalam lingkungan sRGB akan sentiasa boleh diwakili dalam HEX dengan tepat. Ini berbeza dengan penukaran ke CMYK atau LAB yang mungkin memerlukan pengubahan warna untuk memastikan ia berada dalam julat yang boleh dicetak atau dilihat. Oleh itu, hsl-to-hex adalah alat yang boleh dipercayai untuk pereka yang memerlukan ketepatan tanpa kompromi.

Cara Penukaran HSL kepada HEX Berfungsi

Penukaran HSL kepada HEX melalui proses dua langkah: pertama, nilai HSL ditukar kepada RGB; kedua, nilai RGB ditukar kepada format HEX. Formula penukaran HSL ke RGB adalah piawai dan boleh dikira secara manual, tetapi halaman ini melakukannya secara automatik.

Langkah 1: HSL ke RGB

• Nilai hue (H) dalam darjah dibahagikan dengan 360 untuk mendapatkan nilai antara 0 dan 1.
• Saturation (S) dan Lightness (L) digunakan sebagai pecahan (contohnya, 50% menjadi 0.5).
• Berdasarkan L, kita hitung C (chroma) = (1 – |2L – 1|) × S.
• Kemudian X = C × (1 – |(H mod 2) – 1|) dan m = L – C/2.
• Akhirnya, RGB = (R'+m, G'+m, B'+m) di mana (R', G', B') bergantung pada julat H.

Langkah 2: RGB ke HEX

• Setiap saluran RGB (0–255) ditukar kepada dua digit perenambelasan.
• Contohnya, 255 menjadi "FF", 128 menjadi "80".
• Jika ketiga-tiga saluran boleh diwakili dengan satu digit perenambelasan (contohnya, 0, 17, 34, …, 255), bentuk singkatan tiga digit boleh digunakan: #RGB menjadi #R'G'B' dengan menggandakan setiap digit.

Proses ini lossless dalam sRGB, bermakna setiap warna HSL yang sah akan menghasilkan kod HEX yang unik.

Format Input dan Output yang Tepat

Untuk menggunakan halaman ini dengan betul, anda perlu memasukkan nilai dalam format yang ditetapkan:

Gabungan contoh: 243, 75%, 59% akan menghasilkan HEX #4f46e5.

Peraturan dan Kes Tepi

• Semua medan diedit secara langsung dan mengemas kini serta-merta.
• Jika nilai HSL berada di luar julat atau tidak diformat dengan betul, halaman akan memaparkan mesej ralat:
  “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
• Penukaran sentiasa kekal dalam julat RGB yang boleh dilihat; tiada pelarasan di luar gamut berlaku.
• Output CMYK yang dipaparkan bersama adalah anggaran skrin dan mungkin berbeza daripada nilai percetakan profesional.

Kesilapan Biasa dan Cara Mengelakkannya

Walaupun alat ini mudah digunakan, terdapat beberapa kesilapan lazim yang dilakukan pengguna:

1. Melupakan tanda peratus (%) — Saturation dan Lightness mesti disertakan dengan simbol peratus. Input seperti 243, 75, 59 akan dianggap tidak sah. Sentiasa tulis 75% dan 59%.

2. Hue di luar julat 0–360 — Hue mestilah antara 0 dan 360 darjah. Nilai negatif atau lebih daripada 360 tidak diterima. Jika anda perlu mewakili sudut di luar julat ini, ubah suai secara modular (contohnya, 400° bersamaan 40°).

3. Penggunaan koma dan ruang — Format yang betul ialah hue, saturation%, lightness%. Koma dan ruang boleh digunakan secara fleksibel, tetapi pastikan tiada aksara tambahan.

4. Kekeliruan antara HSL dan HSLA — Halaman ini hanya menerima HSL tanpa saluran alpha. Jika anda mempunyai nilai HSLA (dengan alpha), anda perlu menukar dahulu kepada HSL biasa dan kemudian kepada HEX. Walau bagaimanapun, HEX lapan digit (#RRGGBBAA) tidak disokong oleh halaman ini.

5. Menganggap HEX sentiasa enam digit — HEX juga boleh diwakili dalam tiga digit jika setiap saluran RGB boleh ditulis dengan satu digit perenambelasan. Contohnya, #abc bermaksud #aabbcc. Alat ini mungkin memaparkan bentuk tiga digit jika berkenaan.

Kegunaan Praktikal untuk Pereka dan Pembangun

HSL kepada HEX adalah penukaran yang kerap diperlukan dalam aliran kerja reka bentuk dan pembangunan. Berikut adalah beberapa senario biasa:

• Palet warna dalam CSS — Anda mereka palet dalam HSL kerana mudah menyesuaikan kecerahan untuk variasi, tetapi perlu kod HEX untuk dimasukkan ke dalam fail CSS. Contohnya, warna utama hsl(243, 75%, 59%) menjadi #4f46e5 untuk digunakan dalam properti color.

• Aksesibiliti dan nisbah kontras WCAG — Dengan mengubah kecerahan (lightness) dalam HSL, anda boleh mengekalkan rona yang sama sambil memastikan kontras yang mencukupi. Selepas itu, penukaran ke HEX diperlukan untuk pengesahan menggunakan alat kontras.

• Penyerahan reka bentuk — Pereka sering menggunakan alat seperti Figma atau Sketch yang memaparkan warna dalam HSL, tetapi pembangun memerlukan kod HEX. Alat ini mempercepatkan proses.

• Penjanaan tema — Apabila membina tema gelap atau terang, anda boleh melaraskan kecerahan dalam HSL untuk semua warna tema, kemudian menukar setiap satu ke HEX untuk pengeluaran.

Batasan HSL dan HEX yang Perlu Difahami

Walaupun HSL dan HEX sangat berguna, terdapat batasan yang perlu diketahui:

• HEX tidak mempunyai saluran alpha — Format HEX enam digit tidak menyokong ketelusan. Jika anda memerlukan alpha, anda perlu menggunakan RGBA atau HEX lapan digit (#RRGGBBAA). HSL pula boleh diubah suai kepada HSLA dengan mudah.

• HSL tidak linear — Perubahan dalam kecerahan (lightness) tidak selalunya linear dari segi persepsi manusia. Walaupun ia lebih intuitif daripada RGB, ia bukanlah ruang warna yang seragam seperti LAB.

• Penukaran ke CMYK tidak tepat — Alat ini memaparkan anggaran CMYK, tetapi nilai tersebut hanya untuk rujukan skrin. Untuk percetakan profesional, gunakan profil warna ICC yang sesuai.

• Tiada pelarasan gamut — Ini adalah kelebihan untuk HSL-ke-HEX kerana tiada kehilangan warna, tetapi jika anda bekerja dengan warna di luar sRGB (contohnya dalam ruang warna ProPhoto atau Adobe RGB), penukaran ini tidak akan mewakilinya dengan tepat.

Soalan Lazim (FAQ)

1. Apakah maksud HSL?
HSL bermaksud Hue (rona), Saturation (ketepuan), dan Lightness (kecerahan). Ia adalah model warna silinder yang direka untuk memudahkan pemahaman manusia tentang warna. Hue diukur dalam darjah pada roda warna, ketepuan mengukur keamatan warna, dan kecerahan mengukur kecerahan.

2. Bolehkah saya memasukkan nilai hue perpuluhan?
Ya, hue boleh dalam perpuluhan, contohnya 243.5°. Walau bagaimanapun, pastikan tiada simbol peratus pada hue. Hanya saturation dan lightness yang memerlukan simbol %.

3. Apakah perbezaan antara #4f46e5 dan #46e?
#4f46e5 adalah HEX enam digit penuh. #46e adalah bentuk tiga digit singkatan, tetapi ia hanya sah jika setiap saluran RGB boleh diwakili dengan satu digit perenambelasan (nilai seperti 0, 17, 34, 51, …). Dalam kes ini, #4f46e5 tidak boleh dipendekkan kerana nilai salurannya (79, 70, 229) tidak boleh ditulis dengan satu digit sahaja.

4. Mengapa output CMYK berbeza daripada apa yang saya lihat di pencetak?
Alat ini memberikan anggaran CMYK berdasarkan algoritma piawai, tetapi percetakan sebenar bergantung pada profil warna, jenis kertas, dan dakwat. Gunakan sebagai rujukan kasar sahaja.

5. Adakah alat ini berfungsi di luar talian?
Ya, semua pemprosesan berlaku dalam pelayar menggunakan JavaScript. Tiada sambungan internet diperlukan selepas halaman dimuatkan. Anda boleh menyimpan halaman dan menggunakannya secara setempat.

6. Bolehkah saya menukar HEX kepada HSL menggunakan alat yang sama?
Halaman ini khusus untuk HSL ke HEX. Untuk penukaran sebaliknya, anda memerlukan alat yang berbeza, seperti halaman hex-to-hsl yang mungkin disediakan di laman web yang sama.