Տպագրական պալետը վեբ տեղափոխելը HSL-ով ավելի պարզ է. երբ մելնակի խառնուրդը արտահայտված է hue, saturation և lightness-ով, կարող ես երկու վայրկյանում սարքել hover վիճակներ, tints և shades:
Ինչպես է աշխատում CMYK-ից HSL-ի փոխարկումը
- Փոխարկիր CMYK տոկոսները RGB ալիքների՝ 0-ից 255-ի միջակայքում.
- Բաժանիր ալիքները 255-ի վրա և վերցրու նրանց առավելագույնը և նվազագույնը.
- Ամենաբարձր և ամենացածր արժեքների միջինը հանդիսանում է lightness L, նրանց տարբերությունը հանգեցնում է saturation S-ին.
- Առավելագույնը պահող ալիքը որոշում է hue-ն H-ը աստիճաններով գույնի անիվի վրա.
Օրինակ աշխատանքի մեջ
CMYK-ից RGB-ի քայլը արդեն մոտավորություն է, և HSL արժեքները փափկեցվում են ամբողջ թվերի. արդյունքը շատ մոտ համապատասխանություն է, ոչ թե գույն-կարգավորված փոխարկում.
CMYK և HSL բացատրություն
Ի՞նչ է CMYK-ը?
CMYK-ը տպագրության մեջ օգտագործվող չորս գույնի մոդելն է՝ cyan, magenta, yellow և key (սեւ), յուրաքանչյուրն համարվելով տոկոսային՝ 0-ից 100։ Սնուցիչը խլում է լույսը במקום այն արձակելու, այդ պատճառով CMYK-ը ընդգրկում է պակաս գույներ, քան էկրանն — ահա թե ինչու էկրանի պայծառ գույները տպագրությանց հետո հաճախ ավելի մթագնում են։
- Սինտաքս:
- cmyk(C%, M%, Y%, K%)
- Диապազոն:
- 0–100% յուրաքանչյուր թանաքի համար
- Լավ է համար:
- տպագրություն, փաթեթավորում, տպագրության համար պատրաստ արվեստ
Ի՞նչ է HSL-ը?
HSL-ը բաժանվում է երանգի (0–360° գույնի վհուլակ), յունիվերսի (ինչքան գունավոր, 0–100%) և լույսայնության (ինչքան լուսավոր, 0–100%)։ Քանի որ յուրաքանչյուր մասը համապատասխանում է այն ձևին, որով մարդիկ նկարագրում են գույնը, HSL-ը ամենահեշտ ֆորմատն է երանգներ, ստվերներ և համաչափ փալետներ ստեղծելու համար՝ ձեռքով կամ կոդով։
- Սինտաքս:
- hsl(H, S%, L%)
- Диապազոն:
- 0–360°, 0–100%, 0–100%
- Լավ է համար:
- փալետներ, երանգներ և ստվերներ, թեմինգ
CMYK-ից HSL-ի հղման աղյուսակ
Ամենատարածված CSS գույները, փոխարկված CMYK-ից HSL-ին.
| Գույն | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |