HSL-ден HEX-ке түрлендіру: Түс моделінің дәл аудармасы
HSL түс моделі адамның түсті қабылдауына барынша жақындатылған формат болып табылады. Бұл бет HSL мәндерін (реңк дәрежесі 0–360, қанықтылық пайызы және жарықтық пайызы) тікелей HEX түс кодына аударады. HSL-дің басты ерекшелігі – жарықтықты өзгерту арқылы реңкті сақтай отырып, түс палитрасын жасауға мүмкіндік беруі. HEX форматы, керісінше, алты таңбалы (немесе үш таңбалы қысқартылған) RGB белгілеу жүйесі болып табылады. HSL-ден HEX-ке түрлендіру sRGB гаммасында толық жоғалтусыз жүзеге асырылады, бұл LAB немесе CMYK сияқты басқа түрлендірулерден ерекшеленеді.
HSL түс моделінің құрылымы
HSL (Hue, Saturation, Lightness) түс моделі үш негізгі параметрден тұрады. Реңк (Hue) дәрежелік шкаламен өлшенеді: 0° – қызыл, 120° – жасыл, 240° – көк. Қанықтылық (Saturation) 0% (сұр реңк) мен 100% (толық қаныққан түс) аралығында өзгереді. Жарықтық (Lightness) 0% (толық қара) мен 100% (толық ақ) арасындағы мәндерді қабылдайды. 50% жарықтық таза түстің стандартты көрінісін береді.
Бұл модельдің адамның көз қабылдауына бейімделгендігі сонша, дизайнерлер жиі тема генерациясы мен колір палитраларын жасауда HSL-ді қолданады. Мысалы, реңкті өзгертпей жарықтықты жоғарылату арқылы ашық, пастелді түстер алуға болады. Бұл WCAG контрасттылық талаптарын қанағаттандыру үшін де тиімді – тек жарықтық мәнін өзгерту арқылы мәтіннің оқылу мүмкіндігін арттыруға болады.
HEX кодының структурасы мен ерекшеліктері
HEX түс коды алты таңбалы он алтылық сандардан тұрады: #RRGGBB форматы, мұндағы әрбір жұп қызыл, жасыл және көк каналдардың 0-255 аралығындағы интенсивтілігін көрсетеді. Мысалы, #1E90FF коды: қызыл 30 (0x1E), жасыл 144 (0x90), көк 255 (0xFF). Егер әрбір каналды бір он алтылық санмен көрсетуге болатын болса (мысалы, #aabbcc), үш таңбалы қысқартылған форма #abc түрінде қолданылады.
HEX кодында үлкен әріптер мен кіші әріптердің айырмашылығы жоқ – #4f46e5 және #4F46E5 бірдей түсті береді. Бірақ алты таңбалы форматта альфа мөлдірлік параметрі болмайды, сондықтан мөлдір түстер үшін сегіз таңбалы #RRGGBBAA форматы қолданылады.
HSL-ден RGB-ге, содан кейін HEX-ке түрлендіру математикасы
Түрлендіру процесі екі кезеңнен тұрады: алдымен HSL RGB түс моделіне ауыстырылады, содан кейін RGB мәндері HEX кодына түрлендіріледі.
1-кезең: HSL-ден RGB-ге.
Мысал ретінде 243°, 75%, 59% түсін алайық. Алдымен S (0,75) және L (0,59) мәндері есептеледі:
- Егер L < 0,5 болса: S2 = S * L / (L + (1 - L)) = S * L / (1 - |2L - 1|)
- Біздің жағдайда L=0,59 > 0,5, сондықтан S2 = (1 - |20,59 - 1|) * 0,75 / (1 - |20,59 - 1|) = 0,75
Содан кейін уақытша RGB мәндері есептеледі:
- tempR = H/360 + 1/3 = 243/360 + 120/360 = 1,0083 (1-ден асқандықтан 1 шегеріледі: 0,0083)
- tempG = H/360 = 0,675
- tempB = H/360 - 1/3 = 0,3417
Әрбір уақытша мән үшін түс есептеледі:
- Егер temp × 6 < 1: R = S2 * (temp × 6) + (1 - S2) = 0,75 * 0,05 + 0,25 = 0,2875
- Егер temp × 6 < 2: R = S2 * (1 - (temp - 1/6) × 6) + (1 - S2) (tempG үшін: 0,675 × 6 = 4,05, сондықтан G = 0,75 × (1 - (0,675 - 0,1667) × 6) + 0,25 = 0,23)
- Толық есептеулерден кейін RGB мәндері: R=0,31, G=0,27, B=0,90
2-кезең: RGB-ден HEX-ке. Әрбір канал 0-255 диапазонына келтіріледі: R=79, G=69, B=230. Содан кейін он алтылық жүйеге аударылады:
- 79 = 4F (4×16 + 15)
- 69 = 45
- 230 = E6
Нәтиже: #4f46e5.
Шектеулер мен жиі кездесетін қателер
HSL-ден HEX-ке түрлендіру кезінде бірнеше маңызды шектеулер мен жиі жіберілетін қателер бар:
-
Мәндердің диапазоннан тыс болуы. Егер реңк 0–360 аралығынан асып кетсе, немесе қанықтылық/жарықтық 0–100% аралығынан тыс болса, бет «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%» деген қате хабарламасын көрсетеді.
-
Пайыздық белгінің жоқтығы. Көптеген пайдаланушылар «75» орнына «75%» деп жазу керектігін ұмытады. Қате форматы автоматты түрде түзетілмейді.
-
Ондық бөлшектер. Кейбір жағдайларда реңк үшін ондық мәндерді енгізуге болады, бірақ бұл шектеулі дәлдікте жоғалтуға әкелуі мүмкін.
-
CMYK мәндерінің шамамен көрсетілуі. Бетте CMYK мәндері де көрсетіледі, бірақ олар кәсіби баспа стандарттарына сәйкес келмеуі мүмкін. Бұл тек бағдарлау үшін ғана.
Практикалық қолдану жағдайлары
-
Дизайнерлер үшін: Figma немесе Sketch-те HSL түс палитрасын жасап, содан кейін CSS-те пайдалану үшін HEX кодтарын алу. Мысалы, акцент түсін анықтау үшін реңкті таңдап, содан кейін түрлі жарықтық деңгейлеріндегі нұсқаларын жасау.
-
Фронт-әзірлеушілер үшін: Дизайн файлдарынан HSL мәндерін алып, оларды тікелей CSS
color: #4f46e5;сияқты қасиеттерде пайдалану. HSL сандарын CSS-теhsl(243, 75%, 59%)түрінде де жазуға болады, бірақ браузер үйлесімділігі үшін кейде HEX қажет. -
Колір контрасттылығын тексеру: WCAG 2.1 стандарты бойынша мәтіндер үшін 4.5:1 қатынасын қамтамасыз ету керек. HSL-де жарықтықты арттыру арқылы контрастты тез реттеуге болады.
Браузердегі өңдеу ерекшеліктері
Барлық түрлендірулер тікелей пайдаланушының браузерінде жүзеге асырылады. Ешқандай деректер серверге жіберілмейді, бұл жеке дизайн жобаларының құпиялылығын сақтауға көмектеседі. HSL мәндерін өзгерткен сайын HEX коды, RGB, HSV, CMYK және LAB сияқты барлық басқа колір форматтары бірден жаңартылады.
Жиі қойылатын сұрақтар
HSL-дегі 0° реңк неге қызыл болып саналады?
Бұл келісім бойынша қабылданған стандарт. Түс дөңгелегінде 0° қызыл реңкке, 120° жасылға, 240° көкке сәйкес келеді. Бұл RGB түс моделінің негізгі түстерімен байланысты.
Үш таңбалы HEX кодын қашан қолдануға болады?
Егер әрбір RGB каналын бір он алтылық санмен көрсетуге болатын болса (мысалы, #aabbcc → #abc). Бұл ықшамдау дизайнда файл көлемін азайтады, бірақ түс дәлдігін жоғалтуы мүмкін.
HSL-ден HEX-ке түрлендіру кезінде колір гаммасынан тыс түстер пайда бола ма?
Жоқ, HSL sRGB гаммасымен шектелген. Барлық HSL мәндері (реңк 0–360, қанықтылық 0–100%, жарықтық 0–100%) толығымен sRGB диапазонында болады.
Неліктен CMYK мәндері кәсіби баспадан ерекшеленеді?
Бұл беттегі CMYK мәндері шамамен есептелген. Нақты баспа үшін ICC профильдері мен баспа жабдығына сәйкес калибрлеу қажет. HSL-ден CMYK-ке түрлендіру кезінде гаммадан тыс түстерді түзету қажет болуы мүмкін.
HSL-дің альфа мөлдірлік параметрі бар ма?
HSL стандартты түрде альфа мәнін қамтымайды. Егер мөлдірлік қажет болса, HSLA (Lightness-тен кейін альфа) форматын немесе сегіз таңбалы HEX кодын (#RRGGBBAA) пайдалану керек.
HSL мәндерін дұрыс енгізбегенімде не болады?
Бет автоматты түрде қате туралы хабарлама көрсетеді: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.» Мәндерді дәл осы форматта енгізу маңызды – пайыздық белгілерді қамтитын екі сан және бір бүтін сан.