Ստանալ HEX Գույն Պատկերից

Ինչ է սա և ինչու հեքսը կարևոր

Այս էջը թույլ է տալիս ցանկացած նկարից (PNG, JPG, WebP, GIF, AVIF, HEIC ձևաչափերով) ընտրել առանձին պիքսել և ստանալ նրա գույնը ամենատարածված վեբ-ձևաչափերով՝ HEX, RGB և HSL: Սակայն այս էջի հիմնական արդյունքը վեցանիշ հեքս կոդն է (օրինակ՝ #1E90FF), քանի որ հենց այս ներկայացումն է CSS-ի և դիզայնի գործիքների դե ֆակտո ստանդարտը:

Ի տարբերություն էջի մյուս տարբերակների («RGB» և «HSL»), այստեղ հեքսն առաջնային է: Սա նշանակում է, որ եթե Ձեզ անհրաժեշտ է գույնի արժեք, որը կարելի է ուղղակիորեն տեղադրել color կամ background-color հատկության մեջ առանց լրացուցիչ փակագծերի կամ շարահյուսության, ապա այս էջն ամենահարմարն է:

Հեքս նշումը (hexadecimal) աշխատում է 16-ական համակարգով. յուրաքանչյուր զույգ նիշ ներկայացնում է կարմիր, կանաչ և կապույտ բաղադրիչի ինտենսիվությունը 0-ից 255 միջակայքում: Օրինակ, #1E90FF-ում 1E-ն կարմիրն է (30), 90-ը՝ կանաչը (144), FF-ը՝ կապույտը (255): Այս վեցանիշ ձևաչափը չի պարունակում ալֆա ալիք (թափանցիկություն), ուստի ցանկացած կիսաթափանցիկ պիքսելի դեպքում թափանցիկությունը ցուցադրվում է առանձին՝ որպես տոկոս («Alpha ‹n›% – this pixel is partly transparent.»):

Ինչպես է աշխատում գույնի նմուշառումը

Երբ նկարը բեռնվում է, գործիքն անմիջապես ցույց է տալիս կենտրոնական պիքսելի գույնը և կոորդինատները: Մկնիկը նկարի վրայով տեղափոխելիս գույներն ու կոորդինատները փոխվում են պիքսել առ պիքսել: Այս գործընթացում մեծ դեր ունի խոշորացված տեսքը, որը թույլ է տալիս ճիշտ ընտրել այն պիքսելը, որը նախատեսել եք:

Կոճակ սեղմելով (կամ կտտացնելով) ընտրված գույնը պահվում է պատմության մեջ՝ մինչև 12 կետ: Կարևոր է հիշել, որ ցուցադրվում է նկարի ուղիղ պիքսելային արժեքը: Եթե նկարը JPEG է կամ սքրինշոթ, սեղմումն ու հակաալիզինգը կարող են փոխել պիքսելների արժեքները, այնպես որ հարևան պիքսելները, որոնք թվում են միագույն, կարող են մի փոքր տարբերվել: Այդ իսկ պատճառով ճշգրիտ պիքսելի ընտրությունը կարևոր է:

Եթե նկարի ամենաերկար կողմը գերազանցում է 4096 պիքսել, այն մասշտաբավորվում է: Սահմանափակումը կապված է վեբ բրաուզերի՝ canvas-ի հետ աշխատելու սահմանափակումների հետ. շատ մեծ նկարները կարող են դանդաղեցնել կամ խափանել գործիքը:

Հեքս, RGB, HSL տարբերությունները և ալֆա-թափանցիկություն

Թեև էջը միաժամանակ ցուցադրում է գույնը երեք ձևաչափերով, յուրաքանչյուրն ունի իր առանձնահատկությունը.

• HEX (#RRGGBB): վեցանիշ տասնվեցական կոդ: Չի աջակցում ալֆա ալիքին: Այն ամենատարածվածն է CSS-ում, քանի որ կոմպակտ է և չի պահանջում ֆունկցիոնալ շարահյուսություն:
• RGB (rgb(255, 144, 30)): թույլ է տալիս տեսնել բաղադրիչների թվային արժեքները 0-255 միջակայքում:
• HSL (hsl(210°, 100%, 59%)): ցույց է տալիս երանգը (hue), հագեցվածությունը (saturation) և պայծառությունը (lightness)՝ ըստ CSS Color Module Level 4-ի:

Երբ պիքսելը կիսաթափանցիկ է (օրինակ՝ PNG-ում ալֆա ալիքով), գործիքը ցուցադրում է իրական ալֆա արժեքը՝ «Alpha 45% – this pixel is partly transparent.»: Սա կարևոր է, քանի որ հեքս կոդը թափանցիկություն չի պարունակում. եթե դուք պատճենեք միայն #1E90FF-ը, կորցնեք թափանցիկությունը: Աշխատելիս հիշեք, որ կիսաթափանցիկ պիքսելի արժեքը հաշվարկվում է առանց հաշվի առնելու, թե ինչ կա նկարի հետևում. դա նկարի պահվող արժեքն է, ոչ թե վերջնական տեսքը:

Նկարի հետ աշխատելու առանձնահատկությունները

Գործիքն ընդունում է միայն վերոնշյալ ձևաչափերը: Եթե փորձեք բեռնել չաջակցվող ֆայլ (օրինակ՝ BMP), ցուցադրվում է հաղորդագրություն. «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.»:

Ֆայլի չափի սահմանափակումը` 4096 պիքսել ամենաերկար կողմում, ապահովում է բրաուզերի կայուն աշխատանքը: Մասշտաբավորումը կատարվում է համամասնորեն, որպեսզի գույների միջինացումը լինի նվազագույն, բայց պիքսելային տվյալները կարող են փոքր-ինչ փոխվել:

Կարևոր է նաև ստեղնաշարի նավիգացիան: եթե մկնիկ օգտագործելը հարմար չէ, ապա սլաքների ստեղներով կարող եք տեղափոխել խաչքարը նկարի վրայով: Shift-ը սլաքի հետ միասին շարժում է խաչքարը 10 պիքսելով: Enter կամ Space սեղմելով՝ պահպանվում է ներկայիս գույնը: Սա հեշտացնում է աշխատանքը հասանելիության խնդիրներ ունեցող օգտատերերի համար և թույլ է տալիս կատարել ճշգրիտ ընտրություն առանց մկնիկի:

Գույների պատմություն և կրկնակի օգտագործում

Պատմությունը պահում է մինչև 12 գույն: Երբ կտտացնում եք նկարի վրա, ընտրված գույնի հեքս կոդը ավելացվում է ցանկում, և էկրանին հայտնվում է հաղորդագրություն. «Saved ‹hex› to your picks.»: Պատմության մեջ ցուցադրվում են պիքսելային վառ գույներով փոքրիկ քառակուսիներ (swatches): Դրանցից մեկի վրա սեղմելով՝ այդ գույնը կրկին բեռնվում է՝ ցուցադրելով դրա HEX, RGB, HSL արժեքները:

Գույները, որոնք ունեն նույն RGB արժեքները, բայց տարբեր ալֆա, պահվում են որպես առանձին գրառումներ: Սա կարևոր է, երբ աշխատում եք կիսաթափանցիկ նկարների հետ, օրինակ՝ PNG պատկերակներ:

Պատճենելու հնարավորություն. Ցանկացած ցուցադրված գույնի արժեքի (HEX, RGB, HSL) վրա սեղմելով՝ այն ավտոմատ կպատճենվի clipboard: Սակայն եթե բրաուզերն արգելափակում է clipboard-ի հասանելիությունը (օրինակ՝ անվտանգության քաղաքականության պատճառով), ցուցադրվում է հաղորդագրություն. «Could not copy – your browser blocked clipboard access.»: Դա սովորաբար տեղի է ունենում http:// էջերում կամ երբ երրորդ կողմի ընդլայնումները խանգարում են:

«Սկսել նորից» կոճակը

Կոճակը մաքրում է նկարը, դատարկում գույների պատմությունը և վերադարձնում գործիքը սկզբնական վիճակին: Սա օգտակար է, երբ ցանկանում եք սկսել նոր նկարից առանց հին գույները պահելու:

Հաճախակի տրվող հարցեր

Հարց 1. Ինչու՞ հեքս կոդը չի պարունակում թափանցիկություն: Վեցանիշ հեքս ձևաչափը (#RRGGBB) նախատեսված է միայն գույնի երեք բաղադրիչների համար: Ալֆա ալիքը CSS-ում ավելացվում է rgba() ֆունկցիայի կամ 8-նիշանոց հեքսի միջոցով (#RRGGBBAA), որը, սակայն, դեռ համընդհանուր աջակցություն չունի հին բրաուզերներում: Էջը կիսաթափանցիկության մասին տեղեկացնում է առանձին տողով:

Հարց 2. Ինչու՞ են հարևան պիքսելները տարբերվում, եթե նկարը միագույն է թվում: JPEG-ի սեղմումը և սքրինշոթների հակաալիզինգը կարող են ներմուծել մանր գունային տատանումներ: Այս գործիքը ցույց է տալիս իրական պիքսելային արժեքը, որը կարող է մի փոքր տարբերվել «աչքով» ընկալվող գույնից:

Հարց 3. Կարելի՞ է աշխատել միայն ստեղնաշարով: Այո: Սլաքների ստեղներով տեղափոխվում եք պիքսել առ պիքսել, Shift+սլաք՝ 10 պիքսել, Enter կամ Space՝ պահպանել գույնը: Մկնիկի միջոցով մեծացված տեսքը, սակայն, հասանելի է միայն մկնիկով:

Հարց 4. Ո՞րն է տարբերությունը այս էջի և «RGB from image» էջի միջև: «RGB from image» էջը որպես առաջնային արդյունք ցույց է տալիս rgb(r, g, b) ձևաչափը, իսկ այս էջըհեքս կոդը: Եթե Ձեզ անհրաժեշտ է արժեք CSS-ումrgb()` տեսքով, ապա այն էջն ավելի հարմար է:

Հարց 5. Ինչպե՞ս է պահպանվում գույների պատմությունը էջի տարբեր այցելությունների ընթացքում: Պատմությունը չի պահպանվում localStorage-ում: Այն մաքրվում է, երբ թարմացնեք էջը կամ սեղմեք «Սկսել նորից»:

Հարց 6. Ինչու՞ է գործիքը մասշտաբավորում մեծ նկարները: Բրաուզերները սահմանափակումներ ունեն canvas-ի առավելագույն չափի նկատմամբ (սովորաբար 4096×4096): Ավելի մեծ նկարները կհանգեցնեին վթարի կամ դանդաղ աշխատանքի: Մասշտաբավորումը պահպանում է համամասնությունները և հնարավորինս ճշգրիտ գունային տվյալները: