Converter ng HSL sa RGB

Ang HSL at RGB: Dalawang Mundo, Isang Tamang Numero

Ang pahinang ito ay tumatanggap ng isang kulay na ipinahayag sa HSL—hue (0–360), saturation (porsiyento), at lightness (porsiyento)—at agad na ipinapakita ang katumbas na RGB (0–255). Ang paglipat na ito ay mahalaga dahil ang HSL ay binuo para sa paraan ng pag-iisip ng tao tungkol sa kulay, habang ang RGB ang eksaktong numerong ginagamit ng screen upang maglabas ng liwanag. Hindi ito isang simpleng calculator; ito ay isang tulay sa pagitan ng dalawang magkaibang paraan ng pag-unawa sa kulay.

Ang natatangi sa pahinang ito ay ang pagbabago ng lightness sa HSL ay nagpapanatili ng hue. Kung babaan mo ang lightness ng isang asul na kulay, mananatili itong asul—hindi ito magiging ibang kulay. Ito ang dahilan kung bakit ang HSL ang ginagamit ng mga taga-disenyo para sa pagbuo ng mga palette at tema. Sa kabilang banda, ang RGB ay ang working space para sa on-screen colour maths. Ang conversion mula HSL patungong RGB ay lossless: bawat valid na HSL value ay may isa at isa lamang na katumbas na RGB triplet na nasa loob ng display‑able range. Hindi tulad ng conversion mula LAB o CMYK patungong RGB, walang out‑of‑gamut clipping na nagaganap, kaya walang color shift kapag binabalik ang kulay.

Ang Dalawang Modelo ng Kulay

Ang HSL ay kumakatawan sa Hue, Saturation, at Lightness. Ang hue ay ang uri ng kulay, na sinusukat sa degrees (0 ay pula, 120 ay berde, 240 ay asul, at bumabalik sa 0 pagkatapos ng 360). Ang saturation ay ang kasidhian o purity ng kulay, na ipinapahayag bilang porsiyento (0% ay gray, 100% ay purong kulay). Ang lightness ay ang liwanag o dilim ng kulay, mula 0% (itim) hanggang 100% (puti). Ang modelong ito ay intuitive para sa mga tao dahil tumutugma ito sa ating natural na paraan ng paglalarawan ng kulay: "isang maliwanag na asul" o "isang madilim na pula."

Ang RGB, sa kabilang banda, ay kumakatawan sa Red, Green, at Blue. Ito ay isang additive color model: ang liwanag mula sa mga pulang, berde, at asul na subpixel ng screen ay pinagsama upang makabuo ng iba't ibang kulay. Ang bawat channel ay may value mula 0 hanggang 255. Kapag ang tatlong channel ay nasa 255, ang resulta ay puti; kapag nasa 0, itim. Ang RGB ay ang wika ng mga monitor, projector, at anumang device na naglalabas ng liwanag. Kapag nagsusulat ka ng CSS code, ang rgb(79, 70, 229) ay isang direktang utos sa screen kung gaano kalakas dapat kumikinang ang bawat subpixel.

Ang HSL ay idinisenyo para sa pag-iisip ng tao; ang RGB ay ang working space para sa on-screen colour maths. Hindi sila magkapalit, ngunit ang isa ay maaaring i-convert sa isa pa nang walang nawawalang impormasyon.

Ang Conversion na Walang Clipping

Ang conversion mula HSL patungong RGB ay hindi basta-basta "bilugan lang ang numero." Ito ay isang mathematically defined na proseso na sumusunod sa mga internasyonal na pamantayan ng color science. Una, ang HSL ay kino-convert sa isang intermediate na representasyon na tinatawag na HSV o minsan ay direktang nagbi-bypass sa isang formula na kinasasangkutan ng mga piecewise linear na function. Ang mahalagang punto: ang bawat valid na HSL value ay may eksaktong isang katumbas na RGB value.

Dahil ang HSL ay tinukoy sa loob ng color gamut ng sRGB (ang karaniwang color space ng mga monitor), walang out‑of‑gamut clipping na nagaganap. Ano ang ibig sabihin nito? Kapag nagko-convert ka mula LAB o CMYK patungong RGB, may mga kulay na maaaring nasa labas ng kakayahan ng iyong monitor na ipakita. Sa mga conversion na iyon, ang kulay ay "pinuputol" o ina-adjust upang pumasok sa gamut, na nagdudulot ng pagbabago sa kulay. Sa HSL-to-RGB, hindi ito nangyayari. Ang isang HSL value tulad ng hsl(243, 75%, 59%) ay garantisadong may eksaktong katumbas na RGB (79, 70, 229) na nasa loob ng displayable range. Ito ay isang mahalagang pagkakaiba na ginagawang mas maaasahan ang tool na ito para sa mga designer at developer.

Mga Input at Output: Ang Interface

Ang tool ay idinisenyo para sa real-time na feedback. Inilagay mo ang iyong HSL value, at agad itong nag-a-update sa lahat ng iba pang field. Narito ang format:

Input:

• HSL: hue 0–360, saturation (porsiyento), lightness (porsiyento)
• Halimbawa: 243, 75%, 59%

Outputs – lahat ay nag-a-update nang sabay:

• HEX: ang hexadecimal na bersyon ng RGB (hal. #4F46E5)
• RGB: tatlong numero 0–255 (hal. 79, 70, 229)
• HSL: ang input mismo, na nakikita para sa kumpirmasyon
• HSV: hue, saturation, value – kapaki-pakinabang para sa mga image editor
• CMYK: cyan, magenta, yellow, black – isang estimate para sa print
• LAB: isang device‑independent na color space na ginagamit sa color management

Kung ang HSL value ay na-input nang mali (halimbawa, kulang ang isang numero, o hindi porsiyento ang saturation at lightness), ang tool ay magpapakita ng sumusunod na mensahe ng error:

"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

Ito ay isang direktang gabay upang matiyak na ang iyong input ay nasa tamang format. Tandaan: lahat ng color conversion ay ginagawa nang direkta sa iyong browser. Walang anumang data na ina-upload sa server.

Mga Paggamit at Limitasyon ng Iba Pang Output

Ang tool ay hindi lamang nagbibigay ng RGB; nagbibigay din ito ng HEX, HSV, CMYK, at LAB. Narito ang konteksto para sa bawat isa:

• HEX: Ginagamit sa web development. Ang #4F46E5 ay eksaktong katumbas ng rgb(79, 70, 229). Ito ay isang shorthand na madalas gamitin sa CSS.
• HSV: Ginagamit sa mga image editor tulad ng Photoshop at GIMP. Ang value at saturation ay iba sa HSL, ngunit ang hue ay pareho.
• CMYK: Ito ay isang subtractive color model na ginagamit sa commercial printing. Mahalagang babala: Ang CMYK output na ipinapakita ng tool ay isang on‑screen estimate lamang. Maaaring magkaiba ito sa mga halagang ginagamit sa propesyonal na pag-imprenta dahil sa mga pagkakaiba sa papel, tinta, at printer profile. Huwag gamitin ang numerong ito para sa final print job nang walang pagkonsulta sa iyong printer o gamit ang isang dedicated na color profile.
• LAB: Ito ay isang color space na independyente sa device. Ginagamit ito para sa color management at kapag kailangan mong sukatin ang color difference. Ang LAB ay hindi direktang ginagamit sa web o print, ngunit mahalaga ito sa color science.

Ang pagkakaroon ng lahat ng output na ito ay ginagawang maraming gamit ang tool. Maaari kang magsimula sa isang HSL na kulay na inisip mo para sa isang theme, at makuha ang eksaktong HEX at RGB para sa iyong code, ang CMYK estimate para sa isang mock‑up, at ang LAB para sa mas advanced na gawain.

Sino ang Gumagamit Nito at Bakit

• Mga Designer na gumagawa ng color palette o tema: Kapag gumagawa ka ng isang palette, madalas kang mag-aadjust ng lightness at saturation habang pinapanatili ang hue. Ang HSL ay perpekto para dito. Kapag nasiyahan ka na sa iyong palette, kailangan mo ang RGB o HEX na katumbas para sa iyong code. Ang tool na ito ay nagbibigay ng eksaktong numerong iyon.
• Front‑end Developers na naglilipat ng kulay mula sa design tool patungong CSS: Maraming design tool (tulad ng Figma at Sketch) ang nagbibigay ng kulay sa HSL. Kapag isinusulat mo ang CSS, kailangan mo ng HEX o RGB. Sa halip na manu‑manong kalkulahin, gamitin ang tool na ito.
• Sinuman na mas gustong mag-isip tungkol sa kulay sa human‑friendly terms: Kung ikaw ay isang hobbyist o isang baguhan sa web design, ang HSL ay mas madaling maunawaan kaysa sa RGB. Maaari mong isipin ang "isang mala‑purple na asul na hindi masyadong maliwanag" at isalin iyon sa HSL, pagkatapos ay hayaan ang tool na gawin ang conversion.

Ang tool na ito ay hindi para sa pag-convert ng mga kulay para sa print (dahil ang CMYK ay estimate lamang), at hindi ito para sa color grading sa video. Ito ay para sa isang specifik na gawain: pagkuha ng isang HSL value at pagkuha ng eksaktong screen‑ready na RGB na katumbas nito.

FAQ – Mga Madalas Itanong

Bakit ko kailangan pang i-convert ang HSL sa RGB kung pwedeng HEX naman ang gamitin sa CSS?

Ang HEX ay isa lamang representasyon ng RGB. Kapag gumagawa ka ng mga palette, ang pag-adjust ng lightness at saturation sa HSL ay mas madali kaysa sa pag‑iisip ng HEX values. Kapag tapos ka na, gamitin mo ang tool upang makuha ang eksaktong HEX.

Totoo bang walang nawawala sa conversion mula HSL patungong RGB?

Oo, ang conversion ay lossless. Ang bawat valid na HSL value ay may isa at isa lamang na katumbas na RGB value na nasa loob ng sRGB gamut. Walang impormasyon ang nawawala o binabago.

Bakit iba ang CMYK na output ng tool kumpara sa aktwal na print ko?

Ang CMYK output ay isang on‑screen estimate lamang. Ang aktwal na print ay nakadepende sa maraming factor: ang uri ng papel, ang tatak ng tinta, ang printer profile, at ang kapaligiran. Gamitin ito bilang isang gabay, ngunit kumonsulta sa iyong printer para sa final values.

Maaari ba akong mag-input ng mga decimal sa hue, saturation, o lightness?

Para sa hue, oo – ang hue ay sinusukat sa degrees at maaaring magkaroon ng decimal (hal. 243.5°). Para sa saturation at lightness, ang mga ito ay porsiyento. Karaniwan na ang mga integer na porsiyento, ngunit ang ilang application ay gumagamit ng mga decimal.

Ano ang mangyayari kung mag-input ako ng saturation na higit sa 100%?

Ang saturation at lightness ay dapat nasa 0% hanggang 100%. Kung mag-input ka ng halagang nasa labas ng range, ang tool ay magpapakita ng error message na humihiling sa iyo na ilagay ang tamang format. Walang automatic na pag‑aadjust.

Gumagana ba ito offline?

Oo, dahil ang lahat ng conversion ay ginagawa sa iyong browser gamit ang JavaScript. Walang koneksyon sa internet ang kailangan para sa conversion mismo.