HSL રંગને લોકો જે રીતે વર્ણવતા હોય તે રીતે વર્ણવે: કયો હ્યૂ, કેટલો રંગીન, કેટલી તેજસ્વીતા. HEX કોડને HSL માં કન્વર્ટ કરવું ત્વરિત રસ્તો છે જેથી તમે રંગને હકીકતમાં એડજસ્ટ કરી શકો — ઉજળ બનાવો, નરમ કરો અથવા તેનીથી આખું સ્કેલ બનાવો.
HEX થી HSL રૂપાંતર કેવી રીતે કામ કરે છે
- HEX કોડને RGB માં બદલો અને દરેક ચેનલને 255 થી ભાગ કરો, જેથી ત્રણેય મૂલ્યો 0 અને 1 વચ્ચે આવી જાય.
- ત્રણ મૂલ્યોમાં સૌથી મોટું અને સૌથી નાનું શોધો. તેમનો સરેરાશ lightness L છે.
- તેમની વચ્ચેનો વિસ્તાર saturation S નક્કે કરે છે: હળવા રંગો માટે તેને (2 − max − min) થી ভাগ કરો, અને ડાર્ક રંગો માટે (max + min) થી.
- સૌથી વધારે મૂલ્ય ધરાવતી ચેનલ hue H નિર્ધારિત કરે છે — લાલ 0°, લીલો 120°, નિલો 240° — અને બાકીના બે ચેનલો તે વિભાગની અંદર હ્યુની સ્થાન બતાવે છે.
કાર્યકર ઉદાહરણ
ગણિત સચોટ છે, પરંતુ HSL મૂલ્યો સામાન્ય રીતે પૂરા ડિગ્રી અને ટકાવારીમાં ગોળવાયા આવે છે. પાછું કન્વર્ટ કરતી વખતે મૂળ RGBથી એક કે બે સ્ટેપ દૂર આવી શકે — પ્રાયોગિક રીતે અદૃશ્ય, પરંતુ વારંવાર રાઉન્ડ-ટ્રિપ કરતી વખતે જાણવું યોગ્ય છે.
HEX અને HSL ની સમજ
HEX શું છે?
HEX કોડ એક છ અંકિય હેક્સાડેસીમલ નંબર છે જે આગળના # પાછળ રેડ, ગ્રીન અને બ્લૂ ચેનલને સ્ટોર કરે છે. દરેક જોડી અંકો એક ચેનલ અટકાવે છે, 00 (કોઈ નથી) થી FF (પૂર્ણ) સુધી, જે అదే 16.7 મિલિયન રંગો આપે છે જે RGB આપે છે પણ ઓછા નોટેશનમાં. HEX એ CSS, ડિઝાઇન ટૂલ્સ અને બ્રાન્ડ ગાઇડલાઇન્સમાં ડિફૉલ્ટ છે.
- સિન્ટેક્સ:
- #RRGGBB
- રેણ્ઝ:
- પ્રতি ચેનલ 00–FF
- સૌથી યોગ્ય માટે:
- CSS, ડિઝાઇન હેન્ડઓફ, બ્રાન્ડ ગાઇડલાઇન્સ
HSL શું છે?
HSL રંગને ત્રણે ભાગમાં વહેન્ચે: hue (રંગચક્ર પર 0–360°), saturation (કિંમત કેટલી રંગીન છે, 0–100%) અને lightness (પ્રકાશ, 0–100%). દરેક ભાગ લોકો રંગને જે રીતે વર્ણવે છે તે મેળવે છે, તેથી HSL ટીન્સ, શેડ્સ અને સुसંગત પેલેટ્સ હાથે અથવા કોડમાં બનાવવાનું સરળ બનાવે છે.
- સિન્ટેક્સ:
- hsl(H, S%, L%)
- રેણ્ઝ:
- 0–360°, 0–100%, 0–100%
- સૌથી યોગ્ય માટે:
- પેલેટ્સ, ટીન્ટ અને શેડ્સ, થીમિંગ
HEX થી HSL સંદર્ભ ટેબલ
સર્વાધિક સામાન્ય CSS રંગો, HEX થી HSL માં રૂપાંતરિત.
| રંગ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |