ImageColorPicker.com

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

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

#2ECC71

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

HSL પરિણામ
હ્યૂ
145°
સેચ્યુરેશન
63%
લાઇટનેસ
49%

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

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

HSL રંગને લોકો જે રીતે વર્ણવતા હોય તે રીતે વર્ણવે: કયો હ્યૂ, કેટલો રંગીન, કેટલી તેજસ્વીતા. HEX કોડને HSL માં કન્વર્ટ કરવું ત્વરિત રસ્તો છે જેથી તમે રંગને હકીકતમાં એડજસ્ટ કરી શકો — ઉજળ બનાવો, નરમ કરો અથવા તેનીથી આખું સ્કેલ બનાવો.

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

  1. HEX કોડને RGB માં બદલો અને દરેક ચેનલને 255 થી ભાગ કરો, જેથી ત્રણેય મૂલ્યો 0 અને 1 વચ્ચે આવી જાય.
  2. ત્રણ મૂલ્યોમાં સૌથી મોટું અને સૌથી નાનું શોધો. તેમનો સરેરાશ lightness L છે.
  3. તેમની વચ્ચેનો તફાવત સેચ્યુરેશન S નક્કી કરે છે: હળવા રંગો માટે તેને (2 − max − min) વડે ભાગો, અને ઘેરા રંગો માટે (max + min) વડે.
  4. સૌથી વધારે મૂલ્ય ધરાવતી ચેનલ hue H નિર્ધારિત કરે છે — લાલ 0°, લીલો 120°, નિલો 240° — અને બાકીના બે ચેનલો તે વિભાગની અંદર હ્યુની સ્થાન બતાવે છે.

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

HEX #2ECC71=HSL hsl(145, 63%, 49%)

ગણિત સચોટ છે, પરંતુ HSL મૂલ્યો સામાન્ય રીતે પૂરા ડિગ્રી અને ટકાવારીમાં ગોળવાયા આવે છે. પાછું કન્વર્ટ કરતી વખતે મૂળ RGBથી એક કે બે સ્ટેપ દૂર આવી શકે — પ્રાયોગિક રીતે અદૃશ્ય, પરંતુ વારંવાર રાઉન્ડ-ટ્રિપ કરતી વખતે જાણવું યોગ્ય છે.

HEX અને HSL ની સમજ

HEX શું છે?

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

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

HSL શું છે?

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

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

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

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

રંગHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

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

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

HEX કોડને RGB માં બદલો અને દરેક ચેનલને 255 થી ભાગ કરો, જેથી ત્રણેય મૂલ્યો 0 અને 1 વચ્ચે આવી જાય. ત્રણ મૂલ્યોમાં સૌથી મોટું અને સૌથી નાનું શોધો. તેમનો સરેરાશ lightness L છે. તેમની વચ્ચેનો તફાવત સેચ્યુરેશન S નક્કી કરે છે: હળવા રંગો માટે તેને (2 − max − min) વડે ભાગો, અને ઘેરા રંગો માટે (max + min) વડે. સૌથી વધારે મૂલ્ય ધરાવતી ચેનલ hue H નિર્ધારિત કરે છે — લાલ 0°, લીલો 120°, નિલો 240° — અને બાકીના બે ચેનલો તે વિભાગની અંદર હ્યુની સ્થાન બતાવે છે.

ગણિત સચોટ છે, પરંતુ HSL મૂલ્યો સામાન્ય રીતે પૂરા ડિગ્રી અને ટકાવારીમાં ગોળવાયા આવે છે. પાછું કન્વર્ટ કરતી વખતે મૂળ RGBથી એક કે બે સ્ટેપ દૂર આવી શકે — પ્રાયોગિક રીતે અદૃશ્ય, પરંતુ વારંવાર રાઉન્ડ-ટ્રિપ કરતી વખતે જાણવું યોગ્ય છે.

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

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

જ્યારે તમને રંગની વેરિયેશન્સ જોઈએ ત્યારે તરત જ HSL પર સ્વિચ કરો. H અને S કાયમ રાખીને ફક્ત L ફેરવવાથી સતત ટિન્ટ અને શેડ સ્કેલ મળે છે, જે HEX માં હેન્ડથી કરવું ઘણું મુશ્કેલ છે.