Басма палитрасын вебке алып келүү HSLде жеңилирээк: сия аралашмасы hue, saturation жана lightnessке чыгарылгандан кийин, сен анда hover абалдары, tint жана shadeтарды секунддар ичинде куруп аласың.
CMYK дан HSL га кантип айландыруу иштейт
- CMYK пайыздарын 0дан 255ке чейинки RGB каналдарына котор.
- Каналдарды 255ке бөлүп, алардын максимумун жана минимумун ал.
- Максимум менен минимумдун орточосу lightness L болуп саналат, алардын айырмасы saturation Sти аныктайт.
- Максимумду кармаган канал түстөр доорусундагы H hueду даражалар менен аныктайт.
Иштеген мисал
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%) |