RGB жеткіліксіз: HSL, CMYK және OKLCH түс белгілеулері

Алдыңғы мақалада, Компьютер түсті қалай жасайды: RGB, HEX және екілік сандар, түстің тек үш сан екенін — қызыл, жасыл, көк, әрқайсысы 0–255 — көрдік. Экрандар осы сандармен жақсы жұмыс жасайды. Бірақ адам түспен жұмыс жасай бастаған сәтте RGB бірден ыңғайсыз болады.

RGB ыңғайлы, бірақ интуитивті емес

«Сәл жарығырақ қызыл.» Мұны RGB-мен қалай жасаймыз? Үш арнаны бірге сәл-сәл жоғарылату керек. «Тек қанықтылықты сәл азайтқым келеді» — RGB-ні ғана қарасаңыз, нені азайту керек екенін білмейсіз. «Осы түсті қағазға дәл басып берші» — бұл RGB арқылы мүлдем мүмкін емес.

Басқа түс белгілеу жүйелері осы мәселелерді шешу үшін пайда болды.

HSL — адамша ойлау тәсілі

HSL түсті реңк · қанықтылық · жарықтық деп үшке бөліп қарайды. hsl(14, 100%, 60%) — #FF5733-пен бірдей түс, бірақ нені қайдан алғаны анық.

Компьютердің тілі RGB болса — дизайнердің тілі HSL. Бірдей түсті нені өзгергісі келетін тұрғысынан қарауға болады.

Hue — реңк 360° шеңбер

Реңк сағат тілі сияқты бір айналым жасайды. 0°-тан 360°-қа дейін. 0° мен 360° бірдей қызыл.

Saturation — қанықтылық түстің тереңдігі

Бірдей реңк болса да, қанықтылықты азайтқан сайын сұрға жақындайды.

Lightness — жарықтық қарадан аққа дейін

L 0% болса міндетті түрде қара, 100% болса міндетті түрде ақ. 50% — сол түстің «табиғи» жарықтығы.

HSL-дің нақты пайдасы — палитра жасау

Бірдей реңкті (Hue) сақтап, тек L-ді өзгертсеңіз, үйлесімді түс жиынтығы шығады. RGB-мен дәл солай жасау үшін 9 ұяшықты жеке қолмен есептеу керек, ал HSL-де L-ді 12%-дан 92%-ға кезең-кезеңімен өзгертсеңіз — болды.

Жоғарыдағы екі палитраны да бір жолмен жасауға болады.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... тек L-ді 10-нан өзгертсеңіз болды */
}

Дизайн жүйесін жасағанда HSL ең жарқырайтын жері осы.

CMYK — сияның тілі

Экран емес, қағазға түс беру үшін мүлдем басқа жүйе керек. CMYK — баспаханада қолданылатын төрт сияның үлесі.

Неліктен қараны «B» емес «K» деп атайды? Себебі B — Blue-мен шатасуы мүмкін. Және «Key plate» деген баспа терминінен шыққан — басқа сияларды туралайтын негізгі пластина деген мағынаны білдіреді.

Жарық қосылған сайын ашығырақ, сия қосылған сайын қоюырақ

RGB мен CMYK-тың ең үлкен айырмасы — араластыру тәсілі.

Қызыл сия қызыл болып көрінетін себебі — басқа жарықты сіңіріп, тек қызылды шағылыстырады. Сия жарықты азайту жұмысын атқарады. Сондықтан сияны неғұрлым араластырсаңыз, түс соғұрлым қоюырақ болады. Теория бойынша CMY үшеуін араластырса қара шығуы керек, бірақ іс жүзінде лайлы қоңыр шығады. Сондықтан нақты қара сия (K) бөлек сақталады.

CMYK қайда қолданылады

Экран дизайнымен айналыссаңыз, CMYK-ты сирек ұстасыз. Тек қағазға басылғанда ғана пайда болады.

• Баспаханаға файл тапсырғанда — визитка, плакат, кітап, орауыш. Баспахана RGB файл алса, CMYK-ке түрлендіреді.
• Photoshop / Illustrator-да баспаға арналған жұмыста — бастапқыдан түс режимін CMYK-та жасайды.
• Бренд нұсқаулығы — экранға арналған HEX пен баспаға арналған CMYK мәнін бірге жазады. Бірдей бренд түсі екі ортада ұқсас көрінуі керек.

Экран түсі мен баспа түсі неліктен әртүрлі — Gamut

Экранның білдіре алатын түс ауқымы (RGB gamut) мен сияның білдіре алатын түс ауқымы (CMYK gamut) бірдей емес. Экрандағы жарқын флуоресцентті қызғылт түсті бассаңыз, сол түс шықпайды — сия арқылы жасалмайтын түс.

Сондықтан баспа дизайнерлері жұмыс алдында тек CMYK мүмкін аймағының түстерін таңдайды. RGB-мен жасалған дизайнды тікелей бассаңыз, түс солғын шығатыны жиі кездеседі.

CMYK мәні осылай жазылады

Әр сияны неше пайыз шашатынын жазады. 0% — шашпау, 100% — толық.

Қою қара үшін тек K 100% қолдансаңыз, сұрға жақын лайлы қара шығады. Сондықтан баспаханалар терең қара жасау үшін CMY-ді де қосады.

OKLCH — адамның координаты

2020 жылдары кең тарала бастаған түс моделі. Негізгі ұғым бір ғана — «адам көзіне табиғи».

Үш координат HSL-ге ұқсас атауларға ие.

• L — Lightness (жарықтық, 0~1)
• C — Chroma (қанықтылық, 0~шамамен 0.4)
• H — Hue (реңк, 0~360°)

Бірақ HSL-дің жасырын мәселесі бар. Бірдей L = 50% болса да, түске байланысты адамның нақты сезетін жарықтығы мүлдем бөлек. Тікелей салыстырып көрейік.

Бір сөзбен — RGB мен HSL машинаның координаты. OKLCH адамның координаты.

L · C · H, әрқайсысының рөлі

Бірдей түсте тек бір координатты өзгертсек не болатынын көрейік.

Қайда қолданылады

• Бірдей жарықтықтағы палитра — 8 категория түсін бәрін бірдей жарықтықта теңестіргісі келгенде
• Қараңғы/жарық режимін автоматты түрлендіру — L мәнін кері айналдырсаңыз табиғи қараңғы тема шығады
• Қолжетімділік — мәтін мен фонның жарықтық айырмасын дәл болжауға болады
• Градиент — ортасында сұр жолақ пайда болмайтын табиғи ағым

CSS Color Level 4-тен бастап ресми қабылданды, қазіргі браузерлерде тікелей қолдануға болады.

.btn { background: oklch(67% 0.18 30); }       /* қызғылт сары */
.btn:hover { background: oklch(60% 0.18 30); } /* тек L 7-ге төмендеді → дәл сонша қоюырақ */

Нені қашан қолдану керек

Цифрлық жұмыстың көпшілігі үшін RGB/HEX жеткілікті. HSL палитра жасағанда бір рет есіңізге түссе жақсы, OKLCH қараңғы/жарық режим дизайнында өте пайдалы.

fns-те түспен жұмыс жасау

Түс сан екенін білгеннен кейін жиі қолданатын түсті саусақ ұшында ұстау — келесі қадам. fns түсті алу·сақтау·қолдану ағынын бір пернеге байлайды.

Экранның кез келген жерінен түс алатын Eyedropper — ⌘+Shift+K

Eyedropper — экрандағы кез келген пиксельдің дәл сол түсін алатын құрал. Figma/Photoshop ішінде ғана қолданылатын таңдаушыны жүйе бойынша шығарып алғанмен бірдей.

⌘+Shift+K пернесін бассаңыз, экранның кез келген жерінде fns-тің Eyedropper-і шығады. Дизайн макетінің бір пикселі, суреттің белгілі бір аймағы, басқа бағдарламаның фон түсі — тышқанды апарып бассаңыз, сол жердің түсін дәл алады.

• Басқан сайын автоматты түрде алмасу буферіне сақталады. Бөлек «көшіру» әрекеті қажет емес.
• Eyedropper виджетінде RGB / HEX / HSL / CMYK / OKLCH форматтарының қайсысында алмасу буферіне кіретінін таңдауға болады.
• Алынған түстің визуалды алдын ала қарауы мен жақын жүйелік түс те бірге көрсетіледі.

Eyedropper → автоматты алмасу буфері сақтамасы → алмасу буфері таңдаушысынан қайта алу — ағын үзілмейді. Mac-тың кірістірілген Digital Color Meter сияқты бөлек ашудың да, үнемі көшіру пернесін басудың да қажеті жоқ.

Алмасу буфері түсті автоматты анықтайды

fns-тің алмасу буфері тарихы көшірілген мәтіннің түс коды екенін автоматты түрде анықтайды. Форматқа қарамастан анықтайды.

Көшірілген түсті тарихтан қайта алғанда, тек мәтінді қарап қандай түс екенін есте ұстау қиын. fns элемент жанында кішкентай түс чипін шығарып, бір қарағанда қандай түс екені белгілі болады.

Тек түстерді жинап көру

Бір пернемен алмасу буфері тарихынан тек түс кодтарын сүзіп қарауға болады. Дизайн жұмысы кезінде жуырда қолданған түстерді ғана жинап көргісі келгенде, мәтін·URL·код арасын ақтармайды.

• Бірдей таңдаушыда color: сияқты сүзгі кілт сөзі → тек түс элементтері көрінеді
• Түс атымен іздеу — «blue», «red» іздесеңіз сол түс топтары ғана сүзіледі
• Ұқсас түстер бір-бірімен визуалды топтастырылып сұрыпталады

Бір түсті басқа форматқа

Бірдей түсті басқа белгілеу жүйесіне түрлендіріп алуға болады. Figma-дан #FF5733-ті көшіріп, CSS-ке rgb(...) түрінде қоюғысы келгенде, fns алмасу буфері таңдаушысында сол элементті таңдап, бір пернеге бассаңыз автоматты түрлендіріледі.

Figma (HSB) мен CSS (HSL/HEX/OKLCH) арасында жүргенде үнемі түрлендіргіш ашпайды.

Мәтінді кеңейту және топтастыру

Жиі қолданылатын бренд түстерін мәтін қысқартпасы ретінде тіркейді.

CSS, Figma-дың түс енгізу өрісі, Slack хабарламасы, код редакторы — кез келген жерде бірдей қысқартпа жұмыс жасайды. Бренд нұсқаулығының түсін үнемі іздеп көшіретін уақыт жойылады.

Үнемі түрлендіргіш ашып, түс кодын басқа форматқа ауыстырған уақытты fns арқылы бір рет қысқартып көріңіз.

Осы сандардың қайдан шыққанын — RGB үш арнасының негіздерін, екілік жүйені және HEX белгілеуін — білгіңіз келсе, Компьютер түсті қалай жасайды: RGB, HEX және екілік сандар мақаласынан бастаңыз.