Бұл беттің негізгі айырмашылығы
Бұл бет экрандағы түсті құрайтын RGB үлгісін адамның түсті қабылдауына жақын HSL үлгісіне түрлендіреді. RGB-де бір арнаны өзгерту түстің реңін (hue) күтпеген жерден өзгерте алады. HSL-де, керісінше, ашықтықты (lightness) дербес реттеп, реңді өзгеріссіз сақтауға болады. Дәл осы қасиеті HSL-ді түс палитраларын, тақырыптық жиынтықтарды және қолжетімділік талаптарына сай контрастты вариацияларды жасау үшін таптырмас құрал етеді.
RGB мәндері – 0-ден 255-ке дейінгі шикізат интенсивтілік деңгейлері. HSL реңді 0–360° градус айналымымен, қанықтылық пен ашықтықты пайыздық мәндермен өрнектейді. Басқа түрлендіргіштерден айырмашылығы, бұл құрал тек түрлендірумен шектелмейді: ол HEX, HSV, CMYK (экрандық бағалау) және LAB сияқты басқа да кең таралған форматтарды бірден көрсетеді. Барлық түрлендірулер сіздің браузеріңізде жүреді; енгізілген ешқандай дерек жүктелмейді.
RGB: экрандағы түс қалай құрылады
RGB үлгісі аддитивті (қоспалы) түс араластыруға негізделген. Қызыл, жасыл және көк жарық шоқтары қосылған сайын, ақ түске жақындайды. Әрбір арна 0-ден 255-ке дейінгі бүтін санмен өлшенеді. 0 – жарықтың толық болмауын, 255 – максималды интенсивтілікті білдіреді. Мысалы, 79, 70, 229 индиго түсіне сәйкес келеді: қызыл мен жасыл біршама әлсіз, ал көк күшті.
Көптеген экрандар мен бағдарламалық жасақтама sRGB кеңістігін стандартты жұмыс кеңістігі ретінде пайдаланады. Осы беттегі түрлендірулер де дәл осы sRGB кеңістігіне негізделген. Түстерді енгізу кезінде үш санды үтір немесе бос орын арқылы бөліп жазу керек. Егер формат дұрыс болмаса, бет келесі хабарламаны көрсетеді: "Enter RGB as three numbers 0–255, like 79, 70, 229."
HSL: адам қабылдауына негізделген модель
HSL (Hue, Saturation, Lightness) – рең, қанықтылық және ашықтық дегенді білдіреді. Рең түс дөңгелегі бойындағы градуспен өлшенеді: 0° – қызыл, 120° – жасыл, 240° – көк. Қанықтылық (0–100%) түстің қаншалықты таза немесе сұрғылт екенін анықтайды. Ашықтық (0–100%) түстің қара (0%) немесе ақ (100%) екенін көрсетеді.
HSL-дің басты артықшылығы – ол адамның түсті қалай қабылдайтынына жақын. Адам көзі рең мен ашықтықты бөлек бағалайды. Сондықтан HSL-де ашықтықты өзгертіп, реңді сол күйінде қалдыру оңай. Мысалы, бірдей реңде бірнеше ашықтық деңгейін жасап, градиентті палитра құруға болады.
HSL-ді тікелей енгізу арқылы кері түрлендіруді де орындауға болады. Егер енгізу форматы дұрыс болмаса, бет келесі хабарламаны көрсетеді: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
Неліктен HSL палитралар мен тақырыптар үшін қолданылады
UI/UX дизайнерлері үшін HSL-дің ең маңызды артықшылығы – ашықтықты дербес реттеу мүмкіндігі. RGB-де ашықтықты өзгерту үшін үш арнаны бірдей пропорцияда өзгерту керек, бірақ бұл әрқашан реңді сақтай бермейді. HSL-де ашықтықты 10%-ға төмендету реңге әсер етпейді.
- Ашық түстер (tints) – ақ қосу арқылы ашықтықты арттыру.
- Қараңғы түстер (shades) – қара қосу арқылы ашықтықты төмендету.
- Сұрғылт түстер (tones) – қанықтылықты төмендету арқылы түсті жұмсарту.
Тема жасаушылар бренд түсінің ашық және қараңғы нұсқаларын жасау үшін HSL-ді пайдаланады. Негізгі реңді сақтай отырып, ашықтық пен қанықтылықты өзгерту жеткілікті. Бұл әдіс CSS-тің hsl() және hsla() функцияларымен жақсы үйлеседі.
Қолжетімділік тұрғысынан да HSL ыңғайлы. WCAG контраст коэффициенттерін қанағаттандыру үшін ашықтықты реттеу жеткілікті. Мәтінге қажетті контрастты алу үшін фонның ашықтығын бірнеше пайызға арттыруға болады, ал бренд түсінің көрінісі өзгермейді.
RGB-ден HSL-ге түрлендіру математикасы
Түрлендіру процесі үш негізгі қадамнан тұрады. Біріншіден, 0–255 диапазонындағы мәндер 0–1 аралығына нормаланады. Ол үшін әрбір мәнді 255-ке бөледі. Нәтижесінде R', G', B' мәндері алынады.
Екіншіден, ашықтық (L) мына формуламен есептеледі:
Cmax = max(R', G', B')Cmin = min(R', G', B')L = (Cmax + Cmin) / 2
Үшіншіден, рең (H) айырмашылыққа байланысты анықталады. Егер барлық мәндер тең болса, рең 0-ге тең. Әйтпесе, қай мәннің ең үлкен екеніне байланысты есептеу жүргізіледі. Мысалы, егер көк (B') ең үлкен болса, рең көк-жасыл аралығында болады.
Қанықтылық (S) ашықтыққа тәуелді. Егер L 0 немесе 1-ге тең болса, S 0-ге тең. Әйтпесе, мына формула қолданылады:
S = (Cmax - Cmin) / (1 - |2L - 1|)
Барлық есептеулер дөңгелектеу қателіктерін ескере отырып жүргізіледі. Кейбір қайта түрлендірулер кезінде 1-2 пайыздық айырмашылық болуы мүмкін, әсіресе CMYK немесе LAB арқылы түрлендіру кезінде.
HSL шектеулері мен балама модельдер
HSL-дің негізгі кемшілігі – ол қабылдау бойынша біркелкі (perceptually uniform) емес. Бірдей ашықтықтағы сары және көк түстер адам көзіне әртүрлі көрінеді. Сары әлдеқайда ашық, көк қараңғы болып қабылданады. Сондықтан дәл қабылдау қажет болған жағдайда LAB үлгісін қолданған дұрыс.
LAB үлгісі адам көзінің түс айырмашылығын қабылдауына негізделген. Ол L (ашықтық), a (жасыл-қызыл ось) және b (көк-сары ось) арналарынан тұрады. LAB-да есептелген айырмашылықтар адамның сезіміне жақын.
Егер сіз LAB немесе CMYK арқылы мән енгізсеңіз, ол көрінетін RGB диапазонынан тыс қалуы мүмкін. Бұл жағдайда құрал түсті ең жақын көрсетілетін түске бейімдейді. Осы түсті қайта түрлендіру кезінде шамалы өзгеріс болуы мүмкін. CMYK шығысы экрандық бағалау болып табылады және оны кәсіби басып шығаруға тікелей қолдануға болмайды.
Веб-әзірлемеде HSL-ді қолдану
CSS-те түстерді анықтаудың бірнеше жолы бар, бірақ hsl() функциясы өзінің икемділігімен ерекшеленеді. Мысалы, hsl(243, 75%, 59%) индиго түсін көрсетеді. hsla() функциясы альфа-арнаны (мөлдірлік) қосады.
JavaScript-пен динамикалық стильдерді өзгерту кезінде HSL әсіресе ыңғайлы. Келесі код түсінің ашықтығын 10%-ға арттырады:
const el = document.querySelector('.box');
const hsl = el.style.backgroundColor;
// hsl(243, 75%, 59%)
const parts = hsl.match(/\d+/g);
const newLightness = Math.min(100, parseInt(parts) + 10);
el.style.backgroundColor = `hsl(${parts}, ${parts}%, ${newLightness}%)`;
Деректер визуализациясы үшін HSL-дің ашықтық арнасы реттелген шкалаларды жасауға мүмкіндік береді. Реңді тұрақты қалдырып, ашықтықты біртіндеп арттыру арқылы адам көзі оңай қабылдайтын градиенттер алуға болады.
Алайда, егер сізге түстердің дәлдігі жоғары болуы қажет болса (мысалы, фотосуреттермен жұмыс істеу), RGB-ді қолданған дұрыс. HSL негізінен реңмен жұмыс істеуге және түс палитрасын жасауға арналған.
Жиі қойылатын сұрақтар
Мен CMYK мәнін енгіздім, неге дисплейдегі түс басқаша көрінеді?
CMYK шығысы экрандық бағалау болып табылады. Оны кәсіби басып шығаруға тікелей қолдануға болмайды. Басып шығару алдында әрқашан физикалық калибрлеуді жүргізіңіз.
Неге HSL-ден RGB-ге түрлендіру кезінде шамалы дөңгелектеу қателіктері пайда болады?
Есептеулер математикалық операцияларды қамтиды, нәтижесінде сандар дөңгелектенеді. Әдетте бұл айырмашылық 1-2 бірліктен аспайды және көп жағдайда байқалмайды.
Мен LAB мәнін енгіздім, бірақ RGB мәні өзгерді. Неге?
Енгізілген LAB мәні sRGB кеңістігінің көрінетін диапазонынан тыс болуы мүмкін. Құрал түсті ең жақын көрсетілетін түске бейімдейді. Қайта түрлендіру кезінде шамалы өзгеріс болуы мүмкін.
RGB мәнін енгізу кезінде қандай форматты қолдану керек?
Үш бүтін санды 0-ден 255-ке дейін үтір немесе бос орын арқылы бөліп жазыңыз. Мысалы, 79, 70, 229 немесе 79 70 229.
HSL-ді CSS-те қолданудың артықшылығы неде?
HSL реңді тұрақты сақтап, ашықтықты дербес өзгертуге мүмкіндік береді. Бұл бренд түстерімен жұмыс істеу, қолжетімділік талаптарын орындау және динамикалық стильдерді басқару үшін ыңғайлы.
Менің деректерім құпия ма?
Иә, барлық түрлендірулер сіздің браузеріңізде жүреді. Енгізілген ешқандай дерек серверге жіберілмейді.