ImageColorPicker.com

HSL થી HEX રૂપાંતરક

કોઈપણ HSL રંગને HEX માં રૂપાંતર કરો — તરત અને મફતમાં

#3398DB

કોઈ પણ રંગ મૂલ્ય પેસ્ટ કરો — અમે ફોર્મેટ આપમેળે ઓળખીશું.

H
S
L
HEX પરિણામ

આ રંગ દરેક ફોર્મેટમાં

CMYK પ્રોફાઇલ: Coated FOGRA39 (યુરોપ માટે Photoshop નો ડિફોલ્ટ)

HSL માં રંગ પસંદ કરવું આરામદાયક છે, પરંતુ stylesheets, design handoffs અને બ્રાન્ડ દસ્તાવેજો હજુ પણ HEX પર ચાલે છે. આ કન્વર્ટર તે ગેપ બંધ કરે છે અને કોઈપણ હ્યૂ, સેચ્યુરેશન અને લાઇટનેસ સંયોજન માટે છ-અંકનો કોડ આપી દે છે.

HSL થી HEX રૂપાંતર કેવી રીતે કામ કરે છે

  1. સાચ્યુરેશન અને લાઇટનેસને ભેદરૂપે પરિવર્તિત કરો: 60% બની જાય છે 0.6.
  2. ક્રોમા ગણો C = (1 − |2L − 1|) × S — આ બતાવે છે કે રંગ ગ્રેથી કેટલો દૂર છે.
  3. હ્યૂનો ઉપયોગ કરીને તે ક્રોમાની સ્થિતિ લાલ, લીલો અને નિલા ચેનલ પર મૂકો, પછી ત્રણેયને L − C/2 દ્વારા shift કરો.
  4. દરેક ચેનલને 255 થી ગુણાકાર કરો, ગોળવો અને તેને બે હેક્સ અંકો તરીકે લખો.

કાર્યકર ઉદાહરણ

HSL hsl(204, 70%, 53%)=HEX #3398DB

રાઉન્ડિંગ એકવાર, છેલ્લા પગલામાં થાય છે, જ્યારે દરેક ચેનલને પૂર્ણ 0–255 મૂલ્ય પર ગોઠવવામાં આવે છે. પરિણામ તમારા HSL ઇનપુટની સૌથી નજીકનો HEX કોડ હોય છે, અને સામાન્ય રીતે તે ડિઝાઇન ટૂલ જે બતાવે છે તેના જેવો જ હોય છે.

HSL અને HEX ની સમજ

HSL શું છે?

HSL રંગને ત્રણ ભાગમાં વહેંચે છે: હ્યૂ (રંગચક્ર પર 0–360°), સેચ્યુરેશન (રંગ કેટલો રંગીન છે, 0–100%) અને લાઇટનેસ (કેટલો તેજસ્વી છે, 0–100%). દરેક ભાગ લોકો રંગનું વર્ણન જે રીતે કરે છે તેની સાથે મેળ ખાય છે, તેથી હાથથી કે કોડમાં ટિન્ટ, શેડ અને સુસંગત પેલેટ બનાવવા માટે HSL સૌથી સરળ ફોર્મેટ છે.

સિન્ટેક્સ:
hsl(H, S%, L%)
રેણ્ઝ:
0–360°, 0–100%, 0–100%
સૌથી યોગ્ય માટે:
પેલેટ્સ, ટીન્ટ અને શેડ્સ, થીમિંગ

HEX શું છે?

HEX કોડ એ છ અંકની હેક્સાડેસિમલ સંખ્યા છે, જેની આગળ # હોય છે, અને તે રંગની લાલ, લીલી અને વાદળી ચેનલ સંગ્રહ કરે છે. અંકોની દરેક જોડી એક ચેનલને આવરી લે છે, 00 (કંઈ નહીં) થી FF (પૂર્ણ) સુધી. આ RGB જેવા જ 16.7 મિલિયન રંગો ઘણી ટૂંકી નોટેશનમાં આપે છે. CSS, ડિઝાઇન ટૂલ્સ અને બ્રાન્ડ ગાઇડલાઇન્સમાં HEX ડિફૉલ્ટ છે.

સિન્ટેક્સ:
#RRGGBB
રેણ્ઝ:
દરેક ચેનલ માટે 00–FF
સૌથી યોગ્ય માટે:
CSS, ડિઝાઇન હેન્ડઓફ, બ્રાન્ડ ગાઇડલાઇન્સ

HSL થી HEX સંદર્ભ ટેબલ

સર્વાધિક સામાન્ય CSS રંગો, HSL થી HEX માં રૂપાંતરિત.

રંગHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

વધુ રંગ રૂપાંતરકો

બરાબર પુછાતા પ્રશ્નો

સાચ્યુરેશન અને લાઇટનેસને ભેદરૂપે પરિવર્તિત કરો: 60% બની જાય છે 0.6. ક્રોમા ગણો C = (1 − |2L − 1|) × S — આ બતાવે છે કે રંગ ગ્રેથી કેટલો દૂર છે. હ્યૂનો ઉપયોગ કરીને તે ક્રોમાની સ્થિતિ લાલ, લીલો અને નિલા ચેનલ પર મૂકો, પછી ત્રણેયને L − C/2 દ્વારા shift કરો. દરેક ચેનલને 255 થી ગુણાકાર કરો, ગોળવો અને તેને બે હેક્સ અંકો તરીકે લખો.

રાઉન્ડિંગ એકવાર, છેલ્લા પગલામાં થાય છે, જ્યારે દરેક ચેનલને પૂર્ણ 0–255 મૂલ્ય પર ગોઠવવામાં આવે છે. પરિણામ તમારા HSL ઇનપુટની સૌથી નજીકનો HEX કોડ હોય છે, અને સામાન્ય રીતે તે ડિઝાઇન ટૂલ જે બતાવે છે તેના જેવો જ હોય છે.

HEX કોડ એ છ અંકની હેક્સાડેસિમલ સંખ્યા છે, જેની આગળ # હોય છે, અને તે રંગની લાલ, લીલી અને વાદળી ચેનલ સંગ્રહ કરે છે. અંકોની દરેક જોડી એક ચેનલને આવરી લે છે, 00 (કંઈ નહીં) થી FF (પૂર્ણ) સુધી. આ RGB જેવા જ 16.7 મિલિયન રંગો ઘણી ટૂંકી નોટેશનમાં આપે છે. CSS, ડિઝાઇન ટૂલ્સ અને બ્રાન્ડ ગાઇડલાઇન્સમાં HEX ડિફૉલ્ટ છે.

હા. ઈનપુટની બાજુનો સ્વેપ બટન તમને HEX થી HSL કન્વર્ટર પર લઈ જાય છે, જે એકદમ સમાન રીતે કામ કરે છે. બંને દિશાઓ માટે તે જ સૂત્ર વપરાય છે, ફક્ત ઉલટા રીતે લાગુ પડતું હોય છે.

પેલેટ HSL માં બનાવો, પછી HEX એક્સપોર્ટ કરો. પેલેટની લોજિક જાળવાય છે — સમ હ્યૂ, લાઇટનેસના સ્ટેપ્સ — જ્યારે ડેલિવર્ડ કોડ તે ફોર્મેટમાં રહેશે જે ડેવલપરોએ અપેક્ષાય છે.