Kalkulator Hex ke HSL

• Konversi Dua Arah Instan: kalkulator memperbarui semua padanan format pada setiap penekanan tombol - tanpa perlu menekan tombol apa pun. Ubah masukan apa pun (HEX, RGB, atau HSL) dan semua nilai lain langsung diperbarui. Pemilih warna bawaan juga tersedia untuk pemilihan visual.
• Semua Format di Satu Tempat: kalkulator menghasilkan HEX, HEX3 (singkat), RGB, RGBA, HSL, HSLA, dan nilai kanal H/S/L/V individual - semua yang dibutuhkan pengembang dalam satu tampilan. Salin nilai individual mana pun atau semua nilai sekaligus.
• 100 % Privat - Tanpa Unggahan: semua konversi terjadi secara lokal di browser Anda. Nilai warna Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - aman untuk proyek klien dan sistem desain eksklusif.
• Gratis & Tanpa Batas: konversi warna tanpa batas tanpa pendaftaran, langganan, dan batas penggunaan. Kalkulator Hex ke HSL sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.

• Pengembangan CSS: pengembang frontend menggunakan kalkulator untuk mengonversi token desain dari HEX ke HSL untuk properti kustom CSS. HSL lebih disukai di CSS karena lightness dan saturasinya mudah disesuaikan secara programatik.
• Konfigurasi Tailwind CSS: pengembang menggunakan kalkulator untuk mengonversi warna merek dari HEX ke HSL untuk konfigurasi Tailwind CSS. Tailwind v3+ menggunakan variabel CSS berbasis HSL untuk sistem warnanya.
• Serah Terima Desain: pengembang menggunakan kalkulator untuk mengonversi nilai HEX dari desain Figma ke format RGB atau HSL yang dibutuhkan oleh framework CSS atau sistem token desain mereka.
• Aksesibilitas & Kontras: spesialis aksesibilitas menggunakan kalkulator untuk memahami nilai lightness (L) sebuah warna, yang merupakan faktor kunci dalam perhitungan rasio kontras dan adaptasi mode gelap.
• Penyesuaian Palet Warna: desainer menggunakan kalkulator untuk menemukan nilai HSL dari warna merek yang ada sehingga mereka dapat membuat tint dan shade yang konsisten hanya dengan menyesuaikan kanal lightness.
• Pengembangan Lintas Platform: pengembang seluler dan lintas platform menggunakan kalkulator untuk mengonversi warna HEX web ke nilai RGB untuk React Native, Flutter, dan framework lain yang menggunakan model warna RGB.

Kalkulator Hex ke HSL mengonversi nilai warna antara tiga format warna CSS paling umum - HEX, RGB, dan HSL - secara instan dan dua arah. Masukkan warna dalam format apa pun dan langsung dapatkan semua nilai yang setara. Alat ini juga menghasilkan nilai kanal individual (H, S, L, R, G, B) dan nilai HSV, menjadikannya referensi format warna yang lengkap bagi pengembang dan desainer.

1. Masukkan warna dalam format apa pun: ketik nilai HEX (misalnya #ff6b6b), nilai RGB (misalnya 255, 107, 107), atau nilai HSL (misalnya 0, 100%, 71%). Anda juga dapat menggunakan contoh pemilih warna bawaan. Semua pemrosesan berjalan lokal di browser Anda - nilai warna Anda tidak pernah meninggalkan perangkat Anda.
2. Semua format diperbarui secara instan: saat Anda mengetik, semua kolom format lain diperbarui secara real-time. Contoh warna menampilkan pratinjau langsung dari warna tersebut. Ganti mode masukan aktif untuk mengedit format lain.
3. Salin nilai apa pun: klik tombol Salin di sebelah baris keluaran mana pun untuk menyalin nilai tertentu, atau gunakan "Salin Semua Nilai" untuk menyalin HEX, RGB, dan HSL sekaligus.

• HEX: format paling umum untuk warna web. Ringkas dan didukung secara universal. Gunakan HEX saat menyalin warna dari alat desain seperti Figma atau saat menentukan warna pada atribut HTML.
• RGB: menentukan kanal merah, hijau, dan biru (0-255). Gunakan RGB saat bekerja dengan API canvas, React Native, Flutter, atau platform apa pun yang memerlukan nilai kanal numerik.
• HSL: menentukan hue (0-360°), saturasi (0-100 %), dan lightness (0-100 %). HSL adalah format paling intuitif bagi desainer - menyesuaikan hanya lightness menghasilkan tint dan shade yang konsisten. Lebih disukai untuk properti kustom CSS dan sistem token desain.
• HSV: mirip HSL tetapi menggunakan value/kecerahan alih-alih lightness. HSV digunakan di Photoshop, pemilih warna Figma, dan sebagian besar aplikasi desain. Kalkulator Hex ke HSL juga menghasilkan nilai HSV untuk kompatibilitas antar alat.

HSL semakin disukai untuk sistem desain CSS karena membuat manipulasi warna menjadi dapat diprediksi. Untuk membuat versi yang lebih terang dari sebuah warna, cukup naikkan nilai L. Untuk membuat versi yang lebih gelap, turunkan nilainya. Ini membuat HSL ideal untuk menghasilkan skala tint/shade, varian mode gelap, dan status hover secara programatik. Tailwind CSS v3+ menggunakan variabel CSS berbasis HSL justru karena alasan ini. Kalkulator Hex ke HSL kami memudahkan mengonversi warna HEX yang ada ke HSL untuk digunakan dalam sistem token desain Anda.