Konversi HEX ke HSL Hexadecimal ↔ Hue Saturation Lightness Gratis Daring Aman
Ketik sebuah nilai dalam HEX dan bacalah langsung dalam HSL. Hitungannya terjadi di peramban Anda, tidak ada yang dikirim ke mana pun, dan apa yang menentukan hasilnya tertulis di bawah, bukan diandaikan.
Tidak ada unggahan
Dari mana notasi ini berasal
Heksadesimal dan RGB adalah hal yang sama, ditulis dua kali. Warna layar adalah tiga bilangan — seberapa banyak cahaya merah, hijau, dan biru yang dipancarkan — masing-masing 0 sampai 255, yaitu satu bita; heksadesimal sekadar menulis bita itu dalam basis enam belas, sehingga #FF8800 dan rgb(255, 136, 0) adalah perintah yang sama kepada piksel yang sama. HSL diciptakan karena keduanya tak terbaca oleh manusia: ia memberi rona sebagai sudut pada roda warna, dengan kejenuhan dan kecerahan sebagai persentase, sehingga perancang dapat menerangkan sesuatu tanpa menghitung ulang tiga angka. CMYK milik dunia yang sama sekali lain — tinta, bukan cahaya. Ia bersifat kurangan, dibangun dari empat pelat cetak, dan tak dapat mencapai setiap warna yang sanggup dibuat layar, sebab layar memancarkan cahaya sedangkan kertas hanya memantulkannya.
Di mana Anda menemuinya
Heksadesimal adalah yang Anda ketikkan ke dalam lembar gaya dan yang diserahkan alat rancang kepada Anda. RGB muncul di mana pun sebuah warna memerlukan hitungan: gradasi, kebeningan, kode yang menghitung sebuah naungan. HSL dipakai saat menyetel palet dengan tangan, sebab perubahan yang diinginkan biasanya perubahan salah satu dari tiga angkanya. CMYK adalah yang diminta percetakan, dan mengubah ke dalamnya adalah saat sebuah rancangan berhenti menjadi cahaya dan menjadi tinta.
Pertanyaan yang sering diajukan
Mengapa hasil CMYK saya berbeda dari yang diberikan percetakan?
Karena tak ada satu konversi yang benar. Hitungan di halaman ini adalah yang sederhana dan tak bergantung peranti — jawaban yang tepat bila Anda butuh titik tolak atau padanan kasar. Percetakan mengubahnya lewat profil warna yang memperhitungkan tinta, kertas, dan mesin tertentu; warna RGB yang sama akan memberi nilai CMYK berbeda pada kertas berkilap dibanding kertas tanpa lapisan. Untuk apa pun yang harus sama persis, mintalah profil kepada percetakan alih-alih memercayai sebuah rumus.
Mengapa sebagian warna layar tak bisa dicetak?
Karena keduanya tak menjangkau warna yang sama. Layar membuat warna dengan menambahkan cahaya dan sanggup menghasilkan sian atau hijau yang pekat dan menyala, yang tak dapat ditandingi tinta; kertas membuat warna dengan menyerap cahaya, dan paling terang yang dapat dicapainya hanyalah putih halaman. Himpunan warna yang dapat dijangkau masing-masing disebut gamut, dan di tempat keduanya tak bertindih, konversi harus memilih warna terdekat yang tersedia. Itulah sebabnya warna cerah di layar kerap tampak sedikit kusam saat dicetak.
Apakah hasilnya tepat?
Bila kedua satuan saling didefinisikan dengan bilangan bulat, ya — halaman menyatakannya di atas angka, dan pembulatan hanya ada pada berapa digit yang ditampilkan. Bila rasionya tidak berujung sebagai desimal, halaman menampilkan dua belas angka penting dan menyebut hubungannya hampiran, bukan berpura-pura sebaliknya.
Apakah yang saya ketik meninggalkan perangkat saya?
Tidak. Perhitungan berjalan di peramban Anda; tidak ada yang diunggah, dan memang tidak ada server untuk menerimanya. Sekali dimuat, halaman tetap bekerja meski jaringan dimatikan.
Mengapa Anda konversi HEX ke HSL
Kode hex seperti #5A4632 adalah cara yang bagus untuk menyimpan warna dan cara yang buruk untuk memikirkannya. Tidak ada dalam digitnya yang memberi tahu Anda bahwa warna itu cokelat, seberapa terang, atau seperti apa versi yang sedikit lebih pucat. HSL diciptakan untuk memperbaikinya. Ia menggambarkan warna seperti cara orang cenderung membicarakannya: rona apa, seberapa hidup, dan seberapa terang. Konversi HEX ke HSL berarti menerjemahkan warna dari bentuk yang diberikan alat desain kepada Anda ke bentuk yang dapat Anda nalar: hsl(30, 29%, 28%) adalah cokelat-oranye gelap yang redup, dan Anda dapat langsung melihat bahwa menaikkan angka terakhir akan membuatnya lebih pucat.
Itulah alasan sebenarnya desainer dan pengembang front-end memakai konversi ini. Mereka punya warna merek dalam hex dan membutuhkan keluarga warna yang terkait: yang lebih terang untuk keadaan hover, yang lebih gelap untuk tombol yang ditekan, yang sangat pucat untuk tint latar belakang, yang dikurangi kejenuhannya untuk kontrol yang dinonaktifkan. Dalam hex, masing-masing adalah perburuan baru untuk tiga pasang digit. Dalam HSL, masing-masing adalah perubahan pada satu angka. Warnanya tetap warna yang sama, dilihat lewat lensa yang lebih berguna.
Halaman ini mengonversi di browser Anda, dan tidak ada yang diunggah. Di bawah Anda akan menemukan cara tiga angka HSL dihitung dari digit hex, apa yang dipertahankan konversi dan di mana ia membulatkan, apa arti rona, kejenuhan, dan kecerahan dalam praktik, bagaimana desainer memakai HSL untuk membangun palet dan keadaan, dan jebakan yang menjerat orang yang konversi HEX ke HSL untuk pertama kali.
Apa yang digambarkan HSL
Rona: posisi pada roda warna
Rona adalah sudut dari 0 sampai 360 derajat mengelilingi roda warna. Merah berada pada 0, kuning pada 60, hijau pada 120, sian pada 180, biru pada 240, dan magenta pada 300; pada 360 Anda kembali ke merah. Rona 30 berada di antara merah dan kuning, yaitu oranye. Angka itu mengatakan keluarga warna mana Anda berada, dan tidak ada tentang seberapa terang atau pucat.
Kejenuhan: seberapa hidup
Kejenuhan adalah persentase. Pada 100% warna semurni yang diizinkan rona; pada 0% ia kehilangan seluruh warnanya dan menjadi abu-abu. Kejenuhan 29%, seperti pada cokelat contoh kita, adalah warna yang redup dan membumi. Menurunkan kejenuhan adalah cara tercepat untuk menenangkan warna yang mencolok tanpa mengubah wataknya.
Kecerahan: seberapa pucat atau gelap
Kecerahan juga persentase. Pada 0% warna adalah hitam apa pun rona dan kejenuhannya; pada 100% ia putih; pada 50% ia warna penuh yang normal. Cokelat kita pada 28% berada di sisi gelap. Menaikkan angka memberi versi lebih pucat dari warna yang sama, dan menurunkannya versi lebih gelap, yang persis perubahan yang paling sering diinginkan desainer.
Mengapa lebih mudah daripada hex
Dalam hex, membuat warna lebih pucat berarti menaikkan ketiga pasang dengan jumlah berbeda agar rona tidak bergeser, yang hampir mustahil dilakukan dengan mata. Dalam HSL itu berarti mengubah satu angka dan membiarkan dua lainnya.
Cara kerja konversi
Dari tiga byte ke sudut dan dua persentase
Konverter pertama-tama membaca digit hex sebagai nilai merah, hijau, dan biru, masing-masing dari 0 sampai 255, dan menskalakannya ke antara 0 dan 1. Ia mencari yang terbesar dan terkecil dari ketiganya. Kecerahan adalah rata-rata keduanya. Kejenuhan bergantung pada seberapa jauh keduanya terpisah, relatif terhadap kecerahan. Rona bergantung pada kanal mana yang terbesar dan bagaimana dua lainnya dibandingkan. Jika ketiganya sama, warnanya abu-abu, kejenuhan nol dan rona tidak punya arti; konverter lalu menampilkan 0 untuknya.
Contohnya
Untuk #5A4632 byte-nya adalah 90, 70, dan 50. Merah terbesar pada 0,353, biru terkecil pada 0,196. Kecerahan adalah setengah jumlah keduanya, 0,275, sekitar 28%. Selisihnya 0,157, jadi kejenuhan adalah 0,157 dibagi jumlah 0,549, sekitar 29%. Merah adalah kanal terbesar dan hijau berada di antara, yang menempatkan rona pada 30 derajat. Hasilnya hsl(30, 29%, 28%).
Bilangan bulat
Ketiga angka dibulatkan ke derajat bulat dan persen bulat ketika dituliskan. Itulah bentuk yang dipakai orang dan bentuk yang diharapkan CSS dalam pekerjaan sehari-hari, tetapi itu berarti sebagian informasi dibuang pada digit terakhir, seperti dijelaskan bagian berikutnya.
Apa yang dipertahankan konversi dan apa yang tidak bisa
Ia mempertahankan warna seperti yang dipilah mata
Hasilnya adalah warna seperti yang dipilah mata: rona pada roda, seberapa jenuh, seberapa terang. Itulah sebabnya HSL layak dimiliki. Anda dapat membuat warna lebih pucat atau satu nuansa lebih gelap dengan mengubah satu angka, yang hampir mustahil dalam hex.
Ia tidak dapat menjanjikan byte yang sama kembali
Keduanya menggambarkan warna yang sama, tetapi HSL mencapainya lewat geometri berbeda dan ketiga angkanya dibulatkan ke derajat bulat dan persen bulat ketika dituliskan. Jadi warna yang dibawa ke HSL dan kembali bisa mendarat satu atau dua langkah dari tempat awalnya: secara visual sama, bukan byte demi byte sama. Jika Anda membutuhkan byte yang tepat kembali, simpan hex. Konversi HEX ke HSL untuk bekerja dengan warna, dan simpan hex sebagai induknya.
Abu-abu tidak punya rona
Ketika ketiga byte sama, tidak ada yang bisa dikatakan tentang rona. Konverter memberi rona 0 dan kejenuhan 0%, dan kecerahan saja yang menggambarkan abu-abu itu. Jangan menafsirkan apa pun dari 0 itu.
Memakai HSL dalam praktik
Membangun keluarga nuansa
Ambil warna dasar hsl(30, 29%, 28%). Nuansa lebih terang untuk hover adalah hsl(30, 29%, 34%). Tint sangat pucat untuk latar belakang adalah hsl(30, 29%, 94%). Nuansa lebih gelap untuk keadaan ditekan adalah hsl(30, 29%, 22%). Rona dan kejenuhan tetap, jadi warna-warna itu jelas saling cocok. Melakukan hal yang sama dalam hex akan memakan beberapa percobaan dan tetap tampak sedikit meleset.
Tema dan mode gelap
Tema sering membutuhkan palet yang sama dalam versi terang dan gelap. Dengan HSL, Anda mempertahankan rona dan menyesuaikan kecerahan dan kejenuhan: terangkan latar belakang dan gelapkan teks untuk tema terang, dan sebaliknya untuk yang gelap. Mendefinisikan rona sebagai properti kustom dan hanya mengubah kecerahan adalah cara yang lazim dan rapi untuk melakukannya.
Menghasilkan palet
Untuk menemukan warna yang cocok dengan warna dasar, putar ronanya. Tiga puluh derajat ke kedua sisi memberi warna analog, 180 memberi komplemen, dan 120 atau 240 memberi triad. Tetapkan kejenuhan dan kecerahan, ubah rona, dan warna-warnanya punya nuansa seragam. Itu cara cepat memulai palet yang tidak tampak acak.
Kontras yang dapat diakses
Kecerahan adalah kendali utama untuk kontras. Jika teks sulit dibaca pada latar berwarna, perbaikannya biasanya menambah selisih kecerahan di antara keduanya, dan HSL menjadikannya soal menyesuaikan satu angka di tiap sisi.
Cara konversi HEX ke HSL di sini
Ketik atau tempel kode hex
Masukkan warna di kolom pertama, dengan atau tanpa tanda pagar. Bentuk tiga dan enam digit diterima, dan bentuk delapan digit dengan transparansi juga dibaca.
Baca nilai hsl
Jawaban muncul seketika, seperti pada #5A4632 = hsl(30, 29%, 28%). Ketiga angka adalah rona dalam derajat serta kejenuhan dan kecerahan dalam persen.
Salin ke stylesheet Anda
Pakai hasilnya apa adanya, dalam aturan seperti color: hsl(30, 29%, 28%). Untuk menyesuaikan warna, ubah angka terakhir. Alat untuk arah sebaliknya adalah HSL ke HEX.
Dari mana notasi ini berasal
Hex dan RGB adalah hal yang sama yang ditulis dua kali
Warna layar adalah tiga angka, berapa banyak cahaya merah, hijau, dan biru yang dipancarkan, masing-masing dari 0 sampai 255, yaitu satu byte. Hex hanya menulis byte itu dalam basis enam belas. Untuk melihat angkanya, konversi HEX ke RGB.
HSL dan CMYK
HSL diciptakan karena tidak satu pun dari keduanya terbaca oleh manusia: ia memberi rona sebagai sudut mengelilingi roda warna, dengan kejenuhan dan kecerahan sebagai persentase, sehingga desainer dapat membuat sesuatu lebih terang tanpa menghitung ulang tiga angka. CMYK milik dunia yang sama sekali berbeda, tinta alih-alih cahaya. Ia subtraktif, dibangun dari empat pelat cetak, dan tidak dapat mencapai setiap warna yang dapat dicapai layar, karena layar memancarkan cahaya sedangkan kertas hanya memantulkannya.
Jebakan saat konversi HEX ke HSL
Mengharapkan perjalanan bolak-balik yang sempurna
Karena pembulatan, mengonversi kembali bisa memberi kode satu atau dua langkah dari aslinya. Untuk satu warna itu tidak terlihat. Untuk sistem desain di mana banyak warna dikonversi bolak-balik, ia bisa menumpuk. Simpan hex sebagai sumber.
Menganggap kecerahan sama berarti kecerahan tampak sama
Dua warna dengan kecerahan HSL yang sama bisa tampak sangat berbeda dalam keterangan: kuning pada 50% tampak jauh lebih terang daripada biru pada 50%. Kecerahan HSL adalah angka yang praktis, bukan ukuran keterangan yang dirasakan. Untuk pemeriksaan kontras, pakai alat kontras yang layak.
Melupakan tanda persen
Dalam CSS, kejenuhan dan kecerahan dalam hsl() membawa tanda persen, dan rona adalah angka biasa atau angka dengan deg. Menghilangkan tandanya adalah kesalahan klasik.
Menafsirkan terlalu banyak dari abu-abu
Abu-abu tidak punya rona. Jika konverter menampilkan 0 untuknya, itu tidak berarti ia kemerahan.
Pertanyaan yang diajukan orang sebelum mengonversi
Apa #FF0000 dalam HSL?
hsl(0, 100%, 50%), merah murni.
Apa #FFFFFF dalam HSL?
hsl(0, 0%, 100%), putih. Rona tidak bermakna untuk putih, dan konverter menampilkan 0.
Apakah HSL didukung di mana-mana?
Semua browser terkini memahami hsl() dan hsla(). Ia sudah ada di CSS selama bertahun-tahun.
Apakah konversinya eksak?
Ia eksak dalam arti menggambarkan warna yang sama, tetapi angkanya dibulatkan ke derajat dan persen bulat, jadi kembali bisa mendarat satu langkah jauhnya.
Apakah warna saya diunggah?
Tidak. Aritmetikanya berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan HSL ke HEX.
Memilih dengan bijak saat konversi HEX ke HSL
Pakai HSL untuk bekerja, hex untuk menyimpan
Simpan palet induk dalam hex, di mana ia tidak ambigu, dan pakai HSL ketika Anda ingin membuat variasi. Perjalanan bolak-balik kehilangan sedikit; induknya tidak.
Pertimbangkan ruang warna yang lebih baru
CSS kini menawarkan oklch() dan notasi serupa di mana kecerahan yang sama benar-benar tampak sama. Layak dipelajari untuk sistem desain baru. HSL tetap notasi yang hampir semua orang pahami dan didukung setiap alat.
Pakai properti kustom
Definisikan --hue, --sat, dan --light, dan bangun warna darinya: hsl(var(--hue) var(--sat) var(--light)). Tema lalu berubah dengan menyunting beberapa angka.
Membaca dan menulis HSL dengan percaya diri
Beberapa patokan untuk diingat
Beberapa angka membuat HSL lebih mudah dibaca. Rona pada kelipatan 60 adalah warna murni: 0 merah, 60 kuning, 120 hijau, 180 sian, 240 biru, 300 magenta. Kecerahan 50 dengan kejenuhan 100 memberi versi paling murni dari rona mana pun, dan kecerahan 95 atau lebih adalah tint yang begitu pucat sehingga berfungsi sebagai latar belakang. Ketika Anda konversi HEX ke HSL dan melihat rona dekat salah satu patokan ini, Anda dapat menamai keluarga warnanya sekilas.
Berpindah antarkeluarga
Menambahkan 180 pada rona memberi warna di seberangnya pada roda, yaitu komplemen dan biasanya kontras terkuat. Menambah atau mengurangi 30 memberi tetangga yang duduk nyaman di samping aslinya. Desainer memakai langkah-langkah ini untuk memilih aksen yang cocok dengan warna merek tanpa menebak.
Mencatat nilai yang dikonversi
Ketika Anda konversi HEX ke HSL untuk sebuah palet, tuliskan hasilnya dalam tabel dengan hex asli di sampingnya. Tabel menunjukkan bagaimana warna-warna itu berhubungan, dan jika rona atau kecerahan tidak sejalan dengan yang lain, keanehannya langsung terlihat. Ia juga memberi tim Anda rujukan bersama.
Menguji pada layar sungguhan
Warna yang tampak seimbang pada monitor terkalibrasi bisa tampak berbeda pada ponsel di bawah sinar matahari atau laptop murah. Periksa palet jadi pada setidaknya dua perangkat, dan sesuaikan kecerahan sedikit jika tint pucat menghilang pada salah satunya.
Konverter terkait
Keluarga alat yang sama mencakup konversi tetangganya. Untuk kembali, pakai HSL ke HEX. Untuk angka di balik kode, ada HEX ke RGB dan RGB ke HEX, dan untuk cetak, HEX ke CMYK dan CMYK ke HEX. Untuk ukuran dalam stylesheet yang sama, px ke rem dan px ke em melakukan untuk panjang apa yang dilakukan halaman ini untuk warna.
Contoh yang dikerjakan
Katakanlah warna merek Anda #1E7A5C. Anda konversi HEX ke HSL dan membaca hsl(160, 61%, 30%). Untuk keadaan hover Anda menulis hsl(160, 61%, 36%), sedikit lebih terang. Untuk keadaan ditekan, hsl(160, 61%, 24%). Untuk latar belakang yang sangat pucat di balik pemberitahuan, hsl(160, 40%, 95%). Untuk tombol yang dinonaktifkan, hsl(160, 12%, 60%), rona yang sama dengan sebagian besar warnanya dihilangkan. Lima warna, satu rona, ditulis dalam semenit, dan semuanya tampak saling cocok. Ketika warna merek berubah, Anda mengubah angka rona sekali.
Daftar periksa singkat
Sebelum mengonversi
Putuskan apa yang ingin Anda lakukan dengan warna itu: memvariasikannya, membuat temanya, atau sekadar membacanya.
Saat mengonversi
Tempel hex, baca hsl, dan catat ketiga angkanya.
Setelah mengonversi
Buat variasi dengan mengubah satu angka sekali waktu, dan lihat pada latar belakang yang sebenarnya.
Kesalahan umum
Memperlakukan angka yang dibulatkan sebagai eksak
Itu bilangan bulat. Simpan hex sebagai induknya.
Menyamakan kecerahan dengan keterangan
Dua warna pada kecerahan yang sama bisa sangat berbeda dalam seberapa terang tampaknya.
Menghilangkan tanda persen
Kejenuhan dan kecerahan membutuhkannya dalam CSS.
Warna Anda tetap di perangkat Anda
Perhitungan terjadi secara lokal. Nilai Anda dipakai oleh browser Anda sendiri dan tidak ada yang dikirim ke mana pun. Tidak ada yang perlu dihapus sesudahnya dan tidak ada akun yang perlu dibuat. Itulah cara sederhana untuk konversi HEX ke HSL.
Ringkasan
Untuk konversi HEX ke HSL di sini, ketik atau tempel kode hex dan baca nilai hsl seketika. Konversi mempertahankan warna seperti yang dipilah mata: rona pada roda, seberapa jenuh, seberapa terang. Itulah sebabnya HSL layak dimiliki, karena Anda dapat membuat warna lebih pucat atau satu nuansa lebih gelap dengan mengubah satu angka, yang hampir mustahil dalam hex. Keduanya menggambarkan warna yang sama, tetapi HSL mencapainya lewat geometri berbeda dan ketiga angkanya dibulatkan ke derajat bulat dan persen bulat, sehingga warna yang dibawa ke HSL dan kembali bisa mendarat satu atau dua langkah dari tempat awalnya. Jika Anda membutuhkan byte yang tepat kembali, simpan hex. Tidak ada yang diunggah.