HSL‑ը նկարագրում է գույնը այնպես, ինչպես մարդիկ են բնութագրում՝ ո՞ր երանգը, որքան գունագեղ, որքան լուսավոր. HEX‑ը HSL‑ի փոխակերպելը արագ միջոց է գույնը այնպիսի ձևի բերել, որը կարելի է հանգիստ շտկել՝ բացեցնել, համանմանացնել կամ ամբողջ սանդղակ կառուցել.
Ինչպես է աշխատում HEX-ից HSL-ի փոխարկումը
- Փոխարկել HEX-ը RGB և յուրաքանչյուր ալիքը բաժանել 255‑ով, որպեսզի երեքն էլ լինի 0-ից 1-ի միջակայքում.
- Գտնել այնտեղից ամենամեծն ու ամենափոքրն ոքնքն են. նրանց միջինը վերադարձնում է լուսավորությունը L.
- Այն բախտը, որը նրանց միջև է, որոշում է սատուրացիան S‑ը. բաժանեք այն (2 − max − min)-ով լուսավոր գուների համար կամ (max + min)-ով մուգ գույների դեպքում.
- Ասկան պահող ալիքը որոշում է երանգը H‑ը — կարմիրը 0°, կանաչը 120°, կապույտը 240° — եւ մնացած երկու ալիքները տեղավորում են երանգը այդ հատվածի ներսում.
Օրինակ աշխատանքի մեջ
Մաթեմատիկան ճշգրիտ է, բայց HSL արժեքները սովորաբար կլորացվում են միավոր աստիճանների եւ տոկոսների. հետադառնալիս կարող եք հայտնվել մեկ կամ երկու RGB քայլով սկզբնականից շեղված — պրակտիկայում անտեսանելի է, բայց կարևոր է իմանալ, եթե հաճախ Ցիկլերով փոխարկում եք գույները.
HEX և HSL բացատրություն
Ի՞նչ է HEX-ը?
HEX կոդը վեց։ թվանշանանոց հեքսադեցիմալ թիվ է, որը պահում է գույնի կարմիր, կանաչ և կապույտ ալիքները՝ առաջնորդող # նշանից հետո։ Յուրաքանչյուր զույգ թվանիշը համապատասխանաբար ներկայացնում է մեկ ալիքը՝ 00 (ոչինչ)-ից մինչև FF (ամբողջը), և այն տալիս է նույն 16.7 միլիոն գույները, ինչ RGB-ը՝ ավելի սեղմ գրառմամբ։ HEX-ը որպես կարգավիճակ տարածված է CSS-ում, դիզայնի գործիքներում և բրենդային ուղեցույցներում։
- Սինտաքս:
- #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-ին.
| Գույն | 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%) |