Penukar ini menerima semua bentuk hex CSS: 6 digit #3366cc, singkatan 3 digit #36c, serta bentuk 4 dan 8 digit dengan saluran alfa, dengan atau tanpa #. Ia memaparkan rentetan hsl() atau hsla(), nilai mentah dan pecahan setiap komponen - berserta baris penukaran HSL ke HEX sekiranya anda perlukan arah sebaliknya. Semuanya berjalan dalam pelayar anda - tiada muat naik, tiada akaun, tiada had.
Penukar HEX ke HSL
Berjalan sepenuhnya dalam pelayar anda - tanpa muat naik, tanpa pendaftaran.
CSS
hsl(220, 60%, 50%)Cara ia ditukar
Hue220
Saturation60%
Lightness50%
Perlukan arah sebaliknya? HSL ke HEX
#3366ccBagaimana cara tukar HEX ke HSL?
Mula-mula baca kod hex sebagai merah, hijau dan biru (0-255), kemudian nyatakan semula warna itu sebagai hue, saturation dan lightness. Hue ialah sudut pada roda warna (0-360), saturation ialah tahap keterangan warna (0-100%) dan lightness ialah tahap kecerahannya (0-100%). #3366cc menjadi hsl(220, 60%, 50%). Alat ini melakukannya serta-merta semasa anda menaip.
Cara guna
- 1Masukkan kod hex. Taip atau tampal warna hex seperti #3366cc (atau #36c), atau pilih dengan swatch warna. Tanda # adalah pilihan.
- 2Baca nilai HSL. Rentetan hsl(), nilai mentah dan pratonton warna langsung dikemas kini semasa anda menaip, lengkap dengan pecahan setiap komponen untuk hue, saturation dan lightness.
- 3Salin format yang diperlukan. Klik Salin di sebelah rentetan hsl() atau nilai mentah. Perlukan arah sebaliknya? Masukkan hue, saturation dan lightness di bawah untuk dapatkan semula kod hex.
Untuk siapa
- Pembangun front-end yang menukar kod hex kepada hsl() supaya boleh melaraskan lightness untuk keadaan hover dan focus tanpa memilih warna baharu.
- Pereka bentuk yang membina palet dan mengekalkan hue tetap sambil melaraskan saturation dan lightness untuk menghasilkan pelbagai ton dan warna gelap daripada satu warna jenama.
- Penulis tema dan token reka bentuk yang menyimpan warna sebagai HSL kerana ia jauh lebih mudah dibaca dan dilaraskan secara manual berbanding rentetan hex.
- Sesiapa yang menyamakan warna antara alat - satu memerlukan hex (Figma, kebanyakan CSS) dan satu lagi memerlukan HSL (pembantu SCSS, sesetengah sistem warna).
Soalan lazim
Adakah penukar HEX ke HSL ini percuma?
Ya - 100% percuma tanpa pendaftaran dan tanpa had. Semuanya berjalan sepenuhnya dalam pelayar anda.
Adakah warna saya dimuat naik ke mana-mana?
Tidak. Penukaran ini hanyalah JavaScript biasa yang berjalan pada peranti anda - tiada apa-apa dihantar ke pelayan, dan ia terus berfungsi luar talian selepas halaman selesai dimuatkan.
Apakah itu HSL?
HSL bermaksud hue, saturation dan lightness. Hue ialah sudut dari 0 hingga 360 darjah pada roda warna, saturation menunjukkan tahap keterangan warna dari 0 hingga 100 peratus, dan lightness bermula dari 0 peratus (hitam) melalui warna tulen pada 50 peratus sehingga 100 peratus (putih).
Bagaimana cara tukar hex ke HSL secara manual?
Tukar hex kepada nilai merah, hijau dan biru, kemudian bahagikan setiap satu dengan 255. Ambil nilai maksimum dan minimum ketiga-tiganya: lightness ialah purata kedua-duanya, saturation ialah (maks - min) dibahagi (1 - |2L - 1|), dan hue datang daripada saluran mana yang menjadi maksimum, diskalakan kepada 0-360 darjah.
Adakah ia menyokong singkatan 3 digit seperti #36c?
Ya. Dalam singkatan CSS setiap digit digandakan, jadi #36c mengembang kepada #3366cc dan ditukar kepada hsl(220, 60%, 50%). Bentuk 4 digit berfungsi sama, dengan digit terakhir sebagai alfa.
Bagaimana ia mengendalikan ketelusan (HSLA)?
Kod hex 8 digit membawa alfa pada pasangan terakhirnya. Byte itu (0-255) dibahagi dengan 255 untuk mendapatkan alfa 0-1 yang diperlukan hsla(), dibundarkan kepada tiga perpuluhan - jadi #3366cc80 menjadi hsla(220, 60%, 50%, 0.502).
Bolehkah ia menukar HSL kembali kepada HEX?
Ya. Gunakan baris HSL ke HEX di bawah keputusan: masukkan hue (0-360) berserta saturation dan lightness (0-100%) dan ia akan memulangkan kod hex serta-merta. Nilai di luar julat akan dikekang.
Kenapa HSL berguna berbanding hex?
HSL mudah dibaca manusia: anda boleh cerahkan warna dengan menaikkan L, kelatkan dengan menurunkan S, atau tukar keluarga warnanya dengan menukar H - semuanya tanpa meneka digit hex. Ini menjadikannya ideal untuk membina palet yang konsisten, keadaan hover dan token reka bentuk.