Gauti HEX spalvą iš paveikslėlio

Įkelkite nuotrauką ir spustelėkite bet kurį pikselį, kad gautumėte jo HEX spalvos kodą, paruoštą įklijuoti į CSS arba HTML.

Įkelkite paveikslėlį, tada užveskite pelę virš jo, kad pasirinktumėte spalvą.

Jūsų paveikslėlis lieka jūsų įrenginyje – jis nuskaitomas naršyklėje ir niekada neįkeliamas į „BroBroGo“.

DUK

Kaip sužinoti spalvos HEX kodą iš paveikslėlio?

Įkelkite paveikslėlį, tada užveskite pelę arba spustelėkite pikselį – didintuvas padės tiksliai nusitaikyti. HEX kodas (pvz., #4f46e5) pasirodys iškart, o jį nukopijuoti galėsite vienu spustelėjimu.

Kas yra HEX spalvos kodas?

HEX kodas nurodo spalvą kaip simbolį #, po kurio seka šeši šešioliktainiai skaitmenys – po du raudonai, žaliai ir mėlynai spalvai (pvz., #4f46e5). Tai yra formatas, kurį naudoja CSS, HTML ir dauguma dizaino įrankių.

Ar galiu gauti ir RGB bei HSL reikšmes, o ne tik HEX?

Taip – prie kiekvieno pasirinkto pikselio šalia HEX kodo rodomos RGB ir HSL reikšmės, o kiekvieną iš jų galite nukopijuoti vienu spustelėjimu.

Spalvų kodo ištraukimas iš paveikslėlio: HEX formatas

Kaip šis įrankis veikia

Įrankis leidžia iš jūsų įrenginio įkelti paveikslėlį ir, užvedus pelę ant bet kurio pikselio, akimirksniu matyti to pikselio spalvą šešioliktainiu (HEX) kodu. Kartu rodomos ir RGB bei HSL reikšmės, tačiau pagrindinis išvesties formatas yra būtent HEX – šešios raidės ar skaitmenys, pradedant # simboliu, pavyzdžiui, #1E90FF. Šis formatas yra absoliutus standartas CSS ir daugumoje dizaino įrankių.

Skirtingai nuo giminingų puslapių, kuriuose pagrindinis dėmesys skiriamas RGB funkciniam žymėjimui (rgb(30, 144, 255)) arba HSL (hsl(210, 100%, 56%)), šiame puslapyje HEX yra pirmoji ir svarbiausia reikšmė. Šešių skaitmenų HEX neturi jokio alfa kanalo – skaidrumas čia nėra užkoduotas. Todėl, jei pikselis yra iš dalies permatomas, įrankis apie tai praneša atskirai: „Alfa ‹n›% – šis pikselis iš dalies permatomas.“ Tai esminis skirtumas: HEX yra grynas spalvos aprašymas be permatomumo informacijos.

Įkeliant paveikslėlį, iš karto rodoma centrinio pikselio spalva ir jo koordinatės. Tai leidžia pradėti analizę nedelsiant, nereikia papildomų veiksmų. Paveikslėlio dydis (plotis × aukštis) taip pat pateikiamas iškart.

Kodėl HEX yra dominuojantis formatas žiniatinklyje

HEX formatas yra ypač patogus, nes jis yra kompaktiškas ir neturi jokių papildomų skliaustų ar sintaksės. Norint pritaikyti spalvą CSS savybėje, pavyzdžiui, color: #1E90FF; arba background-color: #1E90FF;, užtenka šešių simbolių. Tai žymiai trumpiau nei rgb(30, 144, 255) arba hsl(210, 100%, 56%). Dėl šios priežasties daugelis žiniatinklio kūrėjų ir dizainerių pirmenybę teikia būtent HEX formatui, ypač kai reikia greitai nukopijuoti reikšmę.

HEX formatas yra šešioliktainė RGB reikšmės išraiška. Kiekviena spalva – raudona, žalia ir mėlyna – užkoduojama dviem šešioliktainiais skaitmenimis (nuo 00 iki FF). Pavyzdžiui, #FF0000 yra gryna raudona, #00FF00 – gryna žalia, o #0000FF – gryna mėlyna. Ši sistema tiesiogiai atitinka 0–255 intensyvumo skalę, tačiau yra patogesnė rašant ir skaitant, nes nereikalauja kablelių.

Įrankis automatiškai ištraukia tikslią pikselio reikšmę, kokia ji yra išsaugota paveikslėlio faile. Tačiau svarbu suprasti, kad jei paveikslėlis yra JPEG formato ar ekrano nuotrauka, glaudinimas ir anti‑aliasing (kraštų išlyginimas) gali šiek tiek pakeisti gretimų pikselių reikšmes. Tai reiškia, kad net ir vizualiai vienodas plotas gali turėti kelis skirtingus HEX kodus, todėl pikselio parinkimas tampa kritiniu veiksniu.

Tikslus pikselio parinkimas ir didintuvas

Vienas svarbiausių įrankio elementų yra didintuvas – padidintas vaizdo fragmentas, padedantis tiksliai pasirinkti norimą pikselį. Tai ypač naudinga, kai dirbama su sudėtingais arba anti‑aliasing paveikslėliais, kuriuose gretimi pikseliai gali vizualiai susilieti. Didintuvas leidžia matyti kiekvieną pikselį atskirai, todėl galima užtikrintai pasirinkti būtent tą, kurio spalvos reikia.

Be pelės, naudotojas gali valdyti kryželį klaviatūros rodyklių klavišais. Tai užtikrina, kad net ir tie, kurie negali naudotis pele, galėtų tiksliai parinkti spalvas. Paspaudus rodyklę, kryželis pasislenka vienu pikseliu. Laikant Shift klavišą ir spaudžiant rodyklę, kryželis pasislenka dešimčia pikselių. Tai leidžia greitai peršokti didesnius atstumus, kai reikia palyginti spalvas skirtingose paveikslėlio vietose.

Kai kryželis yra norimoje vietoje, paspaudus Enter arba tarpo klavišą, spalva išsaugoma į istoriją. Tai ypač patogu, kai reikia paimti kelias spalvas iš vieno paveikslėlio ir jas palyginti. Pelės spustelėjimas taip pat išsaugo spalvą, ir tada rodomas pranešimas: „Išsaugota ‹hex› jūsų pasirinkimuose.“

Įrankis taip pat apriboja paveikslėlių dydį: jei ilgiausia kraštinė viršija 4096 pikselius, vaizdas proporcingai sumažinamas. Tai užtikrina, kad naršyklė galėtų apdoroti net ir didelius failus be vėlavimo ar trikdžių.

Skaidrumo ir spalvų modelių niuansai

Šešioliktainis HEX formatas niekada nekoduoja permatomumo. Tai yra pagrindinis jo trūkumas, palyginti su šiuolaikiniais RGBA (rgba(30, 144, 255, 0.5)) arba HSLA (hsla(210, 100%, 56%, 0.5)) formatais. Todėl šis įrankis, aptikęs, kad pikselis nėra visiškai nepermatomas, apie tai praneša atskirai: „Alfa ‹n›% – šis pikselis iš dalies permatomas.“ Tai reiškia, kad alfa vertė (0–255) yra konvertuojama į procentus ir pateikiama kaip atskira informacija.

Pikselio permatomumas nusprendžiamas pagal jo alfa kanalo vertę paveikslėlyje. Pavyzdžiui, PNG failai gali turėti alfa kanalą, o JPEG failai – ne. Jei pikselio alfa vertė yra mažesnė nei 255 (t. y. 100 %), laikoma, kad jis iš dalies permatomas. Įrankis neskaito jokios fono – jis rodo tikrąją to pikselio vertę, nesvarbu, kas yra po juo.

Jei paveikslėlis buvo sugludintas arba jame yra šešėlių, gali atsirasti pikselių, kurių spalva yra šviesesnė nei tikimasi. Taip atsitinka dėl anti‑aliasing mechanizmo, kuris sumaišo objekto kraštą su fonu. Todėl net ir paprastai atrodančioje nuotraukoje gali būti dešimtys skirtingų HEX kodų, ypač perėjimuose tarp spalvų.

Spalvų istorija ir praktinis naudojimas

Įrankis saugo iki 12 išsaugotų spalvų istoriją. Tai leidžia greitai peržiūrėti visas paimtas spalvas ir jas palyginti. Spustelėjus bet kurią istorijos spalvą, ji vėl įkeliama į pagrindinę rodymo sritį. Tai labai naudinga, kai kuriate spalvų paletę ir norite greitai patikrinti, kuri spalva buvo pasirinkta anksčiau.

Svarbu pažymėti, kad spalvos, turinčios tas pačias RGB reikšmes, bet skirtingas alfa vertes, yra išsaugomos kaip atskiri įrašai. Tai teisinga, nes nors HEX kodas gali būti identiškas, dėl skaidrumo skirtumų spalvos atrodo skirtingai, ir jas reikia atskirti.

Kai spustelite bet kurią rodomą spalvos reikšmę (HEX, RGB ar HSL), ji nukopijuojama į iškarpinę. Pavyzdžiui, jei paspausite ant #1E90FF, šis tekstas bus nukopijuotas. Jei naršyklė užblokuoja iškarpinės prieigą, rodomas pranešimas: „Nepavyko nukopijuoti – jūsų naršyklė užblokavo iškarpinės prieigą.“ Tai gali atsitikti, kai naršyklė neleidžia skriptams pasiekti iškarpinės be vartotojo sąveikos.

Mygtukas „Pradėti iš naujo“ išvalo paveikslėlį, ištrynęs spalvų istoriją, ir grąžina įrankį į pradinę būseną. Tai naudinga, kai norite pradėti naują projektą arba išvalyti senus duomenis.

Dažniausiai užduodami klausimai

Ar šis įrankis gali tiksliai nustatyti spalvą iš bet kokio formato paveikslėlio?

Įrankis palaiko PNG, JPG, WebP, GIF, AVIF ir HEIC formatus. Jei failo tipas yra nepalaikomas, rodomas pranešimas: „Šis failo tipas nepalaikomas. Pabandykite PNG, JPG, WebP, GIF, AVIF arba HEIC paveikslėlį.“ Taip pat priimami MIME tipai: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Jei paveikslėlio nepavyksta atverti, rodomas pranešimas: „Šio paveikslėlio nepavyko atverti. Galbūt jis sugadintas arba yra nepalaikomo formato.“

Ką daryti, jei spalva atrodo neteisinga?

Paveikslėlyje yra glaudinimo ir anti‑aliasing artefaktų, kurie gali pakeisti pikselių reikšmes. Pabandykite priartinti vaizdą naudodami didintuvą ir pasirinkite pikselį, kuris atrodo tiksliai. Jei naudojate JPEG formatą, jis glaudina prarandant duomenis, todėl spalvos gali skirtis nuo originalaus šaltinio.

Kaip išsaugoti spalvą naudojant klaviatūrą?

Naudokite rodyklių klavišus, kad perkeltumėte kryželį norimoje vietoje. Tada paspauskite Enter arba tarpo klavišą, kad išsaugotumėte spalvą. Laikydami Shift ir naudodami rodykles, galite judėti 10 pikselių žingsniais.

Ar istorija gali išsaugoti daugiau nei 12 spalvų?

Ne, istorija talpina tik 12 elementų. Kai pasiekiate limitą, seniausios spalvos automatiškai pašalinamos iš sąrašo. Jei reikia daugiau spalvų, rekomenduojama jas nukopijuoti į atskirą failą.

Ką reiškia pranešimas apie alfa procentą?

Jei pikselis yra iš dalies permatomas, jo alfa kanalo vertė yra mažesnė nei 255. Įrankis šią vertę konvertuoja į procentus ir rodo, pavyzdžiui: „Alfa 30 % – šis pikselis iš dalies permatomas.“ Tai nereiškia, kad HEX kodas klaidingas – jis rodo tik RGB vertę be skaidrumo.

Kaip kopijuoti spalvą į iškarpinę?

Spustelėkite bet kurią rodomą spalvos reikšmę – HEX, RGB ar HSL. Pavyzdžiui, jei norite nukopijuoti #1E90FF, tiesiog spustelėkite ant jo. Jei naršyklė blokuoja iškarpinės prieigą, rodomas pranešimas: „Nepavyko nukopijuoti – jūsų naršyklė užblokavo iškarpinės prieigą.“