Spalvų parinkiklis
Pasirinkite bet kurią spalvą iš nuotraukos ir iškart gaukite HEX, RGB, HSL, HSV bei CMYK kodus.
Įkelkite nuotrauką, kad pasirinktumėte spalvą
Vilkite, įklijuokite arba naršykite — PNG, JPG, WEBP arba GIF
Patarimas: nuotrauką galite įklijuoti ir su Ctrl/Cmd + V
Spalvų kodai
Artimiausias spalvos pavadinimas: Royal Blue
Spalvų harmonijos
Kontrasto tikrinimas (WCAG)
Pavyzdinis tekstas
Išsaugotos spalvos
Kol kas nėra išsaugotų spalvų — pasirinkite vieną ir spustelėkite „Išsaugoti spalvą“.
Spalvų parinkiklis (angl. color picker) — tai įrankis, leidžiantis nustatyti tikslią bet kurios nuotraukos taško spalvą ir iškart gauti jos skaitmeninę reikšmę. Užtenka įkelti paveikslėlį, spustelėti norimą pikselį pipete, ir įrankis atpažins spalvą bei parodys ją visais standartiniais formatais. Tai naudinga tinklalapių ir vartotojo sąsajų (UI) kūrėjams, dizaineriams, programuotojams, spaudos specialistams ir bet kam, kam reikia tiksliai atkartoti spalvą iš logotipo, nuotraukos ar dizaino maketo.
Įrankis visiškai nemokamas ir veikia tiesiai jūsų naršyklėje — nuotraukos niekur neįkeliamos į serverį, todėl jūsų duomenys ir vaizdai lieka privatūs. Vienu metu gaunate HEX, RGB, HSL, HSV ir CMYK kodus, galite ištraukti visą spalvų paletę iš nuotraukos, sugeneruoti darniai derančias spalvų harmonijas ir patikrinti teksto bei fono kontrastą pagal WCAG prieinamumo standartą — viskas be registracijos ir be jokių apribojimų.
Kaip pasirinkti spalvą iš nuotraukos
- 1
Įkelkite arba nutempkite paveikslėlį
Nuvilkite nuotrauką į įrankio langą, įklijuokite ją su Ctrl/Cmd + V arba pasirinkite failą iš savo kompiuterio. Taip pat galite įkelti nuotrauką pagal nuorodą (URL).
- 2
Spustelėkite pipete ant pikselio
Užveskite žymeklį ant norimos nuotraukos vietos — priartinimas padės tiksliai pataikyti į reikiamą pikselį — ir spustelėkite, kad pasirinktumėte tos vietos spalvą.
- 3
Perskaitykite ir nukopijuokite kodus
Iškart matysite pasirinktos spalvos HEX, RGB, HSL, HSV ir CMYK reikšmes. Spustelėję mygtuką „Kopijuoti“, bet kurį kodą akimirksniu nukopijuosite į iškarpinę.
- 4
Ištraukite paletę iš paveikslėlio
Vienu paspaudimu sugeneruokite dominuojančių nuotraukos spalvų paletę — tai pravers kuriant nuoseklią dizaino ar prekės ženklo spalvų schemą.
- 5
Sugeneruokite spalvų harmonijas
Iš pasirinktos spalvos automatiškai gaukite darniai derančius atspalvius — papildomą, analogišką, triadą, tetradą, skaidytą papildomą ar monochromatinę schemą.
- 6
Patikrinkite kontrastą ir išsaugokite paletę
Patikrinkite teksto ir fono kontrasto santykį pagal WCAG AA/AAA reikalavimus, o tuomet išsaugokite mėgstamas spalvas ir eksportuokite jas kaip CSS, JSON ar PNG failą.
HEX, RGB, HSL, HSV ir CMYK paaiškinti
Ta pati spalva gali būti užrašyta keliais skirtingais formatais — kiekvienas jų naudingas kitokioje situacijoje: internete, ekrano dizaine ar spaudoje. Žemiau rasite trumpą kiekvieno formato paaiškinimą su pavyzdžiu.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Internetas ir CSS |
| RGB | rgb(59, 130, 246) | Ekranai ir vaizdo redagavimas |
| HSL | hsl(217, 91%, 60%) | Intuityvus spalvos koregavimas |
| HSV | hsv(217, 76%, 96%) | Dizaino įrankiai ir grafinės programos |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Spauda ir poligrafija |
Interneto ir UI dizainas
Dizaineriai naudoja spalvų parinkiklį, kad tiksliai atkartotų prekės ženklo spalvas ar suderintų naujus elementus su jau esama vartotojo sąsaja. Pasirinkę spalvą iš maketo ar nuorodos, iškart gaunate HEX kodą, tinkamą įklijuoti į Figma, Sketch ar bet kurį kitą dizaino įrankį.
Front-end kūrimas (CSS kintamieji)
Programuotojams dažnai reikia iš dizaino nuotraukos ar ekrano kopijos ištraukti tikslią spalvą ir ją panaudoti CSS kintamuosiuose ar dizaino sistemos tokenuose. HEX ir RGB reikšmes galima nukopijuoti vienu paspaudimu ir iškart įklijuoti į kodą.
Spauda ir prekės ženklas (CMYK)
Ruošiant medžiagą spaudai — vizitines korteles, plakatus ar pakuotes — būtina žinoti CMYK reikšmes, nes spausdintuvai naudoja šį spalvų modelį, o ne RGB. Įrankis automatiškai konvertuoja pasirinktą spalvą į CMYK, kad spaustuvėje spalva atrodytų tiksliai taip, kaip suplanuota.
Prieinamumas (WCAG kontrastas)
Norint, kad tekstas būtų įskaitomas visiems vartotojams, teksto ir fono spalvų kontrastas turi atitikti WCAG rekomendacijas. Įrankis parodo kontrasto santykį ir iškart nurodo, ar derinys atitinka AA bei AAA lygius įprastam ir dideliam tekstui.
Palyginimas
Palyginome mūsų spalvų parinkiklį su populiariu imagecolorpicker.com įrankiu — matote, kad mūsų sprendimas siūlo daugiau funkcijų be reklamų.
| Spalvų modeliai | HEX, RGB, HSL, HSV ir CMYK | Tik HEX ir RGB |
| CMYK spaudai | Taip, konvertuojama automatiškai | Nėra |
| WCAG kontrasto tikrinimas | Įskaičiuotas AA/AAA tikrintuvas | Nėra |
| Spalvų harmonijos | 6 harmonijų tipai vienu paspaudimu | Nėra |
| Reklamos | Jokių reklamų | Daug reklaminių skydelių |
Dažniausiai užduodami klausimai
Kaip pasirinkti spalvą iš nuotraukos?
Įkelkite nuotrauką nuvilkdami ją į įrankį, įklijuodami su Ctrl/Cmd + V arba pasirinkdami failą iš kompiuterio. Tuomet spustelėkite pipete ant norimo pikselio, ir įrankis iškart parodys tos vietos HEX, RGB, HSL, HSV bei CMYK reikšmes.
Kas yra HEX spalvos kodas?
HEX kodas — tai šešiaženklis šešioliktainis skaičius (pvz., #3B82F6), kuriuo internete ir CSS faile užkoduojamos raudonos, žalios ir mėlynos spalvos dedamosios. Tai populiariausias būdas nurodyti spalvą tinklalapiuose, nes jis trumpas ir vienareikšmis.
Kaip konvertuoti RGB į HEX?
Kiekviena RGB dedamoji (0–255) paverčiama į dvi šešioliktainio skaičiaus raides, tuomet visos trys sujungiamos su ženklu # priekyje. Mūsų įrankis tai atlieka automatiškai — tereikia pasirinkti spalvą, ir HEX reikšmę iškart matysite šalia RGB, be jokių papildomų skaičiavimų.
Kaip sukurti spalvų paletę iš nuotraukos?
Įkelkite nuotrauką ir spustelėkite mygtuką „Išgauti paletę“ — įrankis automatiškai išanalizuos vaizdą ir parodys dominuojančias spalvas kaip atskirus pavyzdžius. Kiekvieną spalvą galite pasirinkti atskirai arba nukopijuoti dešiniuoju pelės klavišu.
Kaip patikrinti spalvų kontrastą dėl prieinamumo?
Pasirinkite teksto ir fono spalvas kontrasto tikrinimo skiltyje — įrankis apskaičiuos kontrasto santykį ir parodys, ar jis atitinka WCAG AA bei AAA reikalavimus įprastam ir dideliam tekstui. Tai padeda užtikrinti, kad tekstas būtų lengvai skaitomas visiems vartotojams.
Ar šis įrankis nemokamas ir saugus naudoti?
Taip, įrankis visiškai nemokamas ir neturi jokių apribojimų. Visas apdorojimas vyksta jūsų naršyklėje — nuotraukos nesiunčiamos į jokį serverį, todėl jūsų vaizdai ir duomenys lieka visiškai privatūs.
