Színválasztó
Válassz bármilyen színt egy képről, és azonnal megkapod a HEX, RGB, HSL, HSV és CMYK kódokat.
Tölts fel egy képet a szín kiválasztásához
Húzd ide, illeszd be vagy tallózz — PNG, JPG, WEBP vagy GIF
Tipp: a képet a Ctrl/Cmd + V billentyűkombinációval is beillesztheted
Színkódok
Legközelebbi színnév: Royal Blue
Színharmóniák
Kontrasztellenőrző (WCAG)
Mintaszöveg
Mentett színek
Még nincsenek mentett színek — válassz egyet, és koppints a „Szín mentése” gombra.
A színválasztó (angolul color picker) egy olyan eszköz, amellyel bármilyen képről pontosan leolvashatod és lemásolhatod a rajta szereplő színeket. Elég feltölteni egy fotót, logót vagy képernyőképet, majd a pipettával rákattintani a kívánt pixelre — az eszköz azonnal megadja a szín HEX, RGB, HSL, HSV és CMYK kódját. Ezt webdesignerek és fejlesztők használják egy meglévő arculat színeinek visszafejtésére, de ugyanígy hasznos nyomdai munkákhoz, ahol a CMYK-értékekre van szükség, illetve akadálymentesség-ellenőrzéshez, ahol a szöveg és a háttér közötti kontrasztarányt kell megfelelő szintre hozni.
Az eszköz teljesen ingyenes, és minden feldolgozás közvetlenül a böngésződben zajlik — a feltöltött kép sosem kerül szerverre, így semmilyen adatvédelmi kockázatot nem jelent. A pontos színkódok mellett egy kattintással kinyerheted a kép domináns színpalettáját, generálhatsz hozzá illő színharmóniákat (kiegészítő, analóg, triád és más kombinációk), és rögtön leellenőrizheted a WCAG szabvány szerinti kontrasztot is, mielőtt a színeket éles projektben használnád.
Hogyan válasszunk ki egy színt egy képről
- 1
Kép feltöltése
Húzd be a képet a böngésző ablakába, illeszd be vágólapról (Ctrl/Cmd + V), add meg a képének URL-jét, vagy tallózz a saját fájljaid közül.
- 2
Kattints a pipettával egy pixelre
Vidd az egeret a kép fölé, nagyíts rá a kívánt részletre, majd kattints a pontos pixelre, amelynek a színét ki szeretnéd olvasni.
- 3
Olvasd le és másold a színkódokat
A kattintás után azonnal megjelenik a kiválasztott szín HEX, RGB, HSL, HSV és CMYK kódja — egy kattintással bármelyiket vágólapra másolhatod.
- 4
Nyerd ki a kép teljes palettáját
A „Paletta kinyerése” gombbal automatikusan meghatározhatod a kép domináns színeit, és mindegyiket külön-külön is elmentheted vagy lemásolhatod.
- 5
Generálj színharmóniákat
A kiválasztott alapszínből egy kattintással előállíthatsz kiegészítő, analóg, triád, tetrád vagy monokromatikus színkombinációkat a további tervezéshez.
- 6
Ellenőrizd a WCAG kontrasztot, és mentsd a palettát
Add meg a szöveg és a háttér színét a kontrasztellenőrzőben, nézd meg, megfelel-e az AA/AAA szintnek, majd exportáld a kész palettát CSS, JSON vagy PNG formátumban.
HEX, RGB, HSL, HSV és CMYK magyarázata
Ugyanaz a szín többféle formátumban is megadható, attól függően, hogy webes fejlesztésről, dizájnról vagy nyomtatásról van-e szó. Az alábbi táblázat bemutatja az öt legelterjedtebb színmodellt, egy-egy példával és a tipikus felhasználási területükkel.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Webfejlesztés és CSS |
| RGB | rgb(59, 130, 246) | Képernyők és digitális megjelenítés |
| HSL | hsl(217, 91%, 60%) | Intuitív szín-beállítás (árnyalat, telítettség, fényerő) |
| HSV | hsv(217, 76%, 96%) | Tervezőeszközök és grafikai szoftverek |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Nyomtatás és nyomdai előkészítés |
Web- és UI-tervezés
Ha egy inspirációként szolgáló weboldalról, alkalmazásból vagy dizájnmintáról szeretnéd átvenni egy elem pontos színét, a színválasztóval egy kattintással meghatározhatod a HEX kódját, és azonnal beépítheted a saját Figma-, Sketch- vagy Adobe XD-projektedbe. Így az egész felületed konzisztens marad, és nem kell találgatnod a színkódokat.
Frontend fejlesztés (CSS-változók)
Fejlesztőként gyakran kell egy logóból, illusztrációból vagy tervezői makettből kinyerni a pontos színpalettát, hogy CSS egyéni tulajdonságokként (--primary-color, --accent-color) definiáld őket. A paletta kinyerése funkcióval egyszerre több színt is kimásolhatsz, és közvetlenül beillesztheted a kódodba HEX vagy RGB formátumban.
Nyomtatás és márkaépítés (CMYK)
Ha névjegykártyát, szórólapot vagy csomagolást tervezel, a képernyőn látott RGB-színek nem mindig egyeznek meg a nyomtatott eredménnyel. A színválasztó CMYK-értékeket is megad, így a nyomdának pontosan átadhatod, milyen cián-, magenta-, sárga- és fekete-arányra van szükség a hűséges színvisszaadáshoz.
Akadálymentesség (WCAG kontraszt)
A jól olvasható felülethez a szöveg és a háttér közötti kontrasztnak meg kell felelnie a WCAG irányelveknek. A beépített kontrasztellenőrzővel megadhatod a szöveg és a háttér színét, és azonnal látod a kontrasztarányt, valamint hogy megfelel-e az AA vagy AAA szintnek — mielőtt a színeket élesben is felhasználnád.
Az összehasonlítás
Sok felhasználó az imagecolorpicker.com oldalt használja képek színeinek leolvasására. Az alábbi táblázat megmutatja, miben nyújt többet a mi eszközünk.
| Színmodellek | HEX, RGB, HSL, HSV és CMYK egyszerre, egy helyen | Csak HEX és RGB |
| CMYK nyomtatáshoz | Beépített CMYK-átalakítás nyomdai munkákhoz | Nincs CMYK-támogatás |
| WCAG kontrasztellenőrző | Beépített kontrasztarány-ellenőrzés AA/AAA szinttel | Nincs kontraszt-funkció |
| Színharmóniák | Automatikus kiegészítő, analóg, triád és más harmóniák generálása | Nincs harmónia-generátor |
| Hirdetések | Tiszta, hirdetésmentes felület | Sok hirdetés és felugró ablak zavarja a használatot |
Gyakori kérdések
Hogyan válasszak ki egy színt egy képről?
Töltsd fel a képet (húzd be, illeszd be vagy tallózz), majd a pipettaeszközzel kattints a kívánt pixelre. A kiválasztott szín HEX, RGB, HSL, HSV és CMYK kódja azonnal megjelenik, és egy kattintással vágólapra másolhatod.
Mi az a HEX színkód?
A HEX kód egy hat karakterből álló, kettőskereszttel kezdődő kód (pl. #3B82F6), amely a piros, zöld és kék színösszetevőket hexadecimális formában adja meg. Ez a webfejlesztésben és a CSS-ben a legelterjedtebb színmegadási mód.
Hogyan alakíthatom át az RGB-t HEX-re?
Az RGB három értéke (piros, zöld, kék, 0–255 skálán) egyenként kettő-kettő hexadecimális karakterré alakítható, amelyeket egymás után írva kapjuk meg a HEX kódot. A színválasztóban ezt nem kell kézzel kiszámolnod — a kiválasztott szín RGB és HEX értéke is automatikusan, egyszerre jelenik meg.
Hogyan készíthetek színpalettát egy fotóból?
Töltsd fel a fotót, majd kattints a „Paletta kinyerése” gombra. Az eszköz automatikusan meghatározza a kép domináns színeit, amelyeket egyenként megnézhetsz, elmenthetsz, vagy CSS, JSON illetve PNG formátumban exportálhatsz.
Hogyan ellenőrizhetem a színkontrasztot akadálymentesség céljából?
A beépített kontrasztellenőrzőben add meg a szöveg és a háttér színét — az eszköz kiszámolja a kontrasztarányt, és megmutatja, hogy megfelel-e a WCAG AA vagy AAA szintjének normál és nagyméretű szöveg esetén egyaránt.
Ingyenes az eszköz, és biztonságban vannak az adataim?
Igen, a színválasztó teljesen ingyenes, regisztráció nélkül használható. A feltöltött kép feldolgozása kizárólag a saját böngésződben történik, a kép soha nem kerül fel szerverre, így adatvédelmi szempontból is biztonságos.
