Konversi HSL ke HEX Hue Saturation Lightness ↔ Hexadecimal Gratis Daring Aman
Ketik sebuah nilai dalam HSL dan bacalah langsung dalam HEX. 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 HSL ke HEX
Anda menyusun sebuah warna dalam HSL, karena itulah notasi tempat Anda dapat berpikir: rona 30, kejenuhan 29%, kecerahan 28%, cokelat redup, dan versi yang lebih pucat pada 34% untuk keadaan hover. Sekarang warna itu harus pergi ke tempat yang menginginkan kode hex: berkas token desain, lembar merek, alat yang tidak memahami hsl(), templat email, pesan kepada rekan. Konversi HSL ke HEX berarti mengambil warna yang telah Anda nalar dan menuliskannya dalam bentuk yang pendek, tidak ambigu, dan dipahami oleh segalanya.
Konversi ini bekerja ke arah yang berlawanan dengan yang pertama dijumpai desainer. Ia bermula dari tiga angka yang ramah manusia dan tiba pada tiga byte. Setiap langkah adalah aritmetika lugas, tetapi melibatkan beberapa kasus mirip trigonometri dan pembulatan, itulah sebabnya orang lebih suka menyerahkannya kepada orang lain. Halaman ini melakukannya di browser Anda, dan tidak ada yang diunggah. Di bawah Anda akan menemukan bagaimana tiga angka menjadi enam digit hex, apa yang dipertahankan konversi, mengapa warna yang telah melewati HSL bisa mendarat satu atau dua langkah dari tempat awalnya, cara desainer memakai konversi ini, dan jebakan yang perlu dihindari.
Cara kerja konversi
Dari rona, kejenuhan, dan kecerahan ke merah, hijau, dan biru
Konverter pertama-tama menghitung kroma, yaitu seberapa jauh warna dari abu-abu: ia tumbuh dengan kejenuhan dan menyusut ketika kecerahan menjauh dari 50%. Ia lalu menempatkan rona di salah satu dari enam sektor roda warna, masing-masing selebar 60 derajat, dan dari sektor itu memutuskan kanal mana dari ketiganya yang pada maksimum, mana yang pada minimum, dan mana yang berada di antaranya. Akhirnya ia menambahkan konstanta agar kecerahannya benar, menskalakan ketiga nilai dari rentang 0 sampai 1 ke 0 sampai 255, dan membulatkan masing-masing ke bilangan bulat. Ketiga byte itu ditulis dalam basis enam belas, dua digit masing-masing.
Contoh dengan angka
Ambil hsl(30, 29%, 28%). Kromanya (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. Rona 30 derajat berada di tengah sektor pertama, jadi kanal tengah adalah setengah kroma, 0,0812. Konstanta yang ditambahkan adalah 0,28 − 0,0812 = 0,1988. Jadi merah adalah 0,1624 + 0,1988 = 0,3612, hijau adalah 0,0812 + 0,1988 = 0,28, dan biru adalah 0,1988. Dikali 255 dan dibulatkan, ketiganya 92, 71, dan 51. Dalam hex, itu #5C4733.
Abu-abu
Ketika kejenuhan 0%, warnanya abu-abu apa pun ronanya, dan ketiga byte sama. hsl(0, 0%, 50%) adalah #808080. Rona diabaikan, jadi angka rona apa pun memberi abu-abu yang sama.
Apa yang dipertahankan konversi dan apa yang tidak bisa
Ia mempertahankan warna seperti yang Anda gambarkan
Hasilnya adalah warna dengan rona, kejenuhan, dan kecerahan yang Anda berikan, ditulis sebagai byte. Ketiga angka yang Anda ketik adalah warna seperti yang dipilah mata, rona pada roda, seberapa jenuh, seberapa terang. Itulah sebabnya HSL layak dimiliki, dan konversi membawa pilihan Anda ke hex dengan setia.
Ia tidak dapat menjanjikan angka yang sama dalam perjalanan 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. Dalam contoh kita, #5A4632 adalah warna yang HSL-nya sekitar hsl(30, 29%, 28%); mengonversi angka yang telah dibulatkan itu kembali memberi #5C4733, dua langkah jauhnya pada merah. Jika Anda membutuhkan byte yang tepat, simpan hex.
Tanda persen dan derajat
Halaman membaca rona dalam derajat dan kejenuhan serta kecerahan dalam persen. Anda dapat menuliskannya dengan atau tanpa tandanya. Rona di atas 360 atau di bawah 0 dililitkan mengelilingi roda, jadi 390 sama dengan 30.
Pemakaian praktis
Menulis berkas token desain
Sistem desain menyimpan warna sebagai token. Banyak tim membuat warna dalam HSL, karena mereka dapat menalarnya, dan menerbitkannya dalam hex, karena setiap alat membacanya. Konversi HSL ke HEX sekali untuk setiap token, dan berkas yang diterbitkan adalah sesuatu yang dapat dipakai semua orang.
Menghasilkan warna untuk alat yang tidak membaca hsl()
Klien email, beberapa penyunting dokumen, program grafis lama, dan banyak pustaka bagan hanya menerima hex. Apa pun yang Anda susun dalam HSL harus dikonversi sebelum mereka dapat memakainya.
Memeriksa palet yang dihasilkan
Skrip yang menghasilkan palet dengan memutar rona memberi daftar nilai hsl(). Untuk melihatnya sebagai kode yang akan Anda taruh di stylesheet atau serahkan kepada desainer, konversikan masing-masing ke hex. Ini juga memungkinkan Anda melihat nilai yang dibulatkan ke kode yang sama dan karenanya sebenarnya tidak berbeda.
Membagikan warna dalam pesan
Kode hex pendek, dapat disalin, dan dipahami hampir semua orang yang bekerja dengan warna. Nilai hsl() lebih panjang dan kurang akrab di luar desain. Ketika Anda mengirim warna kepada seseorang, hex adalah bentuk yang sopan.
Cara konversi HSL ke HEX di sini
Ketik atau tempel nilai hsl
Masukkan warna di kolom pertama dalam bentuk hsl(30, 29%, 28%), atau hanya ketiga angka. Rona dalam derajat, kejenuhan dan kecerahan dalam persen.
Baca kode hex
Jawaban muncul seketika, seperti pada hsl(30, 29%, 28%) = #5C4733. Ia ditulis dengan huruf kapital dan tanda pagar.
Salin ke pekerjaan Anda
Pakai kode itu di stylesheet, berkas token, atau pesan Anda. Untuk arah sebaliknya, HEX ke HSL hanya satu klik jauhnya.
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 HSL ke HEX
Mengharapkan kode asli kembali
Jika Anda memulai dari kode hex, mengonversinya ke HSL, tidak menyesuaikan apa pun, dan mengonversi kembali, Anda mungkin mendapat kode berbeda satu atau dua langkah jauhnya. Untuk satu warna itu tidak terlihat. Untuk sistem desain, putuskan bentuk mana yang menjadi induk, dan perlakukan yang lain sebagai turunan.
Mencampuradukkan kejenuhan dan kecerahan
Keduanya mudah tertukar secara keliru: hsl(30, 28%, 29%) bukan hsl(30, 29%, 28%). Urutannya rona, kejenuhan, kecerahan. Jika warna di layar tidak tampak seperti yang Anda harapkan, periksa bahwa Anda tidak membaliknya.
Melupakan bahwa kecerahan bukan keterangan
Dua warna dengan kecerahan sama bisa tampak berbeda dalam keterangan. Kuning pada kecerahan 50% tampak jauh lebih terang daripada biru pada 50%. Jika Anda memilih warna untuk teks dan latar belakang, periksa kontrasnya dengan alat yang layak, bukan dengan membandingkan angka kecerahan.
Memakai nilai di luar rentang
Kejenuhan dan kecerahan dibatasi pada 0 sampai 100 persen. Nilai di luar rentang itu dijepit. Kecerahan 120% tidak lebih terang daripada putih; ia putih.
Pertanyaan yang diajukan orang sebelum mengonversi
Apa hsl(0, 100%, 50%) dalam hex?
#FF0000, merah murni.
Apa hsl(0, 0%, 100%) dalam hex?
#FFFFFF, putih.
Bisakah saya memakai desimal?
Ya. hsl(30,5, 28,6%, 27,8%) diterima. Hasilnya dibulatkan ke byte bulat.
Apakah konversinya eksak?
Ia memberi byte yang eksak untuk angka yang Anda ketik, dibulatkan ke nilai bulat. Kembali bisa mendarat satu langkah jauhnya, karena angka HSL telah dibulatkan.
Apakah warna saya diunggah?
Tidak. Aritmetikanya berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan HEX ke HSL.
Memilih dengan bijak saat konversi HSL ke HEX
Putuskan bentuk mana yang menjadi induk
Jika Anda mendesain dalam HSL, simpan nilai HSL sebagai sumber dan terbitkan hex sebagai keluaran. Jika merek memberi Anda hex, simpan itu dan pakai HSL hanya untuk variasi. Mencampur keduanya sebagai sumber yang setara itulah yang menciptakan penyimpangan.
Pakai HSL untuk variasi, hex untuk menetapkan
Ketika Anda membutuhkan keluarga nuansa, bekerjalah dalam HSL. Ketika Anda perlu menetapkan warna agar identik di setiap alat, tulis sebagai hex.
Simpan angka yang Anda ketik
Catat nilai HSL di samping hex dalam catatan palet Anda. Jika seseorang kemudian menginginkan versi yang lebih pucat, mereka dapat mulai dari angka Anda dan bukan dari kode yang sudah dibulatkan.
Enam sektor roda
Kanal mana yang tinggi, mana yang rendah
Konversi membagi roda menjadi enam sektor 60 derajat, dan di masing-masing satu kanal pada maksimum, satu pada minimum, dan yang ketiga berubah mulus. Dari 0 sampai 60, merah pada maksimum, biru pada minimum, dan hijau naik: merah berubah menjadi kuning. Dari 60 sampai 120, hijau pada maksimum dan merah turun: kuning berubah menjadi hijau. Dari 120 sampai 180, hijau tetap tinggi dan biru naik: hijau berubah menjadi sian. Dari 180 sampai 240, biru mengambil alih dan hijau turun. Dari 240 sampai 300, biru tetap tinggi dan merah naik: biru berubah menjadi magenta. Dari 300 sampai 360, merah mengambil alih lagi dan biru turun. Ketika Anda konversi HSL ke HEX, berguna mengetahui sektor mana yang memuat rona Anda, karena itu memberi tahu pasangan mana dari ketiganya dalam jawaban yang paling besar.
Mengapa jawabannya punya kemiripan keluarga
Warna dengan rona dan kejenuhan yang sama tetapi kecerahan berbeda memberi kode hex yang tampak berkerabat: pola yang sama tentang pasangan mana yang tinggi dan mana yang rendah, hanya diskalakan naik atau turun. #5C4733, #7A5F44, dan #A38461 semuanya berada dalam keluarga yang sama, dengan merah terbesar, lalu hijau, lalu biru. Anda dapat belajar membacanya sekilas, dan itu membuat kesalahan lebih mudah ditangkap.
Membangun tangga kecerahan
Satu rona, sembilan langkah
Pemakaian konversi yang sangat praktis adalah membangun tangga satu warna dari sangat pucat sampai sangat gelap, jenis skala yang diberi label sistem desain 50, 100, 200, dan seterusnya sampai 900. Pilih rona dan kejenuhan, dan lewati kecerahan melalui nilai seperti 96, 90, 80, 70, 60, 50, 40, 30, dan 20 persen. Konversi HSL ke HEX untuk setiap langkah, dan Anda punya sembilan kode yang saling cocok. Mengurangi sedikit kejenuhan di ujung-ujungnya, beberapa poin pada langkah yang paling pucat dan paling gelap, sering tampak lebih alami daripada mempertahankannya konstan.
Menamai langkah-langkahnya
Beri setiap langkah nama yang mencatat perannya, bukan nilainya: permukaan untuk yang paling pucat, batas untuk berikutnya, teks untuk yang paling gelap. Dalam kode, nama memberi tahu pembaca berikutnya untuk apa warna itu, dan Anda dapat mengubah angka di baliknya tanpa menyentuh aturan yang memakainya.
Tema terang dan gelap
Mencerminkan tangga
Tema gelap sering berupa tema terang dengan tangga dibalik: langkah paling pucat menjadi latar belakang halaman pada tema terang dan yang paling gelap menjadi latar belakang pada tema gelap. Jika Anda membangun tangga dalam HSL, tema gelap tidak memakan biaya selain satu set konversi kedua. Pertahankan rona tetap, yang menjaga watak merek, dan sesuaikan kejenuhan sedikit, karena warna jenuh cenderung tampak keras pada latar gelap.
Memeriksa kedua tema
Uji setiap pasangan teks dan latar belakang dari kedua tema untuk kontras. Warna yang cocok pada putih bisa gagal pada hampir hitam, dan pemeriksaannya memakan semenit dengan alat kontras dan kode hex yang baru Anda hasilkan.
Ketika Anda hanya punya gambaran kasar tentang warnanya
Mulai dari roda, lalu perhalus
Kadang Anda tidak punya kode hex sama sekali, hanya gagasan: biru yang tenang, oranye yang hangat, hijau yang segar. HSL adalah tempat yang baik untuk memulai, karena Anda dapat memilih rona dari patokan roda, menetapkan kejenuhan sedang dan kecerahan menengah, lalu konversi HSL ke HEX untuk melihat apa yang Anda punya. Jika tampak terlalu mencolok, turunkan kejenuhan; jika tampak datar, geser kecerahan. Setiap percobaan memakan detik, dan Anda berakhir dengan kode hex yang dapat langsung Anda taruh di stylesheet.
Konverter terkait
Keluarga alat yang sama mencakup konversi tetangganya. Untuk kembali, pakai HEX ke HSL. 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 melakukan untuk panjang apa yang dilakukan halaman ini untuk warna.
Contoh yang dikerjakan
Katakanlah Anda telah memilih hijau untuk keadaan sukses sebuah aplikasi: hsl(145, 55%, 38%). Anda mengetiknya dan membaca #2C9658. Anda memakai kode itu di berkas token sebagai --success. Untuk latar belakang pemberitahuan sukses Anda mengambil rona yang sama, hsl(145, 45%, 94%), dan membaca #E9F7EF. Untuk batas, hsl(145, 45%, 78%), yang terbaca #AEE0C3. Tiga kode, satu rona, semuanya diturunkan dalam semenit, dan masing-masing kode hex biasa yang dapat dibuka alat apa pun di tim.
Daftar periksa singkat
Sebelum mengonversi
Periksa urutan ketiga angka: rona, kejenuhan, kecerahan. Putuskan bentuk mana yang menjadi induk Anda.
Saat mengonversi
Ketik nilainya, baca hex, dan salin dengan tanda pagarnya.
Setelah mengonversi
Lihat warna di layar dalam konteks, dan catat nilai HSL di samping kode untuk nanti.
Kesalahan umum
Menukar kejenuhan dan kecerahan
Urutannya rona, kejenuhan, kecerahan.
Mengharapkan hex lama pulih
Ia bisa mendarat satu langkah jauhnya. Simpan aslinya jika penting.
Membandingkan kecerahan, bukan kontras
Pakai alat kontras untuk teks dan latar belakang.
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 HSL ke HEX.
Ringkasan
Untuk konversi HSL ke HEX di sini, ketik rona dalam derajat dan kejenuhan serta kecerahan dalam persen, dan baca kode hex seketika. Konversi mempertahankan warna seperti yang dipilah mata: rona pada roda, seberapa jenuh, seberapa terang. Kedua notasi 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, simpan hex. Tidak ada yang diunggah.