Хуудасны зорилго ба онцлог
Энэ хуудас нь таны төхөөрөмжөөс дүрс (PNG, JPG, WebP, GIF, AVIF, HEIC) сонгох, дараа нь хулганаар хөдөлгөж эсвэл дарж аль ч пикселийн өнгийг сонгох боломжийг олгодог. Сонгосон пикселийн өнгөний HEX код (зургаан оронтой, жишээ нь #1E90FF) гол гаргалт болж, RGB болон HSL утгууд хамт гарч ирнэ. Томруулсан харагдац нь яг шаардлагатай пикселийг тодорхойлоход тусална. Та олон өнгийг түүхэнд хадгалж, дараа нь ашиглах боломжтой.
Энэ хуудасны гол ялгаа нь: HEX өнгөний код нь анхдагч гаргалт юм. Зургаан оронтой (эсвэл гурван оронтой товчилсон) RGB тэмдэглэгээ нь CSS болон дизайны хэрэгслүүдэд стандарт болдог. Ах дүү хуудаснууд RGB функциональ тэмдэглэгээ эсвэл HSL дээр төвлөрдөг бол энэ хуудас нь зургаан оронтой хэлбэрээр альфа суваггүй HEX дүрслэлийг өгдөг. Аливаа тунгалаг бус байдлыг тусад нь хувиар мэдээлдэг: “Alpha ‹n›% — this pixel is partly transparent.” HEX нь авсаархан, вебэд тохирсон формат учраас color, background-color эсввэл бусад CSS шинж чанарт нэмэлт хаалт, синтаксгүйгээр шууд оруулах боломжтой тул энэ хуудас нь хамгийн тохиромжтой сонголт юм.
Дүрс ачаалагдсаны дараа төвийн пикселийн өнгөний утгууд ба координатууд шууд харагдана. Хулгана хөдөлгөхөд пикселээр өнгө сорьдог. Дарахад сонгосон өнгө түүхэнд хадгалагдана. Та сум товчлууруудыг ашиглан загалмайг хөдөлгөж болно. Shift товчлуурыг дарж сумыг ашиглах нь 10 пикселээр хөдөлгөдөг. Enter эсвэл Space товчлуурууд нь сонгосон өнгийг хадгална. Түүхэнд хамгийн ихдээ 12 зүйл хадгалагдана. Ижил RGB утгатай боловч өөр альфа утгатай өнгөнүүд тусдаа бичилт болно. Аливаа өнгөний утгыг (HEX, RGB, HSL) дарахад санах ойд хуулагдана. Хэрэв хөтөч санах ойд хуулахыг хоригловол “Could not copy — your browser blocked clipboard access.” гэсэн мэдээлэл гарна.
Өнгөний загварууд: HEX, RGB, HSL
HEX (hexadecimal) нь RGB өнгөний загварыг илэрхийлэх арга бөгөөд улаан, ногоон, цэнхэр бүрэлдэхүүн хэсгүүдийг хоёр оронтой арван зургаатын тоогоор (00-FF) бичдэг. Жишээ нь #1E90FF нь улаан: 0x1E (30), ногоон: 0x90 (144), цэнхэр: 0xFF (255). Энэхүү тэмдэглэгээ нь CSS-д хамгийн түгээмэл хэрэглэгддэг тул дизайнер, хөгжүүлэгчид ихэвчлэн HEX кодыг хэрэглэдэг. Гурван оронтой товчилсон хувилбар (#FFF нь #FFFFFF) нь бүрэлдэхүүн хэсэг бүр давхардсан үед хэрэглэгдэх боломжтой.
RGB функциональ тэмдэглэгээ (rgb(30,144,255)) нь аравтын тоогоор (0-255) илэрхийлдэг бол HSL (hsl(210,100%,56%)) нь өнгөний өнцөг (0-360), ханалт (0-100%), гэрэлтэл (0-100%) гэсэн гурван параметрийг ашигладаг. HEX нь нягт бөгөөд веб хуудасны кодонд хялбархан оруулах боломжтой учраас энэ хуудасны гол гаргалт болдог.
Дүрснээс өнгө сонгохдоо түүхий пикселийн утгыг шууд уншдаг. JPEG эсвэл дэлгэцийн зураг ашигласан бол шахалт, антиалиасинг нь пикселийн утгыг өөрчилсөн байж болзошгүй. Тиймээс тодорхой пикселийг сонгохдоо томруулсан харагдац ашиглах нь чухал.
Ил тод байдал ба альфа суваг
HEX код нь зургаан оронтой хэлбэрээр альфа сувгийг агуулдаггүй. Тунгалаг бус эсвэл хагас тунгалаг пикселийн өнгийг дүрслэхдээ тусад нь “Alpha ‹n›% — this pixel is partly transparent.” гэсэн мэдээллийг харуулдаг. Хагас тунгалаг пикселийг дараах давхаргыг тооцохгүйгээр шууд уншдаг. Энэ нь дизайны программ хангамжид давхардсан өнгөтэй ажиллахад анхаарах зүйл юм.
Жишээ нь, хэрэв пикселийн улаан утга 255, ногоон 100, цэнхэр 50, мөн альфа 128 (50%) байвал HEX код #FF6432 болно, гэхдээ alpha бүрэн тусгагдахгүй. Харин хуудас “Alpha 50% — this pixel is partly transparent.” гэж харуулна. Хэрэглэгч үүнийг харгалзан өнгөө тохируулах ёстой.
Түүхэнд ижил RGB утгатай боловч өөр альфа утгатай өнгөнүүд тусдаа бичилт болдог. Энэ нь хэрэглэгч прозрачный өнгөний олон хувилбарыг хадгалах боломжийг олгодог.
Дүрс шахалт ба антиалиасингын нөлөө
JPEG шахалт нь алдагдалтай шахалт бөгөөд өнгөний мэдээллийг багасгахын тулд пикселийн утгыг өөрчилдөг. Үүний үр дүнд нэг өнгөт гэж үзсэн хэсэгт олон төрлийн пикселийн утгууд гарч болно. Антиалиасинг нь текст эсвэл ирмэгийг тэгшлэхэд хэрэглэгддэг бөгөөд хөрш пикселүүдийн хооронд шилжилтийн өнгө оруулдаг. Иймд өнгө сонгохдоо томруулсан харагдац ашиглах нь яг шаардлагатай пикселийг сонгоход тусална.
Хэрэв дүрсний хамгийн урт тал 4096 пикселээс хэтэрсэн бол хэмжээг багасгадаг. Энэ нь анхны пикселийн утга өөрчлөгдөх шалтгаан болж болзошгүй. Хэрэглэгч том дүрс дээр ажиллаж байгаа бол багасгасан хувилбарыг ашиглаж буйгаа мэдэж байх хэрэгтэй.
Түгээмэл алдаа: дүрсний тодорхой хэсэгт нэг л өнгө байх ёстой гэж үзэх нь буруу. Шахалт, антиалиасинг, мөн дүрсний формат (GIF, PNG-8 гэх мэт) нь өнгөний тоог хязгаарлаж болзошгүй. Томруулсан харагдац нь пикселийн түвшинд үнэн зөв сонгох боломжийг олгодог.
Товчлуур ба хандалт
Хуудас нь хулганаар ажиллахаас гадна сум товчлууруудаар загалмайг хөдөлгөх боломжийг олгодог. Shift товчлуурыг дарж сум ашиглах нь 10 пикселээр хөдөлгөдөг. Enter эсвэл Space товчлуурууд нь одоогийн сонгосон өнгийг хадгална. Энэ нь хулгана ашиглах боломжгүй хэрэглэгчдэд (жишээ нь, хөдөлгөөний бэрхшээлтэй) эсвэл нарийвчлал шаардлагатай үед (жишээ нь, том дэлгэцээс жижиг дэлгэц рүү шилжих) ашигтай.
Кейс: тодорхой пикселийг зөв сонгохын тулд хулганы хөдөлгөөн хангалттай нарийвчлалтай биш байж болно. Сум товчлуурууд нь нэг пикселээр хөдөлгөх боломжийг олгож, илүү нарийвчлалыг хангана. Shift+Sum нь 10 пикселээр хурдан хөдөлгөхөд тусална.
Хэрэв хөтөч санах ойг хоригловол хуудас “Could not copy — your browser blocked clipboard access.” гэж мэдээлнэ. Энэ нь хэрэглэгчид гар аргаар хуулах шаардлагатай гэдгийг сануулдаг.
Хэрэглээ ба практик жишээ
Энэ хэрэгсэл нь дараах тохиолдолд ашигтай:
- Дизайнерууд UI дизайн хийхдээ лавлагаа дүрснээс яг пикселийн өнгийг гаргаж авах.
- Хөгжүүлэгчид CSS-д
#1E90FFгэх мэт яг HEX утгыг авах. - Агуулга бүтээгчид брэндинг, бяцхан зураг, нийгмийн сүлжээний график дээр ашиглах.
- Лого, гэрэл зураг, дэлгэцийн зурганд байгаа өнгөтэй тааруулах.
Бусад хэрэглээ: вэбсайтын дизайны загварчлалд шаардлагатай өнгөний палитр гаргах, эсвэл одоо байгаа бүтээгдэхүүний өнгөний схемийг судлах. HEX код нь Figma, Photoshop, Sketch зэрэг программд шууд оруулагддаг тул дизайны ажлын урсгалд нэгтгэхэд хялбар.
Жишээ нь: хэрэв та дэлгэцийн зурганд байгаа товчны өнгийг мэдэхийг хүсвэл дүрсээ ачаалж, хулганаа товчин дээр авчран, HEX кодыг хуулна. Дараа нь түүхэнд хадгалсан бусад өнгөнүүдтэй харьцуулж болно.
Түгээмэл асуултууд
1. Яагаад HEX код нь 6 оронтой байдаг вэ?
HEX код нь улаан, ногоон, цэнхэр бүрэлдэхүүн хэсгүүдийг 0-255 хүртэлх утгаар илэрхийлдэг бөгөөд энэ нь хоёр оронтой 16-тын тоогоор бичигддэг. Гурван бүрэлдэхүүн хэсэг нийлээд 3×2=6 тэмдэгт болно.
2. Хэрэв дүрсний хэмжээ 4096 пикселээс их бол яах вэ?
Хэрэв дүрсний хамгийн урт тал 4096 пикселээс хэтэрсэн бол хэмжээг автоматаар багасгадаг. Энэ нь анхны пикселийн утга өөрчлөгдөх шалтгаан болж болзошгүй тул том дүрс дээр ажиллахдаа анхаарна уу.
3. Яагаад зарим пикселүүдийн өнгө нь хүлээгдэж буйгаас ялгаатай байдаг вэ?
JPEG шахалт, антиалиасинг, дүрсний форматын хязгаарлалт (жишээ нь GIF) нь пикселийн утгыг өөрчилдөг. Томруулсан харагдац ашиглан яг шаардлагатай пикселийг сонгохыг зөвлөж байна.
4. HEX кодонд тунгалаг байдал хэрхэн харагддаг вэ?
HEX код нь зургаан оронтой хэлбэрээр альфа сувгийг тусгадаггүй. Хагас тунгалаг пикселийн альфа утгыг тусад нь хувиар харуулдаг. Жишээ нь: “Alpha 50% — this pixel is partly transparent.”
5. Хамгийн ихдээ хэдэн өнгийг хадгалах боломжтой вэ?
Та хамгийн ихдээ 12 өнгийг түүхэнд хадгалах боломжтой. Ижил RGB утгатай боловч өөр альфа утгатай өнгөнүүд тусдаа бичилт болно.
6. Хэрэв файлын төрөл дэмжигдэхгүй бол яах вэ?
Хэрэв дэмжигдэхгүй файлын төрөл (жишээ нь BMP, TIFF) сонговол “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” гэсэн мэдээлэл гарна. Мөн дүрсийг нээх боломжгүй бол “That image could not be opened. It may be corrupted or in an unsupported format.” гэж харуулна.