HSL-ում գույն ընտրելը հարմար է, բայց ստիլշիթները, դիզայն‑հանձուդերը եւ բրենդային փաստաթղթերը դեռ աշխատում են HEX‑ով. այս փոխարկիչը ամբողջացնում է այս բացը ու տալիս է վեց նիշանի կոդը ցանկացած երանգի, սատուրացիայի եւ լուսավորության համադրության համար.
Ինչպես է աշխատում HSL-ից HEX-ի փոխարկումը
- Սատուրացիան եւ լուսավորությունը դարձրեք ֆրակցիաների. 60% դառնում է 0.6.
- Հաշվել քրոման C = (1 − |2L − 1|) × S — սա ցույց է տալիս, թե որքան հեռու է գույնը մոխրագույնից.
- Օգտագործեք երանգը՝ այդ քրոման տեղավորելու համար կարմիր, կանաչ եւ կապույտ ալիքների վրա, ապա բոլոր երեքը՛ տեղափոխեք L − C/2‑ով.
- Անապատկապատ κάθε ալիքը 255‑ով, կլորացրեք այն եւ գրեք որպես երկու հեքսադեցիմալ թվանշան.
Օրինակ աշխատանքի մեջ
Կլորացումը տեղի է ունենում վերջին քայլում, երբ յուրաքանչյուր ալիքը ամրապնդվում է ամբողջ 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 (ամբողջը), և այն տալիս է նույն 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 |