Kaip veikia spalvos nustatymas iš nuotraukos su pipete?

Įkelkite nuotrauką arba įklijuokite ją su klavišų kombinacija Ctrl + V. Veskite pelę virš nuotraukos – 10x didinamasis stiklas realiu laiku parodys padidintus pikselius. Spustelėkite norimą tašką, ir įrankis užfiksuos spalvą bei pateiks jos HEX, RGB, HSL, CMYK ir kitus formatus.

Ar mano įkeltos nuotraukos yra saugios ir privačios?

Taip, 100% saugios. Įrankis veikia tik jūsų naršyklėje (kliento pusėje per HTML5 Canvas). Jokie nuotraukų failai ar pikselių duomenys nėra siunčiami į išorinius serverius ir niekur neišsaugomi.

Kaip greitai įkelti ekrano kopiją (PrintScreen)?

Nuspauskite PrintScreen mygtuką (arba Win + Shift + S sistemoje „Windows“, Cmd + Shift + 4 sistemoje „Mac“), atidarykite šį puslapį ir tiesiog paspauskite Ctrl + V (Cmd + V). Ekrano kopija iškart atsivers įrankyje.

Ką reiškia W3C / CSS spalvos pavadinimas ir procentai?

Įrankis lygina pasirinkto taško RGB reikšmes su 140 oficialių HTML/CSS spalvų žodynu. Pagal Euklido atstumą surandamas artimiausias standartinis spalvos vardas (pvz., „RoyalBlue“) ir pateikiamas atitikimo tikslumo procentas.

Kaip eksportuoti ištrauktą dominuojančių spalvų paletę į CSS arba JSON?

Virš dominuojančių spalvų paletės spustelėkite mygtuką „CSS kintamieji“, „JSON masyvas“ arba „HEX sąrašas“, ir suformatuoti duomenys bus akimirksniu nukopijuoti į jūsų iškarpinę.

Kaip interpretuoti WCAG kontrasto analizatoriaus rezultatus?

WCAG standartas nurodo minimalų teksto ir fono kontrasto koeficientą. AA lygis reikalauja bent 4,5:1 santykio normaliam tekstui (3,0:1 dideliam tekstui), o AAA lygis – bent 7,0:1 santykio. Įrankis automatiškai parodo, ar spalva atitinka šiuos reikalavimus, ir rekomenduoja šviesų arba tamsų tekstą.

Kokie vaizdų formatai yra palaikomi?

Palaikomi visi populiarūs formatai: JPG, JPEG, PNG, WebP, SVG, AVIF, GIF, BMP ir ICO.

Spalvos iš nuotraukos nustatymas ir pipetė internetu | HEX, RGB, CMYK

Nuvilkite nuotrauką čia arba spustelėkite įkėlimui

Taip pat palaikomas tiesioginis įklijavimas iš iškarpinės su Ctrl + V (JPG, PNG, WebP, SVG, AVIF)

#FFFFFF

rgb(255, 255, 255)

🔍 Veskite pelę su 10x didinamuoju stiklu – spustelėkite tašką spalvai užrakinti

📐 0 × 0 px 📍 X: 0, Y: 0

🖼️ Image

🎨 Dominuojanti nuotraukos spalvų paletė:

🔍 Užfiksuotos spalvos formatai ir analizė:

RoyalBlue (100%)

#1D4ED8

W3C Pavadinimas: RoyalBlue

Šviesumas (Luma): 42%

Teksto kontrastas: Šviesus tekstas

WCAG Prieinamumas: AAA (Pass)

HEX (DIDŽIOSIOMIS)#RRGGBB

HEX (mažosiomis)#rrggbb

RGB0-255

RGBAAlpha 1.0

HSLHue, Sat, Light

HSV / HSBHue, Sat, Val

CMYK (Spaudai)Cyan, Mag, Yel, Key

Dešimtainis (Int)0-16777215

W3C / CSS VardasArtimiausias

♿ WCAG 2.1 / 2.2 Prieinamumo ir kontrasto analizatorius:

Luminance: 0.124

⚪ Baltas tekstas (#FFFFFF) 5.42 : 1

Pavyzdinis baltas tekstas ant pasirinktos spalvos fono.

AA Pass (4.5:1) AA Large (3.0:1) AAA Pass (7.0:1)

⚫ Juodas tekstas (#000000) 3.88 : 1

Pavyzdinis juodas tekstas ant pasirinktos spalvos fono.

AA Fail AA Large (3.0:1) AAA Fail

💡 Rekomenduojama naudoti baltą tekstą (#FFFFFF) optimaliam skaitomumui užtikrinti.

🌈 Spalvų harmonijos ir atspalviai (paspauskite nukopijavimui):

Papildoma (Complementary) +180°

Analogiškos (Analogous) ±30°

Triada (Triadic) +120° / +240°

Šviesumo spektrai (Tints & Shades) 10% - 92%

🕒 Parinktų spalvų istorija (iki 16 spalvų):

Paspauskite ant nuotraukos, kad išsaugotumėte spalvas čia.

Tikslus spalvos iš nuotraukos nustatymas – nepakeičiamas įrankis dizaineriams, programuotojams ir kūrėjams. Kuriant modernias interneto svetaines, vartotojo sąsajas (UI/UX), prekės ženklo stiliaus knygas (Brandbook), ruošiant iliustracijas ar spaudos maketus, viena dažniausių užduočių yra paimti tikslią spalvą iš ekrano kopijos, logotipo, grafinio elemento ar gamtos nuotraukos. Šis internetinis įrankis sujungia didelės raiškos 10x pikselių didinamąjį stiklą (lupą), automatinį dominuojančių spalvų ištraukėją, WCAG prieinamumo kontrasto tikrintuvą ir momentinį konvertavimą į visus populiariausius skaitmeninius bei spaudos formatus.

1. Nuotraukos įkėlimo būdai ir paprastas startas

Įrankis sukurtas taip, kad pradėti darbą būtų galima vos per vieną sekundę be jokių registracijų ar papildomų nustatymų:

Pasirinkimas iš įrenginio: Spustelėkite mygtuką „📂 Pasirinkti nuotrauką“ ir parinkite bet kurį palaikomą failą (JPG, PNG, WebP, SVG, AVIF, GIF, BMP).
Nuvilkimas pele (Drag & Drop): Tiesiog nuvilkite nuotrauką iš kompiuterio aplanko tiesiai į įkėlimo zoną arba ant jau atidarytos drobės.
Įklijavimas iš iškarpinės (Ctrl + V): Nuspauskite ekrano kopijos mygtuką (PrintScreen arba Win + Shift + S / Cmd + Shift + 4), atidarykite šį puslapį ir paspauskite Ctrl + V. Vaizdas akimirksniu atsivers redaktoriuje.
Bandomasis pavyzdys: Jei norite greitai išbandyti įrankio galimybes, spustelėkite „🖼️ Įkelti pavyzdį“ ir bus sugeneruota spalvinga bandomoji paletė.

2. 10x didinamasis stiklas (Pixel Magnifier Loupe) ir taško fiksavimas

Paprastos naršyklių pipetės dažnai būna netikslios, nes sunku pataikyti į vieną konkretų pikselį, ypač esant smulkioms detalėms ar teksto kraštų suliejimui (antialiasing). Šis įrankis realiu laiku seka pelės žymeklį ir atvaizduoja padidintą 11×11 pikselių tinklelio zoną su centriniu taikiniu:

Pikselių atskyrimas: Kiekvienas pikselis atvaizduojamas su subtiliu rėmeliu, todėl aiškiai matote gretimų atspalvių skirtumus.
Taško užrakinimas: Spustelėjus bet kurį nuotraukos tašką, ant drobės atsiranda pulsuojantis žymeklis (Pin), o viršutinėje juostoje užfiksuojamos tikslios koordinatės (X, Y).
Mobilusis valdymas: Įrenginiuose su liečiamuoju ekranu lupa valdoma piršto prisilietimu ir braukimu per ekraną.

3. Visi spalvų formatai ir 1-paspaudimo kopijavimas

Užfiksavus nuotraukos tašką, įrankis automatiškai apskaičiuoja visus standartinius spalvos kodus, reikalingus programuotojams, dizaineriams ir poligrafijos specialistams:

HEX (didžiosiomis ir mažosiomis): Standartinis 6 simbolių šešioliktainis formatas (pvz., #1D4ED8 ir #1d4ed8) saityno dizainui (HTML/CSS).
RGB ir RGBA: Adityvusis ekrano spalvų modelis (pvz., rgb(29, 78, 216) ir rgba(29, 78, 216, 1.0)).
HSL (Hue, Saturation, Lightness): Žmogaus regai intuityvus modelis su atspalvio laipsniais (0–360°) ir procentais (pvz., hsl(224, 76%, 48%)).
HSV / HSB (Hue, Saturation, Value/Brightness): Populiariausias modelis grafikos redaktoriuose („Figma“, „Adobe Photoshop“, „Sketch“).
CMYK (Cyan, Magenta, Yellow, Key): Subtraktyvusis modelis spaudai, nurodantis dažų proporcijas (pvz., cmyk(87%, 64%, 0%, 15%)).
Dešimtainis kodas (Decimal / Integer): Sveikasis 24 bitų skaičius (0–16777215), naudojamas žaidimų kūrime, Canvas programavime ir duomenų bazėse.
W3C / CSS spalvos pavadinimas: Pagal mažiausią Euklido atstumą 3D RGB erdvėje surandamas artimiausias oficialus HTML spalvos vardas (pvz., „RoyalBlue“) su tikslumo procentu.

Kiekvienas kodo laukelis turi atskirą kopijavimo mygtuką, o paspaudus ant paties laukelio kodas taip pat akimirksniu nukopijuojamas į iškarpinę su žaliu patvirtinimu.

4. Automatinis dominuojančių spalvų paletės ištraukimas

Įkėlus nuotrauką, algoritmas nuskaito visos drobės pikselius naudodamas greitą erdvinį kvantavimą ir klasterizavimą. Jis atrenka 6–8 labiausiai pastebimas, vizualiai turtingas ir tarpusavyje besiskiriančias spalvas. Kiekviena paletės spalva rodoma su jos užimama nuotraukos dalimi (procentais). Paspaudus ant bet kurios paletės kortelės, ji tampa aktyvia spalva ir iškart nukopijuojamas jos HEX kodas.

Taip pat galite eksportuoti visą nuotraukos spalvų paletę vienu spustelėjimu:

CSS kintamieji: Suformatuotas :root { --color-1: #...; } blokas, kurį galite tiesiai įklijuoti į savo stilių failą.
JSON masyvas: HEX kodų sąrašas ["#1d4ed8", "#3b82f6", ...] programiniam apdorojimui.
HEX sąrašas: Paprastas kableliais atskirtas sąrašas.

5. WCAG 2.1 ir 2.2 prieinamumo bei kontrasto analizatorius

Kuriant prieinamą ir lengvai skaitomą turinį pagal tarptautines W3C gaires (WCAG), būtina užtikrinti pakankamą teksto ir fono kontrasto santykį. Šis įrankis realiu laiku apskaičiuoja pasirinktos spalvos santykinį šviesumą (Relative Luminance) ir nustato kontrasto koeficientą su baltu (#FFFFFF) bei juodu (#000000) tekstu:

WCAG AA (Normalus tekstas): Reikalauja bent 4,5 : 1 santykio.
WCAG AA Large (Didelis tekstas / antraštės): Reikalauja bent 3,0 : 1 santykio.
WCAG AAA (Padidinto griežtumo lygis): Reikalauja bent 7,0 : 1 santykio.

Skydelyje rodomi gyvi pavyzdiniai teksto blokai ir aiški rekomendacija – kokios spalvos tekstą geriausia naudoti ant pasirinkto fono.

6. Spalvų harmonijos ir šviesumo spektrai

Pasirinkus bet kurį atspalvį, automatiškai sugeneruojamos klasikinės spalvų teorijos harmonijos:

Papildoma (Complementary): Priešingoje spalvų rato pusėje esanti spalva (+180°).
Analogiškos (Analogous): Šalia esančios harmoningos spalvos (±30°).
Triada (Triadic): Trikampio taisykle išdėstytos trys subalansuotos spalvos (+120° ir +240°).
Šviesumo atspalviai (Tints & Shades): To paties atspalvio spektrai nuo 10% iki 90% šviesumo.

Paspaudus ant bet kurio harmonijos kvadratėlio, ta spalva akimirksniu tampa pagrindine ir nukopijuojama į iškarpinę.

7. Parinktų spalvų istorija ir 100% kliento privatumas

Kiekviena paspausta spalva automatiškai išsaugoma istorijos juostoje (iki 16 elementų), todėl galite patogiai grįžti prie anksčiau nustatytų atspalvių arba vienu mygtuku išvalyti visą sąrašą. Visi skaičiavimai ir nuotraukų analizė atliekami išskirtinai jūsų naršyklėje (kliento pusėje per HTML5 Canvas) – jokie vaizdai nesiunčiami į serverius, todėl garantuojamas visiškas jūsų duomenų saugumas ir privatumas.