Tinatanggap ng converter na ito ang lahat ng CSS hex forms: 6-digit #3366cc, 3-digit shorthand #36c, at ang 4- at 8-digit forms na may alpha channel, may # man o wala. Ipinapakita nito ang hsl() o hsla() string, ang plain values at isang per-component breakdown - at may reverse HSL to HEX row din kapag kailangan mong gawin ang kabaligtaran. Lahat ito ay tumatakbo sa browser mo - walang upload, walang account, walang limit.
HEX HSL Converter Filipino
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
CSS
hsl(220, 60%, 50%)Paano ito nagko-convert
Hue220
Saturation60%
Lightness50%
Kabaligtaran ang kailangan? HSL to HEX
#3366ccPaano mag-convert ng HEX to HSL?
Una, basahin ang hex code bilang red, green at blue (0-255), tapos i-restate ang kulay na iyon bilang hue, saturation at lightness. Ang hue ay ang anggulo sa color wheel (0-360), ang saturation ay kung gaano ka-vivid ang kulay (0-100%) at ang lightness ay kung gaano ito kaliwanag (0-100%). Ang #3366cc ay nagiging hsl(220, 60%, 50%). Ginagawa ito ng converter na ito agad habang nagta-type ka.
Paano gamitin
- 1Ilagay ang hex code. I-type o i-paste ang hex color tulad ng #3366cc (o #36c), o pumili gamit ang color swatch. Optional ang #.
- 2Basahin ang HSL value. Ang hsl() string, ang plain values at ang live na color preview ay nag-a-update habang nagta-type ka, kasama ang per-component breakdown para sa hue, saturation at lightness.
- 3I-copy ang format na kailangan mo. I-click ang Copy sa tabi ng hsl() string o ng raw values. Kailangan mo ng kabaligtaran? Ilagay ang hue, saturation at lightness sa ibaba para makuha ulit ang hex code.
Para kanino ito
- Mga front-end developer na kumbertido ng hex code papuntang hsl() para ma-tweak ang lightness para sa hover at focus states nang hindi na kailangang pumili ng bagong kulay.
- Mga designer na gumagawa ng palette na pinapanatiling fixed ang hue habang ina-adjust ang saturation at lightness para makabuo ng mga tint at shade mula sa isang brand color.
- Mga theme at design-token author na nag-iimbak ng kulay bilang HSL dahil mas madali itong basahin at i-adjust nang manu-mano kumpara sa hex string.
- Sinumang tumutugma ng kulay sa iba't ibang tool - may gustong hex (Figma, karamihan ng CSS) at may gustong HSL (SCSS helpers, ilang color system).
FAQ
Libre ba itong HEX to HSL converter?
Oo - 100% libre, walang sign-up at walang limit. Tumatakbo ito nang buo sa browser mo.
Ina-upload ba ang mga kulay ko kahit saan?
Hindi. Ang conversion ay plain JavaScript lang na tumatakbo sa device mo - walang ipinapadala sa server, at patuloy itong gumagana kahit offline sa sandaling ma-load ang page.
Ano ba ang HSL?
Ang HSL ay para sa hue, saturation at lightness. Ang hue ay anggulo mula 0 hanggang 360 degrees sa color wheel, ang saturation ay kung gaano ka-vivid ang kulay mula 0 hanggang 100 percent, at ang lightness ay mula 0 percent (itim) papunta sa purong kulay sa 50 percent hanggang 100 percent (puti).
Paano i-convert ang hex to HSL nang manu-mano?
I-convert ang hex sa red, green at blue, tapos hatiin ang bawat isa sa 255. Kunin ang max at min sa tatlo: ang lightness ay ang average nila, ang saturation ay (max - min) hinati sa (1 - |2L - 1|), at ang hue ay nanggagaling sa kung aling channel ang max, na naka-scale sa 0-360 degrees.
May support ba ito sa 3-digit shorthand tulad ng #36c?
Oo. Sa CSS shorthand, dinodoble ang bawat digit, kaya ang #36c ay nagiging #3366cc at kumbertido sa hsl(220, 60%, 50%). Ganito rin ang 4-digit form, na ang huling digit ay alpha.
Paano nito hinahandle ang transparency (HSLA)?
Ang 8-digit hex code ay may dalang alpha sa huling pares nito. Ang byte na iyon (0-255) ay hinahati sa 255 para makuha ang 0-1 alpha na kailangan ng hsla(), na ina-round sa tatlong decimal - kaya ang #3366cc80 ay nagiging hsla(220, 60%, 50%, 0.502).
Puwede ba nitong i-convert pabalik ang HSL to HEX?
Oo. Gamitin ang HSL to HEX row sa ilalim ng resulta: ilagay ang hue (0-360) kasama ang saturation at lightness (0-100%) at ibabalik agad nito ang hex code. Ang mga value na labas sa range ay kina-clamp.
Bakit mas maganda ang HSL kumpara sa hex?
Madali itong basahin ng tao: puwede mong paliwanagin ang kulay sa pagtaas ng L, patamlayin sa pagbaba ng S, o palitan ang family nito sa pagbabago ng H - nang hindi nagha-hulaan ng hex digits. Kaya ideal ito para sa paggawa ng consistent na palette, hover states at design token.