HSL માં રંગ પસંદ કરવું આરામદાયક છે, પરંતુ stylesheets, design handoffs અને બ્રાન્ડ દસ્તાવેજો હજુ પણ HEX પર ચાલે છે. આ કન્વર્ટર તે ગેપ બંધ કરે છે અને કોઈપણ હ્યૂ, સેચ્યુરેશન અને લાઇટનેસ સંયોજન માટે છ-અંકનો કોડ આપી દે છે.
HSL થી HEX રૂપાંતર કેવી રીતે કામ કરે છે
- સાચ્યુરેશન અને લાઇટનેસને ભેદરૂપે પરિવર્તિત કરો: 60% બની જાય છે 0.6.
- ક્રોમા ગણો C = (1 − |2L − 1|) × S — આ બતાવે છે કે રંગ ગ્રેથી કેટલો દૂર છે.
- હ્યૂનો ઉપયોગ કરીને તે ક્રોમાની સ્થિતિ લાલ, લીલો અને નિલા ચેનલ પર મૂકો, પછી ત્રણેયને L − C/2 દ્વારા shift કરો.
- દરેક ચેનલને 255 થી ગુણાકાર કરો, ગોળવો અને તેને બે હેક્સ અંકો તરીકે લખો.
કાર્યકર ઉદાહરણ
ગોળવણી એકદમ છેલ્લੇ પગલામાં થાય છે, જ્યારે દરેક ચેનલને સમગ્ર 0–255 મૂલ્ય પર સ્નેપ કરવવામાં આવે છે. પરિણામあなたの HSL ઈનપુટનો naj નજીકનો HEX કોડ હોય છે અને સામાન્ય રીતે ડિઝાઇન ટૂલ જે બતાવે છે તે સમાન હોય છે.
HSL અને HEX ની સમજ
HSL શું છે?
HSL રંગને ત્રણે ભાગમાં વહેન્ચે: hue (રંગચક્ર પર 0–360°), saturation (કિંમત કેટલી રંગીન છે, 0–100%) અને lightness (પ્રકાશ, 0–100%). દરેક ભાગ લોકો રંગને જે રીતે વર્ણવે છે તે મેળવે છે, તેથી HSL ટીન્સ, શેડ્સ અને સुसંગત પેલેટ્સ હાથે અથવા કોડમાં બનાવવાનું સરળ બનાવે છે.
- સિન્ટેક્સ:
- hsl(H, S%, L%)
- રેણ્ઝ:
- 0–360°, 0–100%, 0–100%
- સૌથી યોગ્ય માટે:
- પેલેટ્સ, ટીન્ટ અને શેડ્સ, થીમિંગ
HEX શું છે?
HEX કોડ એક છ અંકિય હેક્સાડેસીમલ નંબર છે જે આગળના # પાછળ રેડ, ગ્રીન અને બ્લૂ ચેનલને સ્ટોર કરે છે. દરેક જોડી અંકો એક ચેનલ અટકાવે છે, 00 (કોઈ નથી) થી FF (પૂર્ણ) સુધી, જે అదే 16.7 મિલિયન રંગો આપે છે જે RGB આપે છે પણ ઓછા નોટેશનમાં. HEX એ CSS, ડિઝાઇન ટૂલ્સ અને બ્રાન્ડ ગાઇડલાઇન્સમાં ડિફૉલ્ટ છે.
- સિન્ટેક્સ:
- #RRGGBB
- રેણ્ઝ:
- પ્રতি ચેનલ 00–FF
- સૌથી યોગ્ય માટે:
- CSS, ડિઝાઇન હેન્ડઓફ, બ્રાન્ડ ગાઇડલાઇન્સ
HSL થી HEX સંદર્ભ ટેબલ
સર્વાધિક સામાન્ય CSS રંગો, HSL થી HEX માં રૂપાંતરિત.
| રંગ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |