Бұл бет не істейді?
Бұл бетке сурет жүктеп, оның кез келген пикселінің түсін анықтауға болады. Суретті басу арқылы таңдаған пиксельдің он алтылық (HEX) коды, RGB және HSL мәндері бірден көрсетіледі. Барлық мәндерді бір рет басу арқылы алмасу буферіне көшіруге болады, содан кейін оларды CSS, Figma, Photoshop немесе кез келген басқа жобада қолдануға болады. Суреттің үстімен жылжыған кезде үлкейтілген көрініс пиксельді дәл таңдауға көмектеседі, ал басқан сайын түс тарихқа сақталады (ең көбі 12 жазба). Беттің негізгі мақсаты — веб-дизайн мен бағдарламалауда кеңінен қолданылатын алты таңбалы он алтылық түс кодын жылдам әрі дәл алу.
Басқа беттерден айырмашылығы
Сайтта RGB, HSL және HEX түс модельдеріне арналған жеке беттер бар. Бұл беттің басты ерекшелігі — ол алты таңбалы (немесе қысқартылған үш таңбалы) он алтылық кодты негізгі нәтиже ретінде көрсетеді. CSS-те color: #1E90FF; сияқты жазу үшін қосымша жақшалар немесе синтаксис қажет емес — бұл ең ықшам әрі веб-стандарт формат.
Айта кететін жайт: алты таңбалы HEX коды альфа-арнаны қамтымайды. Егер суреттегі пиксель жартылай мөлдір болса, оның мөлдірлік деңгейі бөлек пайызбен көрсетіледі: «Альфа ‹n›% — бұл пиксель жартылай мөлдір». Бұл — басқа беттерден айырмашылығы, себебі ол жерде RGB немесе HSL мәндері альфа-арнамен бірге берілуі мүмкін. HEX-те мұндай мүмкіндік жоқ, сондықтан мөлдірлік бөлек есептеледі.
Осы бет — веб-дизайнерлер мен әзірлеушілерге тікелей CSS қасиеттерінде қолдануға болатын түс кодын алудың ең жылдам жолы.
Қолдау көрсетілетін файл пішімдері мен шектеулер
Келесі сурет пішімдеріне рұқсат етіледі: PNG, JPG, WebP, GIF, AVIF, HEIC. Қабылданатын MIME түрлері: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Егер пайдаланушы қолдау көрсетілмейтін файлды жүктеуге тырысса, келесі хабарлама шығады: «Бұл файл түріне қолдау көрсетілмейді. PNG, JPG, WebP, GIF, AVIF немесе HEIC суреттерін қолданып көріңіз».
Сурет ашылмаса (мысалы, бүлінген немесе танылмайтын пішімде), хабарлама: «Бұл суретті ашу мүмкін болмады. Ол бүлінген немесе қолдау көрсетілмейтін пішімде болуы мүмкін».
Маңызды шектеу — суреттің ең ұзын жағы 4096 пиксельден аспауы керек. Егер асса, суреттің өлшемі осы шекке дейін автоматты түрде кішірейтіледі. Бұл браузердің өнімділігін сақтау және беттің дұрыс жұмыс істеуі үшін қажет.
Түсті іріктеу әдістері: тышқан және пернетақта
Сурет жүктелгеннен кейін оның дәл ортасындағы пиксельдің түс мәндері мен координаттары бірден көрсетіледі. Тінтуірді суреттің үстімен жылжытқанда курсордың астындағы пиксельдің түсі үздіксіз жаңартылып тұрады. Кішкентай үлкейткіш аймақ дәл пиксельді таңдауға көмектеседі, әсіресе антиалиасинг немесе сурет қысымынан біркелкі емес аймақтарда.
Бір пиксельді басу арқылы оның түсі тарихқа сақталады. Бұл кезде экранда «‹HEX› түсі сақталды» деген хабарлама пайда болады.
Пернетақта арқылы да толық басқаруға болады:
- Жоғары/төмен/солға/оңға көрсеткілері — крестті бір пиксельге жылжытады.
- Shift + көрсеткі — крестті 10 пиксельге жылжытады.
- Enter немесе Бос орын — ағымдағы пиксельді сақтайды.
Бұл әдіс әсіресе дәлдік қажет болғанда, мысалы, суреттің кішкентай бөлшегіндегі түсті алу үшін өте ыңғайлы.
Түс мәндерін көрсету және көшіру
Таңдалған пиксель үшін үш түрлі түс моделі көрсетіледі:
| Модель | Мысал |
|---|---|
| HEX | #1E90FF |
| RGB | rgb(30, 144, 255) |
| HSL | hsl(210, 100%, 56%) |
Егер пиксель жартылай мөлдір болса, төменде қосымша жол пайда болады: «Альфа ‹n›% — бұл пиксель жартылай мөлдір». Бұл суреттің өзінде сақталған нақты альфа мәні, фоннан тыс ештеңе ескерілмейді.
Үш мәннің кез келгенін (HEX, RGB, HSL) бір рет басу арқылы алмасу буферіне көшіруге болады. Егер браузер алмасу буферіне кіруге рұқсат бермесе, хабарлама шығады: «Көшіру мүмкін болмады — браузеріңіз алмасу буферіне кіруді бұғаттады».
Сақталған түстер тарихы сурет астында орналасады. Әрбір түс тікбұрышты дақ ретінде көрсетіледі. Тарихта ең көбі 12 жазба сақталады. Түстері бірдей, бірақ альфа мәндері әртүрлі пикселдер бөлек жазба ретінде сақталады — яғни бір RGB мәні екі рет көрінуі мүмкін, егер біреуі мөлдір болса. Тарихтағы кез келген дақты басу арқылы сол түстің мәндерін қайта көруге болады.
Практикалық қолдану және ескертулер
Бұл беттің негізгі пайдаланушылары:
- Дизайнерлер — эталондық суреттерден дәл пиксель түстерін алып, интерфейс дизайнында қолдану.
- Веб-әзірлеушілер — макеттегі түсті CSS-ке дәл көшіру (мысалы,
#1E90FF). - Контент жасаушылар — брендинг, суреттер немесе әлеуметтік желі графикасы үшін түстерді іріктеу.
Маңызды ескертулер:
-
JPEG қысымы мен антиалиасинг — JPEG суреттері шығынды қысу әдісін қолданады, сондықтан көршілес пикселдердің мәндері бір-бірінен аздап ерекшеленуі мүмкін. Скриншоттарда да біркелкі аймақтарда бірнеше реңктер болуы ықтимал. Сондықтан үлкейткіш көмегімен дәл пиксельді таңдау өте маңызды.
-
Мөлдірлік (альфа-арна) — PNG сияқты пішімдер альфа-арнаны қолдайды. Бірақ суреттегі мөлдір пиксельдің түсі әдетте фонмен араласпаған күйде сақталады. Бұл бет сол түстің өзін тура көрсетеді, фонның әсерін есепке алмайды.
-
Суретті масштабтау — егер суреттің кез келген жағы 4096 пиксельден асса, ол автоматты түрде кішірейтіледі. Бұл масштабтау кезінде пикселдердің орташалануы мүмкін, сондықтан ұсақ бөлшектер жоғалуы ықтимал.
-
Тарихты тазалау — «Қайта бастау» түймесі суретті, түс тарихын және барлық көрсетілген мәндерді толығымен тазартады, бет бастапқы күйіне оралады.
Жиі қойылатын сұрақтар
1. Неліктен алты таңбалы HEX кодында мөлдірлік көрсетілмейді?
Алты таңбалы HEX (#RRGGBB) альфа-арнаны қамтымайды. CSS-те мөлдірлікті көрсету үшін сегіз таңбалы HEX (#RRGGBBAA) немесе rgba() функциясы қолданылады. Бұл бет жартылай мөлдір пикселдер үшін альфа мәнін бөлек пайызбен көрсетеді.
2. Сурет жүктелмей жатыр, не істеу керек?
Алдымен суреттің пішімі қолдау көрсетілетіндер тізімінде (PNG, JPG, WebP, GIF, AVIF, HEIC) екенін тексеріңіз. Егер сурет бүлінген болса, оны басқа бағдарламада ашуға тырысыңыз. Ең ұзын жағы 4096 пиксельден асатын суреттер автоматты түрде кішірейтіледі.
3. Неге бір түсті аймақта көршілес пикселдер әртүрлі?
Бұл әдетте JPEG қысуынан немесе антиалиасингтен болады. Мысалы, қызыл түстің орнына #FF0000 және #FE0000 сияқты өте жақын мәндер кездесуі мүмкін. Мұндай жағдайда үлкейткіш көмегімен бірнеше пиксельді тексеріп, ең сәйкес келетінін таңдаған дұрыс.
4. Қанша түс сақтауға болады?
Тарихқа ең көбі 12 түс сақталады. Жаңа түс қосылғанда ең ескі жазба автоматты түрде жойылады.
5. Түс мәндерін қалай көшіруге болады?
HEX, RGB немесе HSL мәнінің өзін басу жеткілікті. Мәтін алмасу буферіне көшіріледі. Егер көшіру сәтсіз болса, браузердің қауіпсіздік параметрлерін тексеріңіз.
6. Пернетақтамен түс таңдағанда неге крест 10 пиксельге секіреді?
Shift пернесін басып тұрып көрсеткілерді басқанда, крест 10 пиксельге жылжиды. Бұл үлкен суреттерде жылдам шолу жасауға ыңғайлы. Кәдімгі көрсеткілер бір пиксельдік қадаммен жылжытады.