Konversi warna hex apa pun ke HSL di peramban Anda — 3 digit, 6 digit, dan 8 digit dengan alpha semuanya didukung. Gratis, instan, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Tints
Shades
Tones
Harmonies
— — — — — Konverter HEX ke HSL adalah utilitas kecil yang mengubah kode warna hex (`#3b82f6`) menjadi triple silindris Hue / Saturation / Lightness yang mengkodekan warna sRGB yang sama (`hsl(217 91% 60%)`). Kode hex adalah string basis-16 ringkas yang ditempel desainer dan developer di antara Figma, Sketch, Photoshop, PDF panduan brand, dan stylesheet CSS — tiga kanal 8-bit dikemas ke dalam bentuk `#RRGGBB` 6-karakter, berlabuh ke ruang warna sRGB yang didefinisikan oleh IEC 61966-2-1 pada 1996. HSL adalah pembentukan ulang silindris dari ruang warna yang sama menjadi tiga sumbu yang lebih ramah-desainer: sudut rona pada roda warna, persen saturasi kromatik, dan persen lightness. Developer mengonversi HEX → HSL terus-menerus: untuk mendefinisikan warna brand sebagai variabel CSS dan kemudian menyusun shade yang lebih terang atau lebih gelap dengan menyesuaikan hanya L, untuk memasukkan ke UI pemilih warna yang menampilkan Hue dan SL sebagai kontrol terpisah, untuk menghasilkan ramp tint dan shade untuk sistem desain, atau untuk melakukan matematika variabel CSS runtime melalui `hsl(from var(--primary) h s calc(l + 10%))` untuk token tema turunan. Alat ini menjalankan konversi secara langsung saat Anda mengetik, tanpa tombol "Konversi" untuk diklik, dan memunculkan setiap format warna umum lainnya (RGB, OKLCH, OKLAB, HSV, HWB, CMYK, ditambah 148 nama warna CSS) berdampingan dengan output HSL secara gratis.
**Format HSL sendiri layak dilihat lebih dekat.** HSL = Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Hue adalah posisi sudut pada roda warna — 0° adalah merah, 60° adalah kuning, 120° adalah hijau, 180° adalah cyan, 240° adalah biru, 300° adalah magenta, dan 360° membungkus kembali ke merah. Saturation adalah intensitas kromatik dari 0% (abu-abu akromatik) hingga 100% (sepenuhnya kromatik tanpa konten abu-abu). Lightness adalah kecerahan dari 0% (hitam murni, terlepas dari rona atau saturasi) melalui 50% (rona murni pada chroma penuh) ke 100% (putih murni, terlepas dari rona atau saturasi). Alvy Ray Smith menerbitkan derivasi asli pada 1978 sebagai bagian dari dorongan grafis-komputer awal untuk memberi desainer sistem koordinat yang lebih dekat dengan model kognitif warna mereka dibandingkan pengalamatan kanal RGB mentah. Model ini telah ada di CSS sejak CSS3 (2010) dan dirilis di setiap peramban hingga IE 9. Sintaks CSS asli menggunakan koma: `hsl(217, 91%, 60%)` untuk opak, `hsla(217, 91%, 60%, 0.5)` untuk yang membawa alpha. CSS Color 4 (W3C Candidate Recommendation sejak 2022) menambahkan bentuk dipisah-spasi modern: `hsl(217 91% 60%)` dan `hsl(217 91% 60% / 0.5)` dengan alpha berawalan-slash — bentuk sintaks yang sama dengan notasi fungsional CSS Color 4 lainnya (`rgb()`, `lab()`, `oklch()`, `color()`). Rona juga dapat diekspresikan dalam putaran (`hsl(0.6turn 91% 60%)`) atau radian (`hsl(3.787rad 91% 60%)`), semua setara dengan bentuk derajat kanonik. Setiap peramban evergreen mengurai setiap rasa sintaksis; alat memancarkan bentuk dipisah-spasi modern secara default.
Matematika konversi berjalan kedua arah secara bersih. **HEX → HSL** adalah pipeline dua-langkah. Pertama, urai hex 6 digit `#RRGGBB` sebagai tiga angka basis-16 2 digit melalui `parseInt(hex.slice(1, 3), 16)` dst. untuk mendapatkan kanal RGB integer dalam 0-255. Kedua, normalkan setiap kanal ke 0-1 dengan membagi dengan 255, lalu hitung `max = Math.max(r, g, b)`, `min = Math.min(r, g, b)`, `delta = max - min`. Lightness adalah rata-rata maks dan min: `L = (max + min) / 2`. Saturation kondisional pada lightness: ketika L ≤ 0,5, `S = delta / (max + min)`; ketika L > 0,5, `S = delta / (2 - max - min)`. Setara dalam bentuk CSS Color 4 §6.4, `S = delta / (1 - |2L - 1|)` (dengan S = 0 ketika delta = 0). Hue piecewise pada kanal mana yang maks: ketika R maks, `H = ((G - B) / delta) % 6`; ketika G maks, `H = (B - R) / delta + 2`; ketika B maks, `H = (R - G) / delta + 4`; kalikan dengan 60 untuk menskalakan ke derajat, tambahkan 360 jika negatif. Inversnya (HSL → HEX, melalui RGB) menggunakan helper `f(n) = L - a * max(-1, min(k-3, 9-k, 1))` di mana `a = S * min(L, 1-L)` dan `k = (n + H/30) mod 12`, diterapkan dengan n = 0, 8, 4 untuk menghasilkan R, G, B masing-masing, lalu diskalakan ke 0-255 dan dikodekan-hex.
**Mengapa HSL masih berguna.** Slider intuitif — menyesuaikan L mencerahkan atau menggelapkan secara dapat diprediksi tanpa merusak identitas rona, sedangkan menyesuaikan kanal RGB menghasilkan pergeseran warna yang kurang dapat diprediksi. Matematika CSS runtime — peramban modern mendukung `hsl(from var(--primary) h s calc(l + 10%))` untuk menurunkan token tema pada waktu render. Kognisi desainer — desainer yang dibesarkan dengan pemilih warna HSV memikirkan warna dalam istilah rona + chroma bahkan ketika file mengirim hex. **Masalah HSL** adalah bahwa sumbu Lightness-nya tidak seragam secara perseptual — hijau pada L=50% tampak lebih terang secara terlihat daripada biru pada L=50% karena HSL mewarisi kekhasan gamma sRGB dan memperlakukan setiap rona sebagai setara pada skala L. Ketika Anda membutuhkan keseragaman perseptual (generasi palet di mana setiap langkah harus tampak sama terang, perhitungan token mode-gelap yang tidak secara tidak sengaja membuat teks biru lebih sulit dibaca daripada teks hijau), gunakan OKLCH sebagai gantinya — alat yang sama memunculkan keduanya, sehingga pilihannya hanya sekali pandang.
Alur kerja HEX → HSL alat ini adalah satu arah dari keluarga 5-spoke yang semuanya berbagi konverter warna terpadu yang mendasarinya. Konverter warna terpadu khusus adalah hub-nya — ia menunjukkan semua 9 format yang dapat diedit secara bersamaan dan merupakan alat yang tepat ketika alur kerja Anda membutuhkan lebih dari sekadar hex dan HSL. Spoke arah-tunggal menargetkan intent pencarian Google tertentu: konverter hex ke RGB untuk arah canvas-dan-perangkat-keras, konverter RGB ke hex untuk inversnya, konverter hex ke OKLCH untuk sistem desain modern yang seragam secara perseptual (Tailwind v4 dan shadcn keduanya defaultnya OKLCH sekarang), dan konverter hex ke CMYK untuk aproksimasi persiapan cetak. Kelima spoke dan hub berbagi mesin parsing yang sama dan matematika konversi yang sama, sehingga hasilnya dijamin identik di seluruh keluarga. Setiap konversi berjalan secara lokal di peramban Anda — kode hex Anda tidak pernah diunggah, tidak pernah dicatat, dan nol permintaan jaringan berjalan saat Anda mengetik. Verifikasi di DevTools.
// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
let h = input.trim().replace(/^#/, '');
if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
const r = parseInt(h.slice(0, 2), 16) / 255;
const g = parseInt(h.slice(2, 4), 16) / 255;
const b = parseInt(h.slice(4, 6), 16) / 255;
const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
const L = (max + min) / 2;
const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
let H = 0;
if (delta !== 0) {
if (max === r) H = ((g - b) / delta) % 6;
else if (max === g) H = (b - r) / delta + 2;
else H = (r - g) / delta + 4;
H = (H * 60 + 360) % 360;
}
return { h: H, s: S, l: L, alpha };
}
console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 } 3 digit `#F73`, alpha 4 digit `#F738`, 6 digit `#3b82f6`, alpha 8 digit `#FF573380`, ditambah varian tanpa `#` untuk masing-masing. Parser menormalkan semuanya menjadi warna internal yang sama sebelum menurunkan HSL, sehingga Anda dapat menempelkan bentuk apa pun yang digunakan sumber tanpa memperluas singkatan secara manual terlebih dahulu. Kapitalisasi juga dinormalkan — `#3b82f6` dan `#3B82F6` menghasilkan output HSL yang identik.
Bidang HSL memunculkan nilai dalam bentuk modern CSS Color 4: `hsl(217 91% 60%)` untuk warna opak, `hsl(217 91% 60% / 0.5)` untuk yang membawa alpha. Kedua bentuk bekerja di setiap peramban evergreen (Chrome 65+, Safari 13+, Firefox 52+). Bentuk koma warisan `hsl(217, 91%, 60%)` hanya satu replace mekanis jika target Anda membutuhkannya; sintaks modern lebih disukai di kode baru karena selaras dengan sintaks fungsional lainnya CSS Color 4.
Meskipun spoke ini menargetkan HEX → HSL secara spesifik, konverter yang mendasari yang dibagikan menahan warna kanonik sebagai triple OKLCH secara internal. Ini berarti round-trip HEX → HSL → RGB → OKLAB → HEX tanpa pergeseran float per-langkah; konverter warisan yang mengalir melalui HSL sebagai pivotnya mengakumulasi error pembulatan dan dapat menggeser rona sebesar beberapa derajat selama beberapa konversi. Pivot OKLCH menjaga setiap format lainnya tetap berlabuh secara matematis ke titik sumber yang sama.
Hex 8 digit dan 4 digit dengan alpha (`#RRGGBBAA` dan `#RGBA`) diurai dengan benar. Pasangan akhir memetakan ke float alpha 0-1: `00` → 0, `80` → 0,502, `FF` → 1. Output menggunakan sintaks slash CSS Color 4 (`hsl(217 91% 60% / 0.5)`) secara default; bentuk warisan `hsla(217, 91%, 60%, 0.5)` hanya satu replace. Berguna untuk migrasi token desain di mana nilai alpha mungkin telah terkubur di dalam kode hex 8 digit.
Hex yang sama yang Anda tempel juga menggerakkan RGB, HSV, HWB, OKLCH, OKLAB, CMYK, dan nama warna CSS terdekat — semuanya terlihat dalam sekilas di halaman yang sama. Anda tidak pernah terkunci hanya pada hex → HSL. Jika rekan tim membutuhkan triple OKLCH untuk token Tailwind v4 (di mana keseragaman perseptual lebih penting daripada L HSL yang terbelit-gamma), nama warna terdekat untuk prosa dokumentasi, atau tuple RGB untuk panggilan canvas, nilainya sudah ada di sana dengan tombol Salin masing-masing.
Lewatkan sebuah hex dan baris kontras langsung menilainya terhadap putih dan hitam menggunakan WCAG 2.1 (lantai regulasi: 4,5:1 untuk teks badan, 7:1 untuk AAA) dan APCA Lc (penerus WCAG 3 yang diusulkan: target `|Lc| ≥ 75` untuk teks badan). Berguna ketika Anda baru saja mengonversi hex brand ke HSL dan ingin memverifikasi warna yang dihasilkan (atau varian yang disesuaikan-lightness) benar-benar terbaca sebagai warna teks badan sebelum mengirimkannya.
Di bawah pemilih, bagian Salin sebagai kode mengubah warna saat ini menjadi snippet siap-tempel untuk lima platform: properti kustom CSS (`--color-brand: hsl(217 91% 60%)`), token `@theme` Tailwind v4, literal SwiftUI `Color(hue:saturation:brightness:)`, konstanta Jetpack Compose `Color.hsl(217f, 0.91f, 0.60f)`, Flutter `HSLColor.fromAHSL(...)`. Sintaks yang persis diharapkan setiap platform, siap dijatuhkan ke katalog aset iOS, file tema Android, atau `ThemeData` Flutter.
Semua parsing hex, konversi HSL, penilaian kontras, dan generasi palet berjalan secara lokal di peramban Anda. Kode hex Anda tidak pernah ditransmisikan, tidak pernah dicatat di server mana pun, tidak pernah dianalisis. Nol permintaan jaringan saat Anda mengetik — verifikasi di DevTools. Aman untuk palet brand yang belum diumumkan, token desain internal, mockup draf di bawah NDA, dan pekerjaan warna rahasia lainnya.
Warna saat ini dikodekan ke hash URL sebagai `#hex=3b82f6` secara otomatis pada setiap perubahan. Salin URL, tempel ke thread Slack atau isu GitHub, dan siapa pun yang membukanya mendarat pada hex yang sama dengan triple HSL yang sama. Hash hanya hidup di address bar Anda dan tidak pernah ditransmisikan ke server (peramban tidak menyertakan fragmen URL dalam permintaan HTTP), sehingga bahkan membagikan tautan tidak membocorkan warna ke pihak ketiga mana pun.
Hasil Google default untuk "hex to hsl" — formulir arah-tunggal dengan hex masuk, HSL keluar, tidak ada format lain yang terlihat. Berguna untuk pencarian sekali pakai saat datang dari pencarian. Kekurangan OKLCH, pemeriksaan kontras, deteksi gamut, penanganan alpha, dan tampilan bersamaan multi-format. Alat ini menang di setiap sumbu kecuali kasus konversi-tunggal yang minimalis.
Halaman SEO per-warna yang berjalan lama dengan metadata mendalam: konversi, palet, harmonies, gradien untuk hex apa pun yang Anda kueri. UI sudah ketinggalan zaman (awal 2010-an), tanpa dukungan OKLCH, tanpa kontras APCA, tanpa penanganan gamut luas. Kuat untuk penemuan SEO hex tertentu melalui Google; lebih lemah untuk alur kerja konversi aktif di mana mengetik ke dalam UX bidang-bersatu lebih cepat.
Toggle HEX/RGB/HSL ramah-pemula di halaman fokus-pengajaran, ada di mana-mana di hasil pencarian. Tanpa OKLCH, tanpa penanganan alpha di luar hsla, tanpa fitur lanjutan. Berguna sebagai referensi di samping konten penjelas W3Schools. Alat ini menang di setiap sumbu lain: lebih banyak format, matematika perseptual, fitur gamut + kontras + CVD, ekspor kode modern untuk Tailwind v4 / SwiftUI / Compose / Flutter.
DevTools Chrome, Firefox, dan Safari semuanya mengirim pemilih warna yang beralih antara HEX, RGB, dan HSL secara inline ketika Anda mengklik sampel warna di panel CSS. Gratis, tanpa instal, selalu tersedia. Kekurangan OKLCH, kekurangan URL yang dapat dibagikan, kekurangan ekspor kode untuk platform non-web (SwiftUI, Compose). Gunakan DevTools ketika Anda sudah men-debug CSS; gunakan alat ini ketika Anda membutuhkan output lintas-platform.
Pemilih HSL yang fokus dengan slider hue/saturation/lightness langsung dan output hex. UI minimalis, bagus untuk eksplorasi HSL cepat. Kekurangan OKLCH dan grid format yang lebih luas; tanpa fitur kontras atau gamut. Berguna sebagai alat khusus-HSL yang fokus; alat ini mencakup alur kerja yang sama ditambah 8 tampilan format lainnya dan pemeriksaan perseptual.
Halaman SEO per-warna yang mencakup banyak ruang (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Kekurangan dukungan OKLCH modern dan UX pengeditan bidang-bersatu. Halaman konten yang dihasilkan otomatis terasa seperti content-farm tetapi data konversinya benar. Bagus untuk menggali metadata warna individu melalui Google; alat ini lebih cepat untuk alur kerja aktif.
#3b82f6
Output HSL: `hsl(217 91% 60%)`. Alur kerja kanonik untuk sistem desain yang dibangun di atas HSL: definisikan brand sebagai `--primary: hsl(217 91% 60%)` sekali, lalu susun shade yang lebih terang dengan menyesuaikan hanya persentase L — `hsl(217 91% 70%)` untuk tint hover, `hsl(217 91% 80%)` untuk state nonaktif, `hsl(217 91% 90%)` untuk pengisian latar belakang yang halus. Rona dan saturasi tetap terkunci, sehingga keluarga warna terbaca sebagai ramp yang koheren. Stylesheet berbasis-RGB membutuhkan tiga pengeditan kanal yang terkoordinasi per langkah; HSL hanya membutuhkan satu.
#FF5733
Output HSL: `hsl(11 100% 60%)`. Desainer yang memikirkan warna dalam istilah hue + saturation + lightness (model kognitif yang diformalkan Munsell pada 1905) sering kali menginginkan triple HSL bahkan ketika file sumber-of-truth mengirim hex. Hue = 11° menempatkan ini di sisi merah dari irisan oranye; saturasi = 100% berarti kanal sepenuhnya kromatik; lightness = 60% berada satu langkah di atas titik tengah. Menempel hex Figma sekali menghasilkan HSL yang cocok, siap dijatuhkan ke pemilih mental desainer tanpa tebakan roda-warna manual.
#3b82f6
Output HSL: `hsl(217 91% 60%)`. Dengan triple HSL di tangan, menghasilkan ramp tint adalah sapuan satu dimensi: putar L ke 70% untuk `hsl(217 91% 70%)`, 80% untuk `hsl(217 91% 80%)`, 90% untuk `hsl(217 91% 90%)` untuk naik menuju putih; turun ke 50%, 40%, 30% untuk shade yang lebih gelap. Seluruh ramp 9 langkah muncul dari mengubah satu angka. Tint dan shade tetap terhubung secara tonal karena rona dan saturasi tetap konstan — trik yang digunakan sistem desain warisan sebelum OKLCH membuat ramp yang seragam secara perseptual menjadi murah.
#FF573380
Output HSL: `hsl(11 100% 60% / 0.5)`. Pasangan terakhir (`80`) didekodekan sebagai `128/255 ≈ 0.502`, dimunculkan sebagai kanal alpha melalui sintaks slash CSS Color 4. Bentuk warisan yang setara adalah `hsla(11, 100%, 60%, 0.5)`, yang telah didukung di setiap peramban sejak IE 9 dan yang diharapkan preprocessor lama. Hex 8 digit dengan alpha dirilis native di peramban evergreen pada 2018; sebelum itu, alpha harus datang melalui fungsi `hsla()` secara eksplisit.
Tabel referensi dari 10 kode hex yang paling banyak dikonversi dan ekuivalen HSL-nya — primer murni, sekunder murni, dan dua warna brand dunia nyata dari palet Tailwind.
Hitam murni. Lightness pada 0% — ketiadaan cahaya yang dipancarkan. Rona dan saturasi konvensional 0 untuk abu-abu.
#000000 → hsl(0 0% 0%) Hitam murni di layar jarang merupakan pilihan desain yang tepat — coba `hsl(0 0% 7%)` atau OKLCH lightness 0,1-0,15 untuk teks badan yang lebih lembut.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Putih murni. Lightness pada 100% — warna sRGB yang paling terang. Rona dan saturasi konvensional 0 untuk abu-abu.
#FFFFFF → hsl(0 0% 100%) Latar belakang putih murni dapat menyebabkan ketegangan mata di lingkungan gelap — coba `hsl(0 0% 98%)` atau OKLCH 0,98 untuk alternatif yang lebih hangat.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Merah murni. Rona pada 0° (posisi awal roda), saturasi sepenuhnya kromatik, lightness pada titik tengah tempat rona murni hidup.
#FF0000 → hsl(0 100% 50%) Merah murni sangat jenuh dan jarang cocok dengan palet brand — sebagian besar warna brand "merah" duduk lebih dekat ke `hsl(0 73% 50%)` (#DC2626).
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Hijau murni. Rona pada 120° (sepertiga jalan di sekitar roda), saturasi sepenuhnya kromatik, lightness pada 50%. Nama warna CSS `lime`.
#00FF00 → hsl(120 100% 50%) Kata kunci CSS `green` diselesaikan ke #008000 (hsl(120 100% 25%)), bukan #00FF00 — sumber kebingungan yang sering. Gunakan `lime` untuk hsl(120 100% 50%) murni.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Biru murni. Rona pada 240° (dua pertiga jalan di sekitar roda), saturasi sepenuhnya kromatik, lightness pada titik tengah.
#0000FF → hsl(240 100% 50%) Biru murni di latar belakang putih gagal kontras WCAG AA (3,7:1) — pertimbangkan `hsl(224 76% 48%)` (Tailwind blue-700) untuk teks badan.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Cyan. Rona pada 180° (titik tengah roda, berlawanan dengan merah), saturasi sepenuhnya kromatik, lightness pada titik tengah rona-murni. Nama warna CSS `cyan` atau `aqua`.
#00FFFF → hsl(180 100% 50%) Cyan duduk berlawanan dengan merah pada roda (180°/0°), menjadikannya pasangan harmoni komplementer alami untuk warna brand keluarga-merah mana pun.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Magenta. Rona pada 300° (lima per enam di sekitar roda), saturasi sepenuhnya kromatik, lightness pada titik tengah rona-murni. Nama warna CSS `magenta` atau `fuchsia`.
#FF00FF → hsl(300 100% 50%) Magenta duduk berlawanan dengan hijau pada roda (300°/120°), menjadikannya pasangan harmoni komplementer alami untuk warna brand keluarga-hijau mana pun.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Kuning. Rona pada 60° (seperenam di sekitar roda, antara merah dan hijau), saturasi sepenuhnya kromatik, lightness pada titik tengah rona-murni.
#FFFF00 → hsl(60 100% 50%) Kuning pada hsl(60 100% 50%) tampak jauh lebih terang daripada merah pada hsl(0 100% 50%) — contoh nyata dari non-keseragaman perseptual HSL. OKLCH menormalkan ini.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Warna brand blue-500 default Tailwind CSS — "biru web" kanonik pertengahan-2020-an. Digunakan di banyak dasbor, situs pemasaran, dan alat admin.
#3b82f6 → hsl(217 91% 60%) Tailwind v4 mendefinisikan ulang blue-500 di OKLCH (`oklch(0.629 0.193 263.4)`) untuk ramp yang seragam secara perseptual — HSL adalah fallback v3.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
rose-500 default Tailwind CSS — pink-merah dengan saturasi tinggi yang umumnya digunakan untuk tombol aksen, state peringatan, dan kontras brand.
#f43f5e → hsl(350 89% 60%) Rona rose-500 (350°) duduk tepat sebelum merah (0°/360°) pada roda — pergeseran pink sedikit yang terbaca lebih hangat daripada merah murni.
Butuh output yang seragam secara perseptual sebagai gantinya? Coba konverter hex ke OKLCH khusus — setiap langkah L tampak sama terang di seluruh rona, tidak seperti HSL.
Jatuhkan nilai hex apa pun ke input HEX — dengan atau tanpa `#` di depan, dalam singkatan 3 digit (`#F73`), bentuk lengkap 6 digit (`#3b82f6`), singkatan alpha 4 digit (`#F738`), atau bentuk lengkap alpha 8 digit (`#FF573380`). Alat menormalkan kelima bentuk input ke warna kanonik yang sama secara internal. Kapitalisasi tidak penting (`#3b82f6` dan `#3B82F6` diurai secara identik). Karakter tidak valid atau jumlah digit salah menghasilkan error inline yang tenang; hex yang valid memperbarui setiap bidang format lainnya secara waktu nyata, termasuk HSL.
Bidang HSL di bawah bidang HEX menunjukkan nilai `hsl()` yang cocok dalam sintaks dipisah-spasi modern CSS Color 4: `hsl(217 91% 60%)` untuk warna opak, `hsl(217 91% 60% / 0.5)` untuk yang membawa alpha. Hue adalah derajat integer dari 0 hingga 360; saturasi dan lightness adalah persen integer dari 0 hingga 100. Nilai-nilai dibulatkan untuk keterbacaan tampilan — source-of-truth internal OKLCH alat berarti presisi yang mendasarinya adalah float, sehingga round-trip kembali ke hex tetap stabil.
Setiap kartu format memiliki tombol Salin di sebelah kanan. Satu klik dan nilai mendarat di clipboard Anda — label tombol sebentar berkedip "Disalin!" sehingga Anda tahu. String yang disalin adalah sintaks kanonik CSS Color 4 (`hsl(217 91% 60%)`); jika target Anda membutuhkan bentuk koma warisan (`hsl(217, 91%, 60%)`), konversinya bersifat mekanis. Untuk output spesifik-platform (Tailwind v4, SwiftUI, Compose, Flutter), gunakan bagian Salin sebagai kode di bawah pemilih — snippet itu memancarkan format yang diharapkan setiap platform secara native.
Hex yang sama yang Anda tempel juga menyalakan bidang format lainnya — RGB untuk panggilan canvas dan perangkat keras, OKLCH dan OKLAB untuk sistem desain yang seragam secara perseptual, HSV dan HWB untuk alur kerja pemilih warna desainer, CMYK untuk estimasi cetak, dan nama warna CSS terdekat untuk prosa dokumentasi. Anda tidak pernah terkunci hanya pada hex → HSL. Jika Anda juga membutuhkan triple OKLCH untuk blok `@theme` Tailwind v4 (di mana lightness perseptual lebih penting daripada L HSL yang terbelit-gamma), itu sudah ada di bidang OKLCH dengan tombol Salin-nya sendiri.
Di bawah grid format adalah kotak SL + slider rona + slider alpha untuk eksplorasi visual. Kotak SL memetakan langsung ke bidang Saturation × Lightness HSL: seret secara vertikal untuk berjalan L dari 0% ke 100% sambil menyaksikan bidang HSL diperbarui secara waktu nyata. Berguna untuk menghasilkan tint atau shade secara visual sebelum mengunci persentase yang persis. Pada peramban Chromium (Chrome, Edge, Brave), tombol EyeDropper mengaktifkan `EyeDropper` API native untuk mengambil sampel piksel mana pun di layar, termasuk di luar peramban.
Hijau pada `hsl(120 100% 50%)` tampak lebih terang secara terlihat daripada biru pada `hsl(240 100% 50%)`, meskipun keduanya pada L=50%. Menghasilkan ramp tint dengan menyapu L menghasilkan hasil yang terlihat tidak rata di seluruh rona — ujung terang ramp hijau naik lebih cepat dari ramp biru. Ini adalah properti struktural HSL yang mewarisi kekhasan gamma sRGB, bukan bug di kode Anda. Untuk ramp yang seragam secara perseptual, beralih ke OKLCH.
Sapu L HSL untuk palet 9-langkah: hsl(120 100% 50%) dan hsl(240 100% 50%) pada L yang sama Terlihat berbeda secara terlihat dalam kecerahan — palet terasa tidak rata.
Sapu L OKLCH sebagai gantinya: oklch(0.7 0.2 130) dan oklch(0.7 0.2 250) Terlihat sama terang; palet terbaca koheren di seluruh rona.
Rona HSL bersifat sudut — `hsl(370 91% 60%)` diinterpretasikan sebagai `hsl(10 91% 60%)` karena 370° mod 360° = 10°. Menganimasikan rona dari 350° ke 380° membungkus dengan bersih melalui 360°/0° (irisan tipis merah), tetapi menginterpolasi secara linear dari H=350 ke H=10 dengan cara yang salah mengambil jalur *panjang* melalui cyan, hijau, kuning — 320° memutar. Gunakan `Math.min(diff, 360 - diff)` untuk memilih jalur pendek, atau gunakan interpolasi rona bawaan pustaka warna.
Interpolasi linear dari H=350 ke H=10: (350 + 10) / 2 = 180° (titik tengah cyan) Salah — berjalan jalur panjang di sekitar roda.
Interpolasi rona jalur-pendek: titik tengah = ((350 + 10 + 360) / 2) % 360 = 0° (titik tengah merah) Berjalan melalui merah, jalur pendek di sekitar roda.
HSL dan HSV berbagi sumbu rona tetapi berbeda pada sumbu ketiga mereka. Lightness HSL bersifat simetris — 0% hitam, 50% rona murni, 100% putih. Value HSV bersifat asimetris — 0% hitam, 100% rona murni, putih hanya ketika Saturation turun ke 0. `hsl(0 100% 100%)` adalah putih; `hsv(0 100% 100%)` adalah merah murni. Banyak pustaka warna dan alat desain (pemilih HSB Photoshop, panel warna Sketch) menggunakan HSV — menyalin nilai antara kedua sistem tanpa konversi menghasilkan warna yang sangat berbeda.
Tempel nilai HSV dari Photoshop ke aturan CSS hsl(): HSB Photoshop 0, 100, 100 (merah murni) CSS hsl(0 100% 100%) di-render sebagai putih — warna sepenuhnya salah.
Konversi HSV → HSL sebelum menempel ke CSS: HSV 0, 100, 100 → HSL 0, 100%, 50% CSS hsl(0 100% 50%) di-render sebagai merah murni — benar.
Sumbu S dan L HSL membutuhkan sufiks `%` di CSS — `hsl(217 91 60)` adalah error parse di setiap peramban; bentuk yang benar adalah `hsl(217 91% 60%)`. Hanya Hue yang tanpa-dimensi (unitnya adalah derajat, tetapi sufiks opsional). Banyak konverter ad-hoc lupa memancarkan tanda persen di output HSL mereka, menghasilkan CSS yang tidak valid yang gagal secara diam-diam ketika ditempel. Alat selalu memancarkan tanda persen di bidang HSL.
Pancarkan HSL tanpa tanda persen: hsl(217 91 60) Error parse CSS — setiap peramban mengabaikan seluruh aturan.
Pancarkan HSL dengan tanda persen pada S dan L: hsl(217 91% 60%) CSS valid — bekerja di setiap peramban evergreen dan IE 9+.
Alat Konversi
Konversi antara biner, hex, desimal, oktal, dan basis apa pun (2-36) secara instan. Presisi BigInt, output siap kode. Gratis, privat — tanpa pendaftaran.
Alat Konversi
Konversi HEX ke RGB, HSL, OKLCH, OKLAB, dan CMYK di peramban Anda — salin format apa pun dengan satu klik. Gratis, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Alat Konversi
Konversi warna HEX ke CMYK di peramban Anda. Aproksimasi naif berbasis sRGB untuk pratinjau cetak. Gratis, tanpa daftar, warna Anda tetap lokal.
Alat Konversi
Konversi HEX ke OKLCH untuk token desain Tailwind v4. Output seragam-perseptual langsung dengan peringatan gamut Display P3. Gratis, hanya di peramban.
Alat Konversi
Konversi kode warna HEX apa pun ke RGB di peramban Anda — HEX 3 digit, 6 digit, dan 8 digit dengan alpha semuanya didukung. Gratis, instan, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Alat Konversi
Kompres JPEG, PNG & WebP hingga 80% lebih kecil di browser, tanpa upload. Batch 20 gambar, atur kualitas, bandingkan sebelum & sesudah. Gratis & privat.