CodeKitHubБұл құрал не істейді?
Веб-те түстер бірнеше пара-пар пішімде жазылады, олардың барлығы MDN сайтындағы CSS түс спецификациясында анықталған. HEX (#4f46e5) — CSS-те және дизайнды тапсыруда барлық жерде қолданылатын ықшам түрі. RGB (rgb(79, 70, 229)) қызыл, жасыл және көк құрамдастарды тікелей көрсетеді, бұл көбіне кодқа қажет. HSL (hsl(243, 75%, 59%)) реңкті, қанықтықты және жарықтықты сипаттайды — түсті реттеу үшін ең түсінікті пішім, мысалы оны қараңғылату немесе қанықтығын азайту.
Үшеуі де дәл бір түсті сипаттайды; бұл құрал олардың арасында дәл түрлендіреді және сіз ойлаған түс екенін растау үшін алдын ала қарауды көрсетеді.
Оны неге пайдалану керек?
- Кез келген кіріс пішімін қабылдайды — HEX (3 немесе 6 таңба), RGB немесе HSL — және барлық пішімдерді шығарады.
- Тек сандарды емес, түстің өзін көру үшін тірі алдын ала қарау үлгісі.
- Көзбен таңдауды қалайтындарға арналған көрнекі түс таңдағыш.
- Әрбір пішім үшін бір рет басу арқылы көшіру, CSS немесе кодқа дайын.
- Тегін, лезде, жүктеусіз.
Оны қалай пайдалану керек
- Түсті теріңіз немесе қойыңыз: #4f46e5, rgb(79, 70, 229) немесе hsl(243, 75%, 59%) — барлығы жұмыс істейді.
- Немесе түс таңдағышты басып, көзбен таңдаңыз.
- Нәтижелердегі үш пішімді де оқып, алдын ала қарау үлгісін тексеріңіз.
- Қажетті пішімнің қасындағы "Көшіру" түймесін басыңыз.
Мысал
Енгізу
#4f46e5Нәтиже
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Үш белгілеу, бір ғана бірдей түс.
Қай пішімді пайдалану керек?
Үшеуі де дәл бір түсті сипаттайды — таңдау дәлдікке емес, нақты тапсырма үшін қайсысымен жұмыс істеу оңайырақ екеніне байланысты.
| Пішім | Ең қолайлысы | Себебі |
|---|---|---|
| HEX (#4f46e5) | CSS, дизайнды тапсыру, жылдам көшіру-қою | Теру мен қоюға ең қысқасы; Figma сияқты дизайн құралдарында әмбебап пішім. |
| RGB (rgb(79,70,229)) | Арналарды тікелей өңдейтін код, canvas/сурет жұмысы | Графикалық API-лар мен сурет пиксель деректері түсті нақты қалай сақтайтынына сәйкес келеді. |
| HSL (hsl(243,75%,59%)) | Түсті реттеу — ашығырақ, қараңғырақ, қанықтығы көбірек/азырақ | HEX/RGB-ден айырмашылығы, жарықтық пен қанықтық — тікелей реттеуге болатын бөлек сандар, ал онда әрбір арна өзгереді. |
Жиі кездесетін қолдану жағдайлары
- Дизайн құралында түсті көзбен таңдап, оны CSS немесе кодта қажет нақты HEX не RGB мәніне түрлендіру.
- Байланысты реңктер жиынын (ашық/қараңғы нұсқалар) HSL-ге түрлендіру, жарықтықты реттеу және кері түрлендіру арқылы жасау.
- Әрқайсысы басқа пішімді күтетін түрлі құралдарда брендтің түсін сәйкестендіру — RGB-дегі логотип файлы, HEX-тегі стиль нұсқаулығы, тақырыптау үшін HSL қажет CSS айнымалысы.
- Скриншоттан немесе дизайн файлынан алынған түстің (көбіне RGB түрінде берілген) стиль кестесіндегі HEX мәніне сәйкес келетінін тексеру.
Жиі қойылатын сұрақтар
HEX немесе RGB орнына HSL-ді қашан пайдалану керек?
Түс туралы логикалық түрде ойлағыңыз келгенде. HSL-де түсті 10%-ға қараңғылату жарықтықты 10 пунктке төмендетуді білдіреді; HEX немесе RGB-де барлық арналарды қайта есептеу керек болар еді. Дизайн жүйелері көбіне палитраларды дәл осы себепті HSL-де анықтайды.
Құрал #fff сияқты 3 таңбалы HEX-ті қолдай ма?
Иә. #fff — #ffffff-тің қысқартылған түрі, әрбір таңба екі еселенеді. Екі түрі де қабылданады және шығыс толық 6 таңбалы түрді көрсетеді.
Мөлдірлік (alpha) жайлы не айтуға болады?
Бұл құрал мөлдір емес түстерді (RGB/HSL мәндерін) түрлендіреді. Мөлдірлік қажет болса, alpha мәнін өзіңіз қосыңыз: rgba(79, 70, 229, 0.5) немесе #4f46e580 — түстің өзі өзгеріссіз қалады.
Неге менің HSL мәндерім басқа құралдан 1-ге өзгеше?
Дөңгелектеу себебінен. HSL↔RGB түрлендіруі бөлшек мәндер шығарады, әрі әр құрал оларды әртүрлі дөңгелектейді. Реңктегі немесе пайыздағы ±1 айырмашылық көзге көрінбейді және қалыпты жағдай.
«red» сияқты түс атаулары қолдау көрсетіле ме?
1-фазада — жоқ, құрал әзірлеушілер ең жиі түрлендіретін үш сандық пішімге бағытталған. Түстің HEX/RGB/HSL мәнін енгізіңіз немесе оны таңдағыш арқылы көзбен таңдаңыз.
HEX, RGB немесе HSL-ді қашан пайдалану керек?
Мөлдірлік қажет болса, 8 таңбалы HEX (#RRGGBBAA) немесе rgba() пайдаланыңыз — 6 таңбалы HEX-те alpha арнасы жоқ. Бір түстің ашығырақ немесе қараңғырақ нұсқаларын алғыңыз келсе, HSL ең оңай жол: реңк пен қанықтықты өзгертпей, тек жарықтық санын өзгертіңіз. CSS немесе дизайн құралдарына қарапайым көшіру-қою үшін 6 таңбалы HEX ең әмбебап қабылданған түрі болып қала береді.