Konverter HEX dhateng HSL

Apa iku HEX lan HSL?

HEX iku cara nulis warna nganggo sistem angka heksadesimal (basis 16). Lumrahe nganggo enem digit, kayata #1E90FF utawa telung digit #abc. Enem digit iku makili telung komponen RGB: loro digit pisanan kanggo abang (Red), loro digit sabanjure kanggo ijo (Green), lan loro digit pungkasan kanggo biru (Blue). Contone, #1E90FF tegese nilai abang 0x1E (30), ijo 0x90 (144), biru 0xFF (255). Telung digit #abc iku singkatan kanggo #aabbcc, saben digit diganda. HEX iku kompak lan populer ing CSS, desain web, lan piranti pangembang, nanging ora gampang digunakake kanggo nalar manungsa amarga sampeyan kudu ngira-ira warna saka angka mentah.

HSL (Hue, Saturation, Lightness) iku model warna liyane sing luwih cocog karo cara manungsa mikir babagan warna. Hue diukur ing derajat (0–360) ing roda warna: 0° abang, 120° ijo, 240° biru, lan 360° bali menyang abang. Saturation iku intensitas warna, diukur ing persen (0–100%): 0% abu-abu, 100% warna murni. Lightness iku padhange warna, uga ing persen: 0% ireng, 100% putih. HSL ora nganggo saluran alpha (transparansi), mung warna opaque.

Beda antarane HEX lan HSL

HEX iku notasi RGB mentah sing mung ngode nilai abang, ijo, lan biru. Yen sampeyan ndeleng #4f46e5, sampeyan kudu ngerteni manawa nilai abang 0x4f (79), ijo 0x46 (70), biru 0xe5 (229). Iku angel kanggo ngira warna katon tanpa nindakake konversi mental. Ing sisih liya, HSL langsung menehi gambaran: hue 230° iku biru-ungu, saturation 80% iku cukup kenthel, lightness 60% iku padhang nanging ora putih. Sampeyan bisa gampang nyetel lightness dadi 40% kanggo versi peteng tanpa ngowahi hue.

Alat iki mung nangani warna tanpa alpha, amarga HEX standar (enem utawa telung digit) ora ngandhut informasi transparansi. Mulane konversi tansah kanggo warna opaque (alpha = 1). Yen sampeyan nyoba konversi warna sing duwe alpha, kudu nganggo format RGBA utawa HSLA, nanging alat iki mung ngurusi HEX biasa.

Tabel perbandingan gampang:

Cara ngowahi HEX dadi HSL

Konversi ditindakake ing browser kanthi otomatis, nanging penting ngerti cara kerjane supaya sampeyan bisa ngerti asil. Proses iki ngowahi HEX dadi RGB dhisik, banjur RGB dadi HSL. Conto: #1E90FF.

1. HEX → RGB: Pecah dadi R=0x1E (desimal 30), G=0x90 (144), B=0xFF (255). Banjur normalisasi dadi angka pecahan 0–1: R'=30/255≈0.1176, G'=144/255≈0.5647, B'=1.0.
2. Temokake maksimum lan minimum: Maks = 1.0 (biru), Min = 0.1176 (abang). Beda = 1.0 - 0.1176 = 0.8824.
3. Hitung Lightness (L): L = (Maks + Min)/2 = (1.0 + 0.1176)/2 = 0.5588 (≈55.88%).
4. Hitung Saturation (S): Yen Maks = Min, S = 0. Yen ora, lan L ≤ 0.5, S = Beda/(Maks+Min). Yen L > 0.5, S = Beda/(2 - Maks - Min). Ing kene L=0.5588>0.5, dadi S = 0.8824/(2 - 1.0 - 0.1176) = 0.8824/0.8824 = 1.0 (100%).
5. Hitung Hue (H): Yen Maks = R, H = (G-B)/Beda mod 6. Yen Maks = G, H = 2 + (B-R)/Beda. Yen Maks = B, H = 4 + (R-G)/Beda. Ing kene Maks = B (1.0), dadi H = 4 + (0.1176-0.5647)/0.8824 = 4 + (-0.4471)/0.8824 = 4 - 0.5067 = 3.4933. Banjur H dikonversi menyang derajat: H = 3.4933 * 60 = 209.6°.

Asil: HSL(209.6°, 100%, 55.88%) sing kira-kira hsl(210deg, 100%, 56%). Iku warna biru langit sing padhang, cocok karo #1E90FF.

Kaluwihan nggunakake HSL tinimbang HEX

HSL ndadekake gampang kanggo nggawe variasi warna. Sampeyan bisa njaga hue padha, mung ngowahi lightness kanggo versi peteng utawa terang, utawa ngowahi saturation kanggo warna pastel. Web developer asring nggunakake HSL ing CSS custom properties. Contone:

:root {
  --primary-hue: 230;
  --primary-saturation: 80%;
  --primary-lightness: 60%;
}
.btn {
  background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
}
.btn:hover {
  background: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 10%));
}

Iku ngidini tema dinamis tanpa ngganti kode saben warna. Kanggo aksesibilitas, sampeyan bisa nambah kontras kanthi ngowahi lightness tanpa ngowahi hue, supaya brand tetep konsisten. Alat iki migunani nalika sampeyan duwe warna HEX saka mockup lan pengin ngowahi dadi HSL supaya bisa digunakake ing sistem tema.

Kagunaan liyane:

• Palet warna: Gampang nggawe skema komplementer (hue + 180°), analog (hue ± 30°), utawa monochromatic (hue padha, lightness beda).
• UX design: Ngeset warna tombol aktif/pasif kanthi beda lightness.
• Format lintas: Alat iki uga nuduhake warna ing RGB, HSV, CMYK, LAB, dadi sampeyan bisa nyalin format liyane yen perlu.

Babagan sing kudu digatekake

Alat iki bisa nampa HEX telung digit utawa enem digit, kanthi utawa tanpa #. Yen input ora bener (kayata #xyz utawa #12345), bakal nuduhake kesalahan: "Enter a hex color like #4f46e5 or #abc." Sing paling penting, yen sampeyan ngetik warna ing format liya (kayata HSL utawa CMYK) banjur bali menyang HEX, bisa ana owah-owahan cilik amarga pembulatan utawa panyetelan gamut. Iku amarga sawetara warna HSL ora bisa diwakili persis ing RGB (kayata warna sing jenuh banget), mula alat kasebut nyetel menyang warna sing paling cedhak. CMYK ing kene iku perkiraan layar, aja digunakake kanggo cetak profesional tanpa kalibrasi.

Kabeh konversi ditindakake ing sisi klien, ora ana data sing dikirim menyang server. Mula sampeyan ora perlu kuwatir babagan privasi.

Sapa sing perlu nggunakake alat iki?

Alat iki migunani kanggo:

• Front-end developer sing nyambung karo CSS lan pengin ngowahi HEX saka desain mockup dadi HSL supaya gampang nyetel hover, active, utawa tema.
• UI/UX designer sing pengin nggawe palet warna kanthi nalar hue, saturation, lightness.
• Sapa wae sing nggawe tema kanggo aplikasi web, contone nggawe mode peteng/terang.
• Auditor aksesibilitas sing kudu mriksa kontras rasio, amarga HSL luwih gampang dideleng tinimbang HEX.

Pitakonan sing Sering Ditakokake (FAQ)

1. Apa bedane HSL karo HSV?
HSL lan HSV loro-lorone duwe hue, nanging Lightness vs Value beda. Lightness ing HSL iku rata-rata antarane ireng lan putih, dene Value ing HSV iku maksimum nilai RGB. HSL luwih linear kanggo persepsi manungsa, mula luwih disenengi kanggo desain.

2. Apa hex 3 digit bisa diowahi?
Ya, #abc dianggep #aabbcc. Alat iki nampa kanthi utawa tanpa #. Contone #abc bakal diowahi dadi hue ±180°, saturation 100%, lightness 80% (gumantung warna).

3. YEN aku ngetik warna HSL sing ora ana ing gamut, apa sing kelakon?
Warna kasebut bakal disetel menyang warna sing paling cedhak sing bisa ditampilake ing layar (RGB gamut). Mula nalika bali menyang HEX bisa beda tipis, contone HSL(300°, 100%, 50%) iku magenta, nanging yen diterjemahake menyang RGB bisa rada beda yen kena clipping.

4. Apa alat iki nyimpen warna sing diketik?
Ora. Kabeh konversi ditindakake ing browser, ora ana data sing dikirim menyang server. Mula privasi sampeyan aman.

5. Apa CMYK ing alat iki akurat kanggo cetak?
Iku perkiraan on-screen, ora digawe kanggo cetak profesional tanpa kalibrasi. Yen sampeyan butuh cetak, gunakake alat Khusus CMYK sing dikalibrasi.

6. Kenapa asil konversi ora persis nalika diowahi maneh?
Amarga pembulatan angka desimal lan panyetelan gamut. Contone, RGB(30,144,255) diowahi dadi HSL(209.6°, 100%, 55.88%), nanging yen diowahi maneh, bisa dadi RGB(30,144,254) amarga presisi. Iku normal lan ora mengaruhi tampilan visual sacara signifikan.