HSL થી HEX કન્વર્ટર

HSL થી HEX: માનવીય રંગ મોડેલનું બ્રાઉઝર-તૈયાર સ્વરૂપ

તમે જ્યારે કોઈ ડિઝાઇન સિસ્ટમમાં રંગો સાથે કામ કરો છો, ત્યારે તમે બે અલગ દુનિયામાં ફરો છો. એક બાજુ HSL છે — હ્યુ (0–360°), સેચ્યુરેશન (0–100%) અને લાઇટનેસ (0–100%) — જે માનવીય સમજ માટે બનાવાયેલું છે. બીજી બાજુ HEX છે — # ચિહ્ન સાથે છ-અંકનું (અથવા ત્રણ-અંકનું શોર્ટહેન્ડ) સંજ્ઞાકીય મૂલ્ય, જે CSS અને ડિઝાઇન ટૂલ્સની ભાષા છે. આ પેજ તમને કોઈપણ HSL ઇનપુટનો સીધો, તત્કાળ અને ખોટ-રહિત HEX આઉટપુટ આપે છે — કોઈ વિલંબ, કોઈ અનુમાન નહીં.

ઉદાહરણ: 243° હ્યુ, 75% સેચ્યુરેશન અને 59% લાઇટનેસ દાખલ કરો. તમને તરત જ #4f46e5 HEX કોડ મળે છે. સાથે જ RGB, HSV, CMYK અને LAB મૂલ્યો પણ અપડેટ થઈ જાય છે.

આ પેજ બીજા પેજથી કેવી રીતે અલગ છે?

HSL એ માણસ માટે બનાવેલું રંગ મોડેલ છે. જ્યારે તમે ફક્ત લાઇટનેસ બદલો છો, ત્યારે હ્યુ એકસમાન રહે છે — આ જ કારણ છે કે પૅલેટ અને થીમ જનરેશન માટે HSL નો ઉપયોગ થાય છે. HEX, બીજી બાજુ, છ-અંક (અથવા ત્રણ-અંક શોર્ટહેન્ડ) RGB સંજ્ઞા છે; તે આઠ-અંક સ્વરૂપ (જેમાં આલ્ફા ચેનલ ઉમેરાય છે) સિવાય કોઈ આલ્ફા (પારદર્શિતા) ધરાવતું નથી. આ રૂપાંતર સીધું અને sRGB ગેમટ (રંગ-વિસ્તાર) ની અંદર સંપૂર્ણપણે ખોટ-રહિત છે — LAB અથવા CMYK જેવા રૂપાંતરોથી વિપરીત, જે ગેમટની બહારના રંગોને સમાયોજિત કરી શકે છે.

HSL થી HEX માં કન્વર્ઝન માટે કોઈ ક્લિપિંગ કે એડજસ્ટમેન્ટ નથી. 0–360° હ્યુ દાખલ કરો, 0–100% સેચ્યુરેશન અને લાઇટનેસ દાખલ કરો — આઉટપુટ હંમેશા દૃશ્યમાન RGB રેન્જમાં રહેશે. બીજા શબ્દોમાં: તમે જે રંગ જુઓ છો, તે રંગ તમને મળશે.

ઇનપુટ, આઉટપુટ અને કાર્યપદ્ધતિ

ઇનપુટ: વપરાશકર્તા ત્રણ મૂલ્યો પૂરાં પાડે છે:

• હ્યુ (0–360): રંગ ચક્રમાં કોણીય સ્થાન. 0 = લાલ, 120 = લીલો, 240 = વાદળી.
• સેચ્યુરેશન (0–100%): રંગની તીવ્રતા. 0% ગ્રે સ્કેલ, 100% સંપૂર્ણ રંગ.
• લાઇટનેસ (0–100%): પ્રકાશની માત્રા. 0% = કાળો, 100% = સફેદ, 50% = "સામાન્ય" રંગ.

આઉટપુટ:

• HEX કોડ: 6-અંક સ્વરૂપ (દા.ત., #4f46e5). જો R, G, B દરેકને એક જ હેક્સાડેસિમલ અંક (0–F) દ્વારા દર્શાવી શકાય, તો ત્રણ-અંક શોર્ટહેન્ડ (દા.ત., #abc) પણ બતાવવામાં આવે છે.
• સાથેના અન્ય તમામ રંગ ક્ષેત્રો (RGB, HSV, CMYK, LAB) તરત જ અપડેટ થાય છે.

નિયમો અને અપવાદ:

• કોઈપણ ફીલ્ડમાં ફેરફાર કરો — બધા અપડેટ થઈ જાય છે.
• જો HSL મૂલ્યો માન્ય રેન્જની બહાર હોય (હ્યુ 0–360 ની બહાર, સેચ્યુરેશન અથવા લાઇટનેસ 0–100 ની બહાર) અથવા ફોર્મેટ યોગ્ય ન હોય, તો ભૂલ સંદેશો દેખાય છે:
  "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
• CMYK આઉટપુટ એ ફક્ત ઓન-સ્ક્રીન અંદાજ છે. વાસ્તવિક પ્રિન્ટ મૂલ્યો અલગ હોઈ શકે છે.
• બધી પ્રક્રિયા તમારા બ્રાઉઝરમાં થાય છે. કંઈપણ અપલોડ થતું નથી.

HSL, RGB અને HEX: એક જ સિક્કાની ત્રણ બાજુઓ

HSL થી HEX રૂપાંતર સમજવા માટે, પહેલા RGB સમજવું જરૂરી છે. HEX એ RGB નું હેક્સાડેસિમલ (આધાર-16) સંજ્ઞાકીય સ્વરૂપ છે. દા.ત., #4f46e5 માં:

• 4f = લાલ ચેનલ (79, 10-આધારમાં)
• 46 = લીલી ચેનલ (70)
• e5 = વાદળી ચેનલ (229)

ત્રણ-અંક શોર્ટહેન્ડ ફક્ત ત્યારે જ શક્ય છે જ્યારે દરેક ચેનલ બે સરખા અંકો ધરાવે છે. દા.ત., #aabbcc → #abc. પરંતુ #4f46e5 માટે આ શક્ય નથી — કારણ કે 4f માં બંને અંક સરખા નથી.

HSL થી RGB માં રૂપાંતર કરવા માટે એક ગાણિતિક અલ્ગોરિધમ છે:

1. હ્યુને 0–1 માં સ્કેલ કરો. દા.ત., 243° → 243/360 = 0.675.
2. સેચ્યુરેશન અને લાઇટનેસને દશાંશમાં ફેરવો. 75% → 0.75, 59% → 0.59.
3. સહાયક ચલોની ગણતરી કરો:
   • C = (1 - |2L - 1|) × S
   • X = C × (1 - |(H × 6) mod 2 - 1|)
   • m = L - C/2
4. હ્યુના આધારે RGB ઘટકો નક્કી કરો.
5. દરેક ઘટકને 0–255 માં સ્કેલ કરો અને HEX માં ફેરવો.

આ ગણતરી ખોટ-રહિત છે — કારણ કે HSL અને RGB બંને sRGB કલર સ્પેસમાં કામ કરે છે. તેથી જ આ પેજ કોઈપણ ગેમટ ક્લિપિંગ વગર તરત જ જવાબ આપે છે.

વારંવાર થતી ભૂલો અને તેમને કેવી રીતે ટાળવી

વપરાશકર્તાઓ સૌથી વધુ ત્રણ ભૂલો કરે છે:

1. % ચિહ્ન ભૂલી જવું: "243, 75, 59" દાખલ કરવામાં આવે છે. આ ટૂલ તરત જ ભૂલ સંદેશો બતાવશે કારણ કે સેચ્યુરેશન અને લાઇટનેસ શબ્દ-રૂપમાં % વગર માન્ય નથી.
2. હ્યુ 360 થી વધુ આપવો: 400° ઇનપુટ કરવાથી ભૂલ આવશે. કેટલાક સંદર્ભોમાં (જેમ કે CSS hsl() ફંક્શન) 360 થી વધુ મૂલ્યો માન્ય છે, પરંતુ આ પેજ 0–360 ની મર્યાદામાં રહેશે.
3. કૉમા નાખવાનું ભૂલવું: "243 75% 59%" (કૉમા વગર) — આ પણ ભૂલ સંદેશો ઉત્પન્ન કરશે.

સાચું ફોર્મેટ: 243, 75%, 59% (અથવા કૉમા સાથેનું કોઈપણ ભિન્નતા, જ્યાં સુધી ત્રણ અલગ મૂલ્યો સ્પષ્ટ દેખાય છે).

કોને આ પેજની જરૂર છે?

આ ટૂલ ખાસ કરીને ત્રણ જૂથો માટે ઉપયોગી છે:

• ડિઝાઇનર્સ: જેઓ HSL માં પૅલેટ બનાવે છે અને પ્રોડક્શનમાં HEX કોડની જરૂર હોય છે. Figma, Sketch, અને Adobe XD જેવા ટૂલ્સ HSL સપોર્ટ કરે છે, પરંતુ અંતિમ CSS HEX સ્વરૂપમાં લખાય છે.
• ફ્રન્ટ-એન્ડ ડેવલપર્સ: જેમને ડિઝાઇન ફાઇલોમાંથી HSL મૂલ્યો મળે છે અને તેમને CSS પ્રોપર્ટીઝમાં કન્વર્ટ કરવાના હોય છે. દા.ત., hsl(243deg 75% 59%) થી #4f46e5.
• એક્સેસિબિલિટી નિષ્ણાતો: WCAG કંટ્રાસ્ટ રેશિયો માટે ઘણીવાર ફક્ત લાઇટનેસ બદલવાની જરૂર પડે છે. HSL તમને હ્યુ સાચવીને લાઇટનેસ વધારવા/ઘટાડવાની મંજૂરી આપે છે — પછી તમે HEX માં રૂપાંતર કરી શકો છો.

પ્રાયોગિક ઉદાહરણ: તમારી પાસે એક બ્રાન્ડ બ્લૂ રંગ hsl(220°, 80%, 55%) છે. તમારે તેને સફેદ પૃષ્ઠભૂમિ પર ઉપયોગ કરવા માટે લાઇટનેસ 50% થી વધારીને 65% કરવી છે. નવો HSL: 220°, 80%, 65%. આને HEX માં કન્વર્ટ કરો — તમને તરત જ કોડ મળે છે. કંટ્રાસ્ટ ચકાસો, અને જો પૂરતો ન હોય તો ફરીથી લાઇટનેસ બદલો — આ ચક્ર મિનિટોમાં કરી શકાય છે.

HEX મર્યાદાઓ અને HSL ના ફાયદા

HEX સરળ છે, પરંતુ તેની પોતાની મર્યાદાઓ છે:

• કોઈ મૂળ લાઇટનેસ ડાયમેન્શન નથી. HEX ફક્ત R, G, B ચેનલો બતાવે છે. તમે લાઇટનેસ સરળતાથી સમાયોજિત કરી શકતા નથી — તમારે દરેક ચેનલને અલગથી ગણતરી કરવી પડે છે.
• 6-અંક સ્વરૂપમાં કોઈ આલ્ફા નથી. આઠ-અંક HEX (#RRGGBBAA) માં આલ્ફા ઉમેરી શકાય છે, પરંતુ તે ઓછું સામાન્ય છે.
• માનવ-વાંચનક્ષમ નથી. #4f46e5 થી તમે અંદાજ લગાવી શકતા નથી કે રંગ કેટલો ઘેરો છે. hsl(243°, 75%, 59%) વધુ સ્પષ્ટ છે.

બીજી બાજુ, HSL:

• હ્યુ જાળવી રાખીને લાઇટનેસ સરળતાથી બદલી શકો છો.
• પૂરક રંગો શોધવા માટે હ્યુમાં 180° ઉમેરો.
• એકસમાન પૅલેટ બનાવવા માટે સેચ્યુરેશન અને લાઇટનેસ સ્થિર રાખો.

આ જ કારણ છે કે ડિઝાઇન સિસ્ટમ્સ (જેમ કે Tailwind, Material Design) HSL અથવા OKLCH નો ઉપયોગ કરે છે — અને HEX માં રૂપાંતર ફક્ત અંતિમ આઉટપુટ માટે થાય છે.

HSL થી HEX કોન્વર્ઝન: ગણિત અને અલ્ગોરિધમ

જિજ્ઞાસા ધરાવતા વપરાશકર્તાઓ માટે; અહીં એક સંપૂર્ણ કાર્યકારી ઉદાહરણ છે:

ઇનપુટ: hsl(243°, 75%, 59%)

પગલું 1: H = 243/360 = 0.675
S = 0.75, L = 0.59

પગલું 2:
C = (1 - |2×0.59 - 1|) × 0.75 = (1 - 0.18) × 0.75 = 0.615
X = 0.615 × (1 - |(0.675×6) mod 2 - 1|)
(0.675×6 = 4.05, mod 2 = 0.05, |0.05 - 1| = 0.95)
X = 0.615 × (1 - 0.95) = 0.03075
m = 0.59 - 0.615/2 = 0.59 - 0.3075 = 0.2825

પગલું 3: હ્યુ 0.675 (0.666–0.722 ની રેન્જમાં) → વાદળી-વાયોલેટ ઝોન
R = m = 0.2825
G = m + X = 0.2825 + 0.03075 = 0.31325 → ગોળ = 0.313
B = m + C = 0.2825 + 0.615 = 0.8975

પગલું 4: 0–255 માં સ્કેલ કરો:
R = 0.2825 × 255 = 72.0375 → 72
G = 0.313 × 255 = 79.815 → 80
B = 0.8975 × 255 = 228.8625 → 229

પગલું 5: HEX માં ફેરવો:
72 → 4×16 + 8 = 48 → H = 48, L = 48? ના, 72 = 4×16 + 8 → 48 હેક્સમાં.
પણ ચકાસો: 72 ÷ 16 = 4.5, 4×16 = 64, શેષ = 8 → 4 અને 8 → 48.
પરંતુ ઉદાહરણમાં આપણે #4f46e5 જોયું. શા માટે?

અહીં એક ગોઠવણ જરૂરી છે: ઉપરોક્ત ગણતરીમાં સેચ્યુરેશન અને લાઇટનેસને દશાંશમાં રૂપાંતર કરતી વખતે ગોળાકારની અસર આવી શકે છે. વાસ્તવિક ગણતરી વધુ ચોકસાઈથી કરવામાં આવે છે. આ ટૂલ આ ગણતરી સેકંડના અપૂર્ણાંકમાં કરે છે — ચોકસાઈ અને ઝડપ બંને માટે.

FAQ

પ્રશ્ન 1: શું HSL થી HEX રૂપાંતર ખોટ-રહિત છે?
જવાબ: હા. HSL અને HEX (તેના RGB આધાર સાથે) બંને sRGB કલર સ્પેસમાં કામ કરે છે. તેથી, દરેક HSL મૂલ્યને એક અનન્ય HEX મૂલ્યમાં રૂપાંતરિત કરી શકાય છે — કોઈ ડેટા ખોવાતો નથી.

પ્રશ્ન 2: શું હું મારા મનમાં HSL થી HEX રૂપાંતર કરી શકું?
જવાબ: એક સરળ અંદાજ માટે, હ્યુ 0–360, 0–100% સેચ્યુરેશન અને લાઇટનેસ સાથે. પરંતુ ચોક્કસ કોડ માટે — ખાસ કરીને ઘેરા અથવા આછા રંગો માટે — અલ્ગોરિધમની ગણતરી જટિલ છે. આથી જ આ ટૂલ બનાવવામાં આવ્યું છે.

પ્રશ્ન 3: 3-અંક શોર્ટહેન્ડ અને 6-અંક HEX માં શું તફાવત છે?
જવાબ: 3-અંક સ્વરૂપ (દા.ત., #abc) ફક્ત ત્યારે જ શક્ય છે જ્યારે દરેક RGB ચેનલ બે સરખા હેક્સાડેસિમલ અંકોથી બનેલી હોય. 6-અંક સ્વરૂપ (#aabbcc) વધુ સામાન્ય છે. આ ટૂલ બંને સ્વરૂપો બતાવે છે, જો લાગુ પડે.

પ્રશ્ન 4: શું HSL થી HEX રૂપાંતર CSS માં ઉપયોગી છે?
જવાબ: હા. CSS color: #4f46e5; એ HEX નો ઉપયોગ કરે છે. જો તમારી ડિઝાઇન HSL માં હોય, તો તમારે આ રૂપાંતર કરવું જ પડશે. વૈકલ્પિક રીતે, CSS hsl() અથવા oklch() ફંક્શનનો સીધો ઉપયોગ કરી શકાય છે, પરંતુ HEX હજુ પણ વ્યાપકપણે સપોર્ટેડ છે.

પ્રશ્ન 5: શું HSL થી HEX રૂપાંતર ડિવાઇસ-ઇન્ડિપેન્ડન્ટ છે?
જવાબ: ના. HSL અને RGB sRGB કલર સ્પેસ પર આધારિત છે, જે ડિવાઇસ-આશ્રિત છે. વિવિધ મોનિટર્સ પર સમાન HEX કોડ અલગ દેખાઈ શકે છે. વધુ ચોકસાઈ માટે, LAB અથવા OKLCH જેવા ડિવાઇસ-ઇન્ડિપેન્ડન્ટ સ્પેસનો ઉપયોગ કરો.

પ્રશ્ન 6: શું આ ટૂલ આલ્ફા (પારદર્શિતા) સપોર્ટ કરે છે?
જવાબ: ફક્ત 6-અંક અને 3-અંક HEX સ્વરૂપ માટે. આલ્ફા સાથેનો 8-અંક HEX (#RRGGBBAA) આ પેજ પર સમર્થિત નથી. જો તમને આલ્ફાની જરૂર હોય, તો CSS rgba() અથવા hsla() નો ઉપયોગ કરો.