Пренесувањето на печатна палета на веб е полесно во HSL: откако мешавината мастило е изразена како hue, saturation и lightness, можеш за секунди да направиш hover состојби, tint-ови и shade-ови.
Како работи претворањето од CMYK во HSL
- Конвертирај ги CMYK процентите во RGB канали меѓу 0 и 255.
- Подели ги каналите со 255 и земи го нивниот максимум и минимум.
- Просекот на максимумот и минимумот е lightness L, нивната разлика ја движи saturation S.
- Каналот што го држи максимумот ја одредува hue H во степени на тркалото на бои.
Пример
Чекорот CMYK во RGB веќе е апроксимација и HSL вредностите се заокружуваат на цели броеви. Резултатот е многу близок натпревар, не color-managed конверзија.
CMYK и HSL објаснети
Што е CMYK?
CMYK е моделот со четири мастила користен при печатење: cyan, magenta, yellow и key (црна), секое како процент од 0 до 100. Мастилото ја одзема светлината наместо да ја емитува, па CMYK покрива помалку бои отколку екран — затоа светлите бои од екранот често изгледаат потемни кога ќе се отпечатат.
- Синтакса:
- cmyk(C%, M%, Y%, K%)
- Опсег:
- 0–100% по мастило
- Најдобро за:
- печатење, пакување, готови за печат дизајни
Што е HSL?
HSL ја дели бојата на hue (0–360° на колорот), saturation (колку е наситена, 0–100%) и lightness (колку е светла, 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%) |