HEX-тен HSL-ге түрлендіру: түс кодтарының адамға түсінікті форматы
HEX және HSL: екі түрлі түс моделі
HEX түс коды — бұл алты он алтылық цифрдан (немесе үш цифрдан тұратын қысқартылған нұсқадан) құралған RGB мәндерінің тікелей көрінісі. Ол CSS-те және дизайн құралдарында кеңінен қолданылады, бірақ адамның түсті интуитивті түрде түсінуіне арналмаған. Мысалы, #4f46e5 коды сізге оның көкшіл реңкті екенін айтады, бірақ оны қалай өзгерту керектігі туралы ешқандай ақпарат бермейді.
HSL (Hue, Saturation, Lightness) — адамның түсті қабылдауына негізделген модель. Мұнда түс дөңгелегіндегі бұрыш (0–360°), қанықтылық пайызы (0–100%) және жеңілдік пайызы (0–100%) арқылы көрсетіледі. Егер сізге бір түстің ашығырақ нұсқасы қажет болса, жеңілдік мәнін өзгерту жеткілікті — түс реңкі өзгеріссіз қалады. Дәл осы қасиет HSL-ді түс палитраларын жасауда және тақырыптық жүйелерді жобалауда таптырмас етеді.
Бұл беттің басты ерекшелігі — сіз енгізген кез келген алты немесе үш таңбалы HEX кодты бірден HSL-ге айналдырып қана қоймай, сонымен қатар RGB, HSV, CMYK және LAB сияқты басқа да түс форматтарында көрсетеді. Барлық мәндер бір уақытта жаңартылады, сондықтан сізге қажет форматты көшіріп алуға болады.
HEX түс кодының құрылымы
HEX коды он алтылық (base-16) санау жүйесінде жазылады. Әрбір цифр 0-ден 9-ға дейінгі сандарды және A-дан F-ға дейінгі әріптерді қамтиды, мұнда A=10, B=11, C=12, D=13, E=14, F=15.
Толық алты таңбалы код үш жұптан тұрады: алғашқы екі цифр қызыл (R) компонентін, келесі екеуі жасыл (G) компонентін, соңғы екеуі көк (B) компонентін көрсетеді. Мысалы, #1E90FF кодында:
- R = 1E = 1×16 + 14 = 30
- G = 90 = 9×16 + 0 = 144
- B = FF = 15×16 + 15 = 255
Үш таңбалы қысқартылған нұсқа (#abc) әрбір цифрды қайталау арқылы кеңейтіледі: #aabbcc. Бұл әдіс тек 16³ = 4096 түсті ғана көрсете алады, ал толық алты таңбалы нұсқа 16⁶ = 16,7 миллион түсті қамтиды.
HEX коды ешқандай альфа-арнаны (мөлдірлікті) қамтымайды. Тек үш негізгі түс компоненттері ғана беріледі, сондықтан түрлендіру әрқашан мөлдір емес (толық қанық) түстермен жұмыс істейді.
Егер сіз жұмыс істеп жатқан мәтін өрісіне # белгісінсіз де кодты енгізуге болады — жүйе оны автоматты түрде таниды. Дегенмен, егер код қате болса, мысалы, бес цифрдан тұрса немесе G сияқты жарамсыз таңбаны қамтыса, бетте «#4f46e5 немесе #abc сияқты түс кодын енгізіңіз» деген қате хабары көрсетіледі.
HSL құрылымы және оның артықшылықтары
HSL үш параметрден тұрады:
Hue (түс реңкі) — түс дөңгелегіндегі бұрыш, 0–360° аралығында өлшенеді. 0° қызыл түске, 120° жасылға, 240° көкке сәйкес келеді. 360° қайтадан қызылға оралады.
Saturation (қанықтылық) — түстің қарқындылығы, 0–100% аралығында. 0% сұр түсті (түс реңкі жоғалады), 100% таза, қанық түсті білдіреді.
Lightness (жеңілдік) — түстің ашықтығы, 0–100% аралығында. 0% әрқашан қара, 100% әрқашан ақ, 50% таза түс (спектрлік түс) болып табылады.
Бұл құрылым HEX-тен айырмашылығы неде? Елестетіп көріңізші, сіздің веб-сайтыңызда негізгі түс ретінде #4f46e5 (индиго) қолданылады және оның hover күйі үшін ашығырақ нұсқасы қажет. HEX-те оны өзгерту үшін үш компонентті де бөлшектеп, әрқайсысын жеке есептеу керек. Ал HSL-де бір ғана санды — жеңілдік пайызын өзгерту жеткілікті: негізгі түс hsl(245, 76%, 58%) болса, hover үшін hsl(245, 76%, 68%) жасауға болады. Түс реңкі мен қанықтылық өзгеріссіз қалады.
Дәл осы қасиет HSL-ді веб-әзірлеушілер мен дизайнерлер үшін таптырмас етеді. CSS-те HSL мәндерін тікелей пайдалануға болады: background-color: hsl(245, 76%, 58%). Бұл әдіс арқылы динамикалық тақырыптар, градиенттер және анимациялар жасау оңайырақ.
HEX-тен HSL-ге түрлендіру әдісі
Түрлендіру процесі үш қадамнан тұрады:
-
HEX-ті RGB-ге айналдыру: Алты таңбалы кодты үш жұпқа бөліп, әр жұпты ондық санға түрлендіру керек. Мысалы,
#FF5733кодынан R=255, G=87, B=51 аламыз. -
RGB мәндерін 0–1 аралығына келтіру: Әрбір компонентті 255-ке бөлеміз: R' = 255/255 = 1, G' = 87/255 ≈ 0,341, B' = 51/255 ≈ 0,2.
-
HSL есептеу: Алдымен ең үлкен (max) және ең кіші (min) мәндерді анықтаймыз. Содан кейін:
- Жеңілдік: L = (max + min) / 2 × 100%
- Егер max = min болса, қанықтылық 0% және реңк анықталмайды (айырмашылығы жоқ).
- Қанықтылық: S = (max - min) / (1 - |2L - 1|) × 100%
- Реңк: H = 60° × [(G' - B') / (max - min) + 0] (егер max = R'), 60° × [(B' - R') / (max - min) + 2] (егер max = G'), немесе 60° × [(R' - G') / (max - min) + 4] (егер max = B').
Мысалы, #FF5733 үшін есептеулер:
- R'=1, G'=0,341, B'=0,2 → max=1, min=0,2
- L = (1 + 0,2) / 2 = 0,6 = 60%
- S = (1 - 0,2) / (1 - |2×0,6 - 1|) = 0,8 / (1 - 0,2) = 0,8 / 0,8 = 1 = 100%
- max = R' болғандықтан, H = 60 × [(0,341 - 0,2) / (1 - 0,2) + 0] = 60 × (0,141 / 0,8) ≈ 60 × 0,176 = 10,6°
Нәтиже: hsl(11°, 100%, 60%) — ашық қызғылт-сары түс.
Қолдану салалары: веб-әзірлеу және дизайн
HSL-ді практикада қолданудың бірнеше негізгі бағыты бар:
Түс палитраларын жасау: HSL көмегімен монохромды, комплементарлы, аналогты және триадалы схемаларды оңай құруға болады. Мысалы, негізгі түстен 30° немесе 60° айырмашылығы бар реңктерді алу арқылы үйлесімді палитра жасауға болады.
Қараңғы/ашық тақырыптар: CSS custom properties арқылы HSL мәндерін сақтап, тақырып ауысқанда тек жеңілдік мәнін өзгерту жеткілікті. Мысалы, --bg-color: hsl(220, 15%, 90%) ашық режимде, ал --bg-color: hsl(220, 15%, 20%) қараңғы режимде қолданылады.
Қолжетімділік тексерулері: WCAG стандарттары бойынша мәтін мен фон арасындағы контраст коэффициенті кемінде 4,5:1 болуы керек. HSL-де контрастты арттыру үшін жеңілдік мәнін өзгерту жеткілікті — түс реңкі өзгермейді, сондықтан бренд түсі сақталады.
Hover және active күйлері: Түйменің hover күйінде жеңілдікті 5–10%-ға төмендету немесе арттыру арқылы интерактивті әсерді қамтамасыз етуге болады.
Шекті жағдайлар және ескертулер
HEX-тен HSL-ге түрлендіру кезінде бірнеше маңызды ескертулер бар:
Альфа-арна жоқ: Стандартты HEX коды альфа-мөлдірлікті қамтымайды, сондықтан HSL түрлендіруі де мөлдірлікті есепке алмайды. Егер сізге мөлдір түс қажет болса, RGBA немесе HSLA форматтарын пайдалану керек.
Гамма мәселелері: Кейбір түстер, әсіресе ашық, қанық түстер, RGB (және сәйкесінше HSL) гаммасынан тыс болуы мүмкін. Егер сіз CMYK немесе LAB сияқты басқа түс кеңістігінен мән енгізсеңіз және ол көрінетін RGB диапазонынан асып кетсе, жүйе оны ең жақын көрсетілетін түске түзетеді. Бұл түсті кері HEX-ке айналдырғанда шамалы ауытқуға әкелуі мүмкін.
CMYK болжамы: Бетте көрсетілген CMYK мәндері тек экрандық бағалау болып табылады. Оларды кәсіби баспа жұмыстарында калибрлеусіз қолдануға болмайды. Нақты баспа түстері үшін арнайы баспа құрылғысын калибрлеу қажет.
Үш таңбалы код: Кейбір түстер үшін үш таңбалы код жеткіліксіз болуы мүмкін. Мысалы, #abc коды #aabbcc-ге кеңейтіледі, бірақ #ab3 сияқты кодтар толық алты таңбалы нұсқада дәл сәйкес келмеуі мүмкін (себебі 3-тің мәні 16-ға көбейтілгенде 51 болады, нақты мән 51 емес, 0x33 = 51).
Жиі қойылатын сұрақтар
HEX кодын # белгісінсіз енгізуге бола ма?
Иә, жүйе # белгісінсіз де алты немесе үш таңбалы кодты таниды. Мысалы, 4f46e5 немесе abc енгізуге болады. Бірақ код қате болса, бетте қате хабары көрсетіледі.
HSL және HSV арасындағы айырмашылық неде?
Екеуі де түс реңкін (H) градуспен өлшейді, бірақ HSV (HSB деп те аталады) «Value» (мән) параметрін пайдаланады, ал HSL «Lightness» (жеңілдік) параметрін пайдаланады. HSL-де 50% жеңілдік таза түске сәйкес келеді, ал HSV-де 100% мән ең қанық түсті білдіреді. HSL түстердің адам қабылдауына жақынырақ келеді.
HEX кодын тікелей CSS-те қолдануға бола ма?
Иә, HEX коды CSS-те тікелей қолданылады: color: #4f46e5. Бірақ HSL де тікелей қолданыла алады: color: hsl(245, 76%, 58%). Көптеген заманауи браузерлер екі форматты да толық қолдайды.
Неліктен HSL түсті өзгерту үшін ыңғайлырақ?
Себебі HSL-де әрбір параметр түстің бір ғана аспектісін басқарады. Жеңілдікті өзгерту түс реңкіне әсер етпейді, сондықтан бір түстің ашық және қараңғы нұсқаларын жасау оңай. HEX-те үш компонентті де бір уақытта өзгерту керек, бұл күрделірек.
Енгізілген деректер сақтала ма?
Жоқ, барлық түрлендірулер браузеріңізде жергілікті түрде орындалады. Ешқандай дерек серверге жіберілмейді немесе сақталмайды.
Үш таңбалы кодтың артықшылығы неде?
Үш таңбалы код түстердің шектеулі жиынтығы үшін (4096 түс) қысқа әрі ықшам жазуға мүмкіндік береді. Бірақ ол толық алты таңбалы код сияқты дәлдікті қамтамасыз ете алмайды, сондықтан күрделі дизайндарда алты таңбалы кодты қолданған дұрыс.