Penukar HEX kepada HSL

Fungsi Halaman: Tukar Hex kepada HSL Secara Serta-merta

Halaman ini menerima satu kod warna hex—sama ada bentuk enam digit penuh seperti #1E90FF atau singkatan tiga digit seperti #abc—dan terus memulangkan nilai HSL yang setara (hue dalam darjah, saturation dan lightness sebagai peratusan). HSL direka untuk pemikiran manusia, menjadikannya mudah untuk melaraskan kecerahan atau kepekatan warna sambil mengekalkan hue yang sama. Pada masa yang sama, halaman ini memaparkan warna tersebut dalam semua format lain yang disokong (RGB, HSV, CMYK, LAB) supaya anda boleh menyalin mana-mana yang diperlukan.

Perbezaan utama halaman ini:

• HEX ialah notasi RGB mentah – enam digit perenambelasan (atau singkatan tiga digit) yang mengekod nilai merah, hijau, dan biru secara terus. Ia padat dan banyak digunakan dalam CSS serta alat reka bentuk, tetapi ia tidak intuitif untuk membuat pelarasan yang boleh difahami manusia.
• HSL dibina untuk pemikiran manusia – hue diukur dalam darjah (0–360), manakala saturation dan lightness ialah peratusan. Menukar lightness sahaja mengekalkan hue yang sama, justeru HSL menjadi format pilihan untuk menjana palet warna dan sistem tema.
• Tiada saluran alfa – HEX standard (enam digit atau tiga digit) tidak membawa maklumat ketelusan, dan HSL juga tidak merangkumi komponen alfa. Penukaran sentiasa berurusan dengan warna legap sepenuhnya.

Input dan Output

Input – kod warna hex, sama ada enam digit (contoh, #4f46e5) atau singkatan tiga digit (contoh, #abc). Awalan # adalah pilihan; halaman akan memproses sama ada dengan atau tanpa #.

Output – nilai HSL setara (hue 0–360°, saturation 0–100%, lightness 0–100%) serta perwakilan warna dalam HEX, RGB, HSV, CMYK, dan LAB. Semua medan dikemas kini serentak semasa anda menyunting.

Contoh mudah:

• Masukkan #ff6600
• Output HSL: hue 24°, saturation 100%, lightness 50%
• Nilai lain: RGB(255,102,0), HSV(24°,100%,100%), CMYK(0%,60%,100%,0%), LAB(62.5,52.3,67.2)

Peraturan dan Kes Sempadan

• Halaman hanya menerima kod hex enam digit atau tiga digit yang sah (sama ada dengan atau tanpa #).
• Memasukkan nilai tidak sah akan memaparkan ralat: “Enter a hex color like #4f46e5 or #abc.”
• Jika anda bertukar ke ruang warna lain (contoh, LAB atau CMYK) dan memasukkan nilai di luar gamut RGB yang boleh dipaparkan, warna akan dilaraskan kepada warna boleh papar yang terdekat; menukar warna itu kembali ke hex mungkin menghasilkan perubahan sedikit.
• Nilai CMYK adalah anggaran pada skrin dan tidak boleh digunakan untuk cetakan profesional tanpa penentukuran.
• Semua penukaran berlaku dalam pelayar anda – tiada data yang dimuat naik atau disimpan.

Bagaimana Kod Warna Hex Berfungsi

Kod hex (perenambelasan) ialah cara padat untuk mewakili komponen RGB. Setiap pasangan digit hex mewakili satu saluran warna:

• Dua digit pertama: merah (0–255)
• Dua digit tengah: hijau (0–255)
• Dua digit terakhir: biru (0–255)

Nilai 00 hingga FF dalam perenambelasan sepadan dengan 0 hingga 255 dalam perpuluhan. Contoh: #FF0000 = merah tulen (R=255, G=0, B=0).

Singkatan tiga digit (#abc) dihuraikan dengan menggandakan setiap digit: #abc menjadi #aabbcc. Jadi #F80 (warna oren) menjadi #FF8800. Singkatan ini hanya berfungsi apabila setiap pasangan digit adalah sama; jika tidak, anda mesti gunakan enam digit penuh.

Mengapa hex digunakan secara meluas?

• Saiz fail yang lebih kecil dalam CSS berbanding RGB berfungsi.
• Mudah disalin daripada alat reka bentuk seperti Figma, Sketch, atau Photoshop.
• Nilai perenambelasan adalah piawai dalam spesifikasi CSS dan HTML.

Kelemahan hex:

• Sukar untuk "membaca" warna tanpa mengira nilai perpuluhan.
• Pelarasan seperti mencerahkan atau menggelapkan memerlukan manipulasi tiga saluran berasingan, tidak intuitif.

Struktur HSL: Hue, Saturation, Lightness

HSL (Hue, Saturation, Lightness) ialah model warna yang lebih rapat dengan cara manusia melihat dan memikirkan warna.

• Hue (0–360°): Kedudukan pada roda warna.
  • 0° = merah
  • 120° = hijau
  • 240° = biru
  • Nilai antara mewakili warna peralihan.
• Saturation (0–100%): Keamatan warna.
  • 0% = kelabu (tiada warna)
  • 100% = warna tulen (kepekatan penuh)
• Lightness (0–100%): Kecerahan dari hitam ke putih.
  • 0% = hitam
  • 50% = warna “normal” (nilai asal RGB)
  • 100% = putih

Formula penukaran asas dari RGB ke HSL (digunakan dalam halaman ini):

1. Normalisasikan R, G, B ke julat.
2. Cari nilai maksimum (M) dan minimum (m) antara tiga saluran.
3. L = (M + m) / 2
4. Jika M = m, maka S = 0 dan H tidak ditentukan.
5. Jika L ≤ 0.5, S = (M – m) / (M + m); jika L > 0.5, S = (M – m) / (2 – M – m).
6. H dikira berdasarkan saluran mana yang M:
   • Jika M = R: H = ((G – B) / (M – m)) × 60
   • Jika M = G: H = (2 + (B – R) / (M – m)) × 60
   • Jika M = B: H = (4 + (R – G) / (M – m)) × 60
7. Laraskan H ke julat [0,360) dengan menambah 360 jika negatif.

Contoh: Untuk warna biru #0000FF (R=0, G=0, B=1):

• L = (0 + 1)/2 = 0.5, S = (1 – 0)/(2 – 0 – 0) = 1 → 100%
• M = B, jadi H = (4 + (0 – 0)/1) × 60 = 240°

Kenapa HSL Lebih Intuitif Daripada HEX untuk Manusia?

HEX ialah kod mesin; HSL ialah kod pemikiran. Apabila anda ingin menghasilkan variasi warna untuk tema gelap atau terang, HSL membolehkan anda hanya menukar nilai L (lightness) tanpa menyentuh hue atau saturation. Contoh:

• Warna asas: #3498db (biru terang)
• Tukar ke HSL: hue 204°, saturation 72%, lightness 56%
• Untuk variasi lebih gelap: turunkan lightness kepada 40% → HSL(204°,72%,40%)
• Untuk variasi lebih pudar: kurangkan saturation kepada 40% → HSL(204°,40%,56%)

Jika anda menggunakan HEX, anda perlu mengira semula nilai R, G, B secara berasingan—satu proses yang mudah salah.

Kelebihan lain HSL:

• Palet warna: Buat skema monokromatik dengan mengekalkan hue sama, hanya ubah L dan/atau S. Skema analog atau komplementari dengan menukar H sebanyak ±30° atau 180°.
• Kebolehcapaian: Untuk mematuhi WCAG, kontras antara teks dan latar belakang perlu mencukupi. Dengan HSL, anda boleh meningkatkan L pada latar belakang dan menurunkan L pada teks (atau sebaliknya) tanpa mengubah hue, supaya warna jenama kekal dikenali.
• CSS Custom Properties: Anda boleh menyimpan nilai HSL dalam pemboleh ubah CSS dan mengubah suainya dengan calc() atau fungsi hsl() terus: --primary-h: 204; --primary-s: 72%; --primary-l: 56%; kemudian guna hsl(var(--primary-h), var(--primary-s), var(--primary-l)).

Hubungan RGB–HSL dan Penukaran Dalaman

Halaman ini melaksanakan penukaran matematik piawai antara ruang warna RGB (yang diwakili oleh HEX) dan HSL. Tiada anggaran atau pengimejan—ia adalah pengiraan tepat berdasarkan nilai perenambelasan yang dihuraikan.

Langkah penukaran dari HEX ke HSL:

1. Parse enam digit hex kepada tiga pasangan: RR, GG, BB.
2. Tukar setiap pasangan ke integer perpuluhan (0–255).
3. Gunakan formula penukaran RGB→HSL seperti di atas.
4. Bundarkan H ke satu tempat perpuluhan (contoh, 204.7°), S dan L ke peratusan integer atau satu tempat perpuluhan (contoh, 72.3%).

Kenapa HSL tidak mengandungi alfa?
HSL secara tradisinya tidak menyertakan saluran ketelusan. Untuk keperluan alfa, CSS menyediakan HSLA (HSL dengan Alpha), tetapi model asas HSL yang digunakan di halaman ini hanya menangani warna legap. Jika anda memerlukan ketelusan, anda perlu menggunakan format lain seperti RGBA atau HSLA secara berasingan.

Gamut warna dan pelarasan:
Apabila nilai HSL yang dimasukkan menghasilkan warna di luar gamut RGB (contoh, saturation 100% dengan lightness 60% pada hue tertentu boleh menghasilkan warna yang tidak dapat dipaparkan pada monitor sRGB), halaman akan melaraskan warna itu ke titik paling hampir dalam gamut RGB. Ini bermakna menukar warna tersebut kembali ke HEX mungkin menunjukkan nilai yang sedikit berbeza daripada input asal. Fenomena ini penting difahami oleh pereka yang bekerja dengan ruang warna luas seperti LAB atau CMYK.

Perbezaan Antara HSL dan HSV/HSB

HSV (Hue, Saturation, Value) atau HSB (Hue, Saturation, Brightness) sering dikelirukan dengan HSL. Perbezaan utama terletak pada komponen ketiga:

• HSL: Lightness (L) – purata antara RGB maksimum dan minimum. Pada L=50%, warna adalah “normal”. L=100% sentiasa putih, L=0% sentiasa hitam.
• HSV: Value (V) – nilai maksimum RGB. Pada V=100%, warna adalah terang sepenuhnya. V=0% ialah hitam.

Kesan praktikal:

• Dalam HSL, menurunkan L di bawah 50% akan menggelapkan warna secara seragam, manakala dalam HSV, menurunkan V akan menggelapkan warna tetapi mungkin mengekalkan keamatan lebih lama pada nilai lebih rendah.
• Contoh: Warna kuning tulen (RGB 255,255,0) dalam HSL: H=60°, S=100%, L=50%. Dalam HSV: H=60°, S=100%, V=100%. Jika anda mahu versi lebih gelap: HSL(60°,100%,30%) akan menjadi kuning gelap; HSV(60°,100%,30%) akan menjadi kuning sangat gelap tetapi dengan keamatan yang sama.

Halaman ini memaparkan kedua-dua HSL dan HSV supaya anda boleh membandingkan secara langsung.

Soalan Lazim

1. Apakah perbezaan antara kod hex enam digit dan tiga digit?
Kod tiga digit (#abc) ialah singkatan untuk #aabbcc. Ia hanya berfungsi apabila setiap digit rangkap (contoh, #F80 sama dengan #FF8800). Jika anda mempunyai nilai seperti #12ab34, anda mesti gunakan enam digit.

2. Bolehkah saya menggunakan kod hex dengan alfa (contoh, #ff660080)?
Tidak. Halaman ini hanya menerima kod hex tanpa alfa (enam atau tiga digit). Untuk warna dengan ketelusan, anda perlu menggunakan format RGBA atau HSLA secara berasingan.

3. Mengapa nilai CMYK yang dipaparkan mungkin berbeza daripada cetakan sebenar?
CMYK di sini adalah anggaran matematik berdasarkan profil sRGB ke CMYK generik. Untuk cetakan profesional, anda perlu menggunakan profil ICC khusus pencetak dan perisian pengurusan warna yang sesuai.

4. Apabila saya memasukkan warna LAB di luar gamut RGB, apa yang berlaku?
Warna tersebut akan dilaraskan kepada warna boleh papar paling hampir dalam gamut RGB. Oleh itu, menukar semula ke hex mungkin menunjukkan nilai yang sedikit berbeza daripada yang anda mulakan. Inilah yang dimaksudkan dengan “warna di luar gamut.”

5. Adakah data saya disimpan atau dimuat naik ke pelayan?
Tidak. Semua pengiraan dilakukan dalam pelayar anda menggunakan JavaScript. Tiada maklumat dihantar ke pelayan.

6. Bolehkah saya menggunakan halaman ini untuk menukar beratus-ratus warna sekaligus?
Halaman ini direka untuk penukaran satu demi satu. Untuk pemprosesan kelompok, anda perlu menggunakan alat berasaskan baris arahan atau skrip yang memanggil API penukaran warna.