Iegūt HEX krāsu no attēla

Krāsu paraugu ņemšana no attēliem: HEX formāta priekšrocības

Kad no attēla jāiegūst precīzs pikseļa krāsas kods, visbiežāk izmantotais formāts tīmekļa dizainā un CSS ir heksadecimālais krāsu kods jeb HEX. Šī lapa ir veidota tieši šim mērķim – tā uzreiz parāda izvēlētā pikseļa krāsu kā sešciparu (vai trīsciparu saīsināto) HEX vērtību, kā arī RGB un HSL attēlojumu, bet galvenā izeja ir HEX. Atšķirībā no mātes lapām, kas koncentrējas uz RGB funkcionālo apzīmējumu vai HSL, šeit jūs saņemat kompaktu, tīmeklī standarta formātu, ko var ievietot tieši color, background-color vai jebkurā citā CSS īpašībā bez papildu iekavām vai sintakses.

Rīks darbojas pilnībā klienta pusē – attēls netiek augšupielādēts nevienā serverī, tāpēc tas ir privāts un ātrs. Viss, kas nepieciešams, ir mūsdienīgs tīmekļa pārlūks, kas atbalsta <canvas> elementu un JavaScript.

Kā rīks darbojas: ievade, izvade un darbības princips

Lai sāktu, lietotājs izvēlas attēlu no savas ierīces. Atbalstītie formāti ir PNG, JPG, WebP, GIF, AVIF un HEIC. Atbilstošie MIME tipi: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Ja tiek mēģināts izmantot neatbalstītu faila tipu, tiek parādīts ziņojums: "That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image." Ja attēlu nevar atvērt (piemēram, bojāts fails), tiek paziņots: "That image could not be opened. It may be corrupted or in an unsupported format."

Pēc attēla ielādes rīks automātiski parāda centrālā pikseļa krāsu vērtības un koordinātas. Pēc tam, pārvietojot peles kursoru virs attēla, tiek paraugotas krāsas pikseli pa pikselim. Lai atvieglotu precīzu izvēli, ir pieejams palielināts skats, kas ļauj saskatīt atsevišķus pikseļus, īpaši svarīgi, ja attēlā ir anti-aliasing vai saspiešanas artefakti.

Ja lietotājs vēlas izmantot tastatūru, viņš var pārvietot krustiņu ar bulttaustiņiem. Ar Shift+taustiņu krustiņš pārvietojas par 10 pikseļiem. Lai saglabātu krāsu, var nospiest Enter vai atstarpes taustiņu. Tas nodrošina pieejamību un precizitāti bez peles.

Kad lietotājs noklikšķina uz attēla (vai izmanto tastatūru), pašreizējā krāsa tiek pievienota vēsturei (krāsu izvēlei). Rīks uzreiz parāda "Saved ‹hex› to your picks." Saglabāto krāsu vēsturē var būt līdz 12 ierakstiem. Noklikšķinot uz krāsas parauga vēsturē, tā atkal tiek ielādēta kā pašreizējā krāsa. Svarīgi: krāsas ar vienādām RGB vērtībām, bet atšķirīgu alfa vērtību, tiek saglabātas kā atsevišķi ieraksti.

Visas trīs krāsu vērtības (HEX, RGB, HSL) ir noklikšķināmas. Noklikšķinot uz jebkuras, tā tiek kopēta starpliktuvē. Ja pārlūks bloķē starpliktuves piekļuvi, tiek parādīts ziņojums "Could not copy — your browser blocked clipboard access." Šāda situācija var rasties, ja lapa nav atvērta drošā kontekstā (HTTPS) vai lietotājs ir atspējojis atļaujas.

Kas atšķir šo lapu no citām krāsu izvēles lapām

Lai gan mātes lapās ir pieejami rīki, kas fokusējas uz RGB vai HSL, šī lapa ir veltīta HEX formātam. HEX kods ir sešciparu heksadecimāls skaitlis (piemēram, #1E90FF), kas apzīmē sarkano, zaļo un zilo komponentu. Tas ir standarts CSS, jo ir kompakts un viegli nolasāms. Atšķirībā no RGB funkcionālās notācijas (rgb(30, 144, 255)), HEX neizmanto iekavas, komatus vai procentu simbolus, tāpēc to var ielīmēt tieši stilu failā.

Būtiska atšķirība ir tā, ka sešciparu HEX formāts neiekodē alfa kanālu – caurspīdīgumu. Ja pikselis ir daļēji caurspīdīgs, rīks to ziņo atsevišķi kā "Alpha ‹n›% — this pixel is partly transparent." Piemēram, ja pikseļa RGB vērtība ir (255,0,0) ar alfa 0.5, HEX tiks parādīts kā #FF0000, bet papildu rindiņa paziņos "Alpha 50% — this pixel is partly transparent." Tas ir svarīgi, jo dizaineri bieži vien nezina, ka HEX bez papildu okteta nevar izteikt daļēju caurspīdīgumu.

Šī lapa ir ideāla izvēle, ja nepieciešama tieši HEX vērtība, piemēram, lai saskaņotu ar esošu CSS kodu, logo krāsu vai krāsu paleti, ko izmanto Figma, Photoshop vai citā dizaina programmatūrā.

Svarīgas detaļas un robežgadījumi

Lietotājiem jāapzinās vairākas nianses, kas ietekmē iegūto krāsu precizitāti.

Attēla saspiešana un anti-aliasing. Ja attēls ir JPEG formātā vai ir ekrānuzņēmums, saspiešana un anti-aliasing ir mainījis pikseļu vērtības. Pat šķietami vienmērīgā laukumā blakus pikseļi var nedaudz atšķirties. Tāpēc precīza pikseļa izvēle ar palielinājumu ir būtiska. Rīks parāda tieši to pikseļa vērtību, kāda tā ir saglabāta attēlā – tā nav koriģēta vai izlīdzināta.

Caurspīdīgums (alfa kanāls). Daļēji caurspīdīgs pikselis tiek nolasīts pats par sevi, neņemot vērā, kas atrodas aiz tā. Tas nozīmē, ka, ja attēlā ir pikselis ar alfa 30% virs baltas fonas, tā RGB vērtība būs sajaukta ar balto tikai tad, ja attēls ir jau sagatavots ar fonu. Ja attēls ir PNG ar saglabātu caurspīdīgumu, rīks redz oriģinālo pikseļa krāsu un tā alfa. Šī informācija ir noderīga, lai saprastu, kā krāsa uzvedīsies dažādos fonos.

Izmērs un mērogošana. Attēli, kuru garākā mala pārsniedz 4096 pikseļus, tiek automātiski samazināti. Tas tiek darīts, lai ierobežotu pārlūka atmiņas patēriņu un nodrošinātu vienmērīgu darbību. Samazināšana var ietekmēt pikseļu vērtības interpolācijas dēļ. Tādēļ, ja nepieciešama ārkārtīgi precīza krāsa, ieteicams izmantot attēlu ar mazāku izmēru vai sadaļu.

Vēstures limits. Krāsu vēsturē var saglabāt ne vairāk kā 12 krāsas. Ja nepieciešams vairāk, jāizmanto cits rīks vai jānotīra vēsture, izmantojot pogu "Start over", kas noņem attēlu, iztukšo vēsturi un atiestata rīku sākotnējā stāvoklī.

Izmantotie formāti un to ierobežojumi

Lai gan rīks atbalsta vairākus attēlu formātus, katrs no tiem atšķiras pēc krāsu attēlojuma.

Svarīgi: ja attēls ir GIF ar 256 krāsu paleti, iegūtā HEX vērtība būs viena no paletes krāsām, nevis precīzā oriģināla krāsa (ja tā nav paletē). Tāpat arī JPEG ar zemu kvalitāti var radīt bloku artefaktus, kas maina krāsu vērtības.

Biežāk uzdotie jautājumi

Kāpēc HEX kods nesatur alfa vērtību?
Sešciparu HEX formāts (piemēram, #FF0000) apzīmē tikai RGB komponentes. Lai pievienotu caurspīdīgumu, CSS izmanto astoņciparu HEX (#FF000080) vai rgba() notāciju. Rīks alfa vērtību parāda atsevišķi procentos.

Ko darīt, ja attēls ir pārāk liels un tiek samazināts?
Rīks automātiski samazina attēlu, ja garākā mala pārsniedz 4096 pikseļus. Lai iegūtu precīzāku krāsu, ieteicams izmantot mazāku attēla fragmentu vai sagriezt to pirms ielādes.

Vai es varu kopēt HEX vērtību, neizmantojot peli?
Jā, pēc krāsas izvēles varat noklikšķināt uz HEX vērtības (ar peles vai tastatūras fokusu), un tā tiks kopēta starpliktuvē. Tastatūras lietotāji var izmantot tabulāciju, lai sasniegtu vērtību, un nospiest Enter.

Kāpēc tiek parādīts ziņojums par bloķētu starpliktuvi?
Rīks izmanto navigator.clipboard.writeText(), kas darbojas tikai HTTPS vai vietējā lokālajā vidē. Ja lapu atverat caur HTTP, pārlūks bloķē piekļuvi starpliktuvei. Risinājums: izmantojiet HTTPS vai iekopējiet vērtības manuāli.

Vai es varu saglabāt vairāk nekā 12 krāsas?
Vēsture ir ierobežota līdz 12 ierakstiem. Ja nepieciešams vairāk, varat tās manuāli kopēt un saglabāt citur, pēc tam notīrīt vēsturi ar pogu "Start over" un turpināt.

Kāpēc dažādi pikseļi šķietami vienādā laukumā parāda atšķirīgas HEX vērtības?
Tas ir normāli, ja attēls ir JPEG – saspiešana rada nelielas krāsas variācijas blakus pikseļos. Pat PNG ar vienmērīgu krāsu var būt gradienta vai anti-aliasing efekti. Palielinātais skats palīdz pārliecināties, ka izvēlaties pareizo pikseli.

Padomi precīzai krāsu noteikšanai

• Ja iespējams, izmantojiet PNG attēlus bez zudumiem, lai krāsas būtu pēc iespējas tuvāk oriģinālam.
• Pirms paraugu ņemšanas pārbaudiet, vai attēlā nav redzamu saspiešanas artefaktu (bloķi, izplūdums). Ja ir, apsveriet iespēju iegūt oriģinālo attēlu augstākā kvalitātē.
• Izmantojiet palielinājumu, lai mērķētu tieši uz vēlamo pikseli, īpaši uz malu un anti-aliasing apgabaliem.
• Ja nepieciešama krāsa ar caurspīdīgumu, izmantojiet PNG attēlu un ņemiet vērā alfa procentu. HEX formātā šo informāciju nevar iekodēt, tāpēc dizaina programmā būs jāizmanto rgba() vai astoņciparu HEX.
• Krāsu vēsture ļauj ātri salīdzināt vairākas krāsas. Noklikšķinot uz saglabātā parauga, tas atkal tiek aktivizēts, lai jūs varētu kopēt tā vērtības.
• Ja pārlūks bloķē starpliktuvi, varat manuāli pārrakstīt HEX kodu no displeja.

Šis rīks ir vienkāršs, bet spēcīgs ikdienas darbarīks ikvienam, kam nepieciešami precīzi HEX krāsu kodi no attēliem – dizaineriem, izstrādātājiem un satura veidotājiem. Atcerieties, ka iegūtās vērtības ir atkarīgas no attēla kvalitātes un saspiešanas, tāpēc kritiskiem projektiem vienmēr izmantojiet oriģinālos, neapstrādātos attēlus.