HSL мәнін RGB мәніне түрлендіргіш

HSL-ден RGB-ге түрлендірудің мәні неде?

HSL (Hue, Saturation, Lightness) — адамның түсті қабылдауына неғұрлым жақын келетін модель. Мұнда сіз реңкті (0–360 градус), қанықтылықты (0–100%) және ашықтықты (0–100%) өзгерте отырып, біртұтас түстік отбасын құра аласыз. Ал RGB (Red, Green, Blue) — бұл экранның әрбір пикселінің нақты жарық интенсивтілігін (0–255) сипаттайтын жұмыс кеңістігі. Осы екі әлемнің арасындағы көпір — дәл осы беттің қызметі.

Бұл беттің басты ерекшелігі — HSL-де ашықтықты өзгерткенде реңк бұзылмайды. Мысалы, сіз көк түстің (реңк 243°) ашықтығын 30%-дан 80%-ға дейін арттырсаңыз, RGB мәндері өзгереді, бірақ көзге көк реңк сақталады. Бұл мүмкіндік палитралар мен тақырыптар құруда өте маңызды, өйткені дизайнер бірнеше реңкпен жұмыс істеп, олардың тек ашықтығын ғана реттегісі келеді.

Түрлендіру шығынсыз жүреді: әрбір жарамды HSL мәні бір ғана RGB триплетіне сәйкес келеді. Бұл жерде LAB-тан немесе CMYK-тан RGB-ге түрлендіру кезінде жиі кездесетін «out‑of‑gamut» (гаммадан тыс) мәселесі жоқ. Яғни, RGB-ге ауысқан түс одан әрі қайта HSL-ге айналдырылса, бастапқы мәндерге дәл келеді.

HSL және RGB: адам көзі мен экран арасындағы айырмашылық

HSL моделі үш өлшемнен тұрады:

• H (Hue — реңк) — 0–360 градус аралығындағы дөңгелек. 0° — қызыл, 120° — жасыл, 240° — көк.
• S (Saturation — қанықтылық) — 0–100% аралығы. 0% — сұр түс (реңк жоғалады), 100% — толық қанық түс.
• L (Lightness — ашықтық) — 0–100% аралығы. 0% — қара түс, 100% — ақ түс, 50% — «таза» реңк.

RGB моделі үш негізгі түстің жарықтығын білдіреді:

• R (Red) — 0–255
• G (Green) — 0–255
• B (Blue) — 0–255

Мысалы, 243, 75%, 59% HSL мәні RGB-де 79, 70, 229 болады. Бұл жерде 229 — көк арнаның максималды мәніне жақын, бұл көгілдір реңкті растайды.

Дизайнер үшін HSL ыңғайлы, себебі ол түстің психологиялық қабылдануына сәйкес келеді: адам түсті алдымен реңк бойынша, содан кейін қанықтылық пен ашықтық бойынша ажыратады. Ал веб-әзірлеушіге CSS-те түсті көрсету үшін RGB немесе HEX қажет. Дәл осы бет осы екі қажеттілікті байланыстырады.

Түрлендірудің математикалық негізі

Түрлендіру стандартты алгоритм бойынша жүзеге асырылады, ол келесі қадамдардан тұрады:

1. HSL мәндерін нормалау: реңк 0–360 градустан 0–1 аралығына, ал S және L 0–100%-дан 0–1 аралығына келтіріледі.
2. L < 0.5 болса, C = S * L, әйтпесе C = S * (1 - L), мұндағы C — хрома (түстің интенсивтілігі).
3. X = C * (1 - |(H' mod 2) - 1|), мұндағы H' — реңк нормаланған мәнінің 6-ға көбейтілген нұсқасы.
4. L және C мәндерінен бастапқы ашықтықтың орнына m = L - C/2 есептеледі.
5. H' мәні бойынша (0–5) R, G, B арналарына C, X және 0 мәндері тағайындалады.
6. Әрбір арнаға m қосылып, 255-ке көбейтіледі.

Бұл алгоритм CIE 1931 XYZ түстік кеңістігіне негізделген және барлық заманауи браузерлерде бірдей жұмыс істейді. Сондықтан, егер сіз HSL мәнін енгізіп, содан кейін RGB-ді қайта HSL-ге түрлендірсеңіз, бастапқы мәндерге дәл келесіз.

Шығыс форматтар: тек RGB ғана емес

Бұл бет HSL-ді тек RGB-ге ғана емес, сонымен қатар бірқатар басқа форматтарға да түрлендіреді:

Ескерту: CMYK мәндері экранда көрсетілетін бағалау болып табылады. Нақты полиграфиялық шығарылымда қағаз түріне, сия сапасына және принтер профиліне байланысты бұл мәндерден айырмашылық болуы мүмкін. Сондықтан, маңызды баспа жобалары үшін арнайы калибрленген монитор мен профильдерді қолданған жөн.

HSV форматы HSL-ден айырмашылығы — ол ашықтық орнына «мәнді» (Value) пайдаланады. HSV-де V = 100% кезінде түс максималды жарықтыққа ие болады, ал HSL-де L = 100% ақ түске сәйкес келеді. Бұл кейбір графикалық бағдарламаларда маңызды.

Ережелер мен шектеулер

Бетте келесі ережелер сақталады:

• Дұрыс енгізу форматы: HSL мәні үш саннан тұруы керек: реңк 0–360, содан кейін екі пайыздық мән. Мысалы: 243, 75%, 59%.
• Қате енгізу кезіндегі хабарлама: Егер HSL мәні дұрыс форматта енгізілмесе, бет келесі хабарламаны көрсетеді: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.».
• Шығынсыз түрлендіру: HSL → RGB → HSL айналдыру кезінде мәндер дәл сақталады. Себебі RGB-де барлық мәндер 0–255 аралығында және HSL-ге кері түрлендіру кезінде ешқандай дөңгелектеу қателігі болмайды.
• Жергілікті өңдеу: Барлық түрлендірулер тікелей браузерде JavaScript көмегімен орындалады. Ешбір мәлімет серверге жіберілмейді. Бұл қауіпсіздік пен жылдамдықты қамтамасыз етеді.

Егер сіз HSL мәнін қате енгізсеңіз, мысалы, реңк 360-тан жоғары болса немесе пайыздық мәндердің біреуі жоқ болса, бет дереу қате туралы хабарлайды және ешқандай нәтиже көрсетпейді.

Бұл бет кімге қажет?

• Дизайнерлерге — түстік палитралар мен тақырыптарды құру кезінде. HSL-де ашықтықты өзгерткенде реңк сақталады, сондықтан веб-сайттың немесе қосымшаның біртұтас визуалды стилін жасау оңайырақ.
• Фронт-энд әзірлеушілерге — дизайн құралдарынан (мысалы, Figma, Sketch) алынған HSL мәндерін CSS-те немесе JavaScript-те қолданылатын RGB немесе HEX кодтарына ауыстыру үшін.
• Түс теориясымен жұмыс істейтіндерге — адам көзінің түсті қабылдауын түсіну және оны сандық көрсеткіштермен байланыстыру үшін.

Мысалы, сіз бір реңктің (мысалы, 210°) бірнеше ашықтық деңгейін жасағыңыз келеді: L = 20% (қою көк) → RGB: 0, 51, 102, L = 50% (орташа көк) → RGB: 0, 128, 255, L = 80% (ашық көк) → RGB: 102, 191, 255. Бұл веб-интерфейстегі батырмалар, фондар және мәтіндер үшін біртұтас түстік схеманы жылдам алуға мүмкіндік береді.

Жиі қойылатын сұрақтар

Сұрақ 1: HSL-ді RGB-ге түрлендіру кезінде ақпарат жоғала ма?

Жоқ, түрлендіру шығынсыз. Әрбір жарамды HSL мәні бір ғана RGB триплетіне сәйкес келеді. Егер сіз HSL-ден RGB-ге, содан кейін кері HSL-ге ауыстырсаңыз, бастапқы мәндерге дәл келесіз. Бұл LAB немесе CMYK-тан RGB-ге түрлендіруден айырмашылығы, мұнда гаммадан тыс түстер кездеседі.

Сұрақ 2: Неліктен CMYK мәндері экрандағы көріністен ерекшеленуі мүмкін?

CMYK — бұл полиграфиялық модель, ол сиялардың араласуына негізделген. Экран RGB-де жұмыс істейді (жарықтың қосылуы), ал басып шығару CMYK-де (сиялардың азаюы) жүзеге асады. Сондықтан, экрандағы түс қағазда дәл солай болмайды. Кәсіби басып шығару үшін мониторды калибрлеу және арнайы ICC профильдерін қолдану қажет.

Сұрақ 3: HSL-дегі 0° және 360° бірдей түс пе?

Иә, HSL моделінде реңк дөңгелек болып табылады. 0° және 360° бірдей қызыл түске сәйкес келеді. Сіз кез келген бүтін санды 0–360 аралығында пайдалана аласыз, жүйе оны дөңгелектейді.

Сұрақ 4: Егер мен HSL мәнін қате енгізсем, не болады?

Бет қате туралы хабарламаны көрсетеді: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.». Ешқандай нәтиже көрсетілмейді. Дұрыс форматты сақтаңыз: реңк (0–360), үтір, қанықтылық (пайызбен), үтір, ашықтық (пайызбен).

Сұрақ 5: Бұл бетті интернетсіз пайдалануға бола ма?

Иә, бет жергілікті өңдеуді қолданады. Бірінші рет жүктегеннен кейін, JavaScript коды браузердің кэшінде сақталады және келесі реттерде интернетсіз де жұмыс істей алады. Барлық түрлендірулер тікелей сіздің компьютеріңізде орындалады.

Сұрақ 6: HEX, RGB, HSL, HSV, CMYK, LAB — осы форматтардың әрқайсысы қандай жағдайда қолданылады?

• HEX — веб-дизайнда ең кең таралған формат (CSS-тегі # символымен бірге).
• RGB — әзірлеушілер үшін түс компоненттерін нақты көрсету үшін (мысалы, canvas API).
• HSL — дизайнерлер үшін палитралар мен градиенттерді құруда ыңғайлы.
• HSV — кейбір графикалық редакторларда (мысалы, Adobe Photoshop) түсті таңдау үшін қолданылады.
• CMYK — полиграфиялық басып шығаруға дайындық кезінде.
• LAB — түсті адам көзінің қабылдауына негізделген модель, кәсіби колористикада қолданылады.