CodeKitHubMi ez az eszköz?
A színválasztó egy vizuális döntést — ez a kék árnyalat, az a pontos képpont egy logóban — a szoftverek által érthető numerikus kódokká alakít. Ugyanazon színnek több egyenértékű jelölése is van: a HEX (#3b82f6) uralja a CSS-t és a tervezői átadásokat, az RGB (59, 130, 246) megfelel annak, ahogyan a képernyők és a kód a színt reprezentálják, a HSL (217°, 91%, 60%) pedig az árnyalatot, telítettséget és világosságot írja le olyan módon, amivel az ember könnyen tud gondolkodni.
Az eszköz második fele egy kép-pipetta. Tölts fel egy képernyőképet, logót vagy fotót, és kattints bármely pontjára, hogy lemintázd a kurzor alatti színt — ez a szokásos módja annak, hogy megválaszold: "pontosan milyen szín ez?". Ahol a böngésző támogatja az EyeDropper API-t, ott a natív nagyító nagyítólencse jelenik meg; más böngészőkben az eszköz a kép egy canvas-másolatáról olvassa le a képpont értékét. Mindkét esetben a feldolgozás helyi: a kép sosem kerül feltöltésre.
Miért érdemes használni?
- Három formátum egyszerre: minden kiválasztott szín egyidejűleg HEX, RGB és HSL formában jelenik meg, mindegyik saját egykattintásos másoló gombbal — nincs szükség külön átalakítási lépésre.
- Válassz színt képről: tölts fel bármilyen képet, és kattints a pontos képpontszín lemintázásához — ideális márkaszínek kinyeréséhez egy logóból, vagy egy képernyőképen látott szín egyeztetéséhez.
- A böngésző natív, nagyítóval ellátott EyeDropper funkcióját használja, ha elérhető, egyébként pontos canvas képpont-olvasásra vált vissza mindenhol máshol.
- Élő előnézeti minta mutatja az aktuális színt egy pillantással, így ellenőrizheted a választást másolás előtt.
- Ingyenes, azonnali és teljesen helyi: a színek kiszámítása és a képek olvasása a böngésződben történik — semmi sem kerül feltöltésre, tárolásra vagy naplózásra.
Használati útmutató
- Válassz színt a színmezővel, vagy illessz be/szerkessz egy értéket közvetlenül.
- Ha egy képről szeretnél mintát venni, tölts fel egy képet, és kattints arra a pontra, amelynek a színére kíváncsi vagy.
- Olvasd le a HEX, RGB és HSL értékeket, amelyek egy élő előnézeti mintával együtt jelennek meg.
- Kattints a szükséges formátum melletti másoló gombra — HEX a CSS-hez, RGB vagy HSL a kódhoz.
Példa
Bemenet
Kattintás egy feltöltött logó kék területéreKimenet
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Mindhárom sor ugyanazt a színt írja le. Használj HEX-et stíluslapokban és tervezőeszközökben, RGB-t, ahol a kód csatornaértékeket vár, és HSL-t, ha világosabb vagy sötétebb változatokat szeretnél levezetni úgy, hogy csak az utolsó számot változtatod.
Melyik színformátum melyik feladathoz
A modern CSS mindhármat elfogadja bárhol, ahol szín megadható, így a választás a munkafolyamatról szól, nem a kompatibilitásról. A csapatok jellemzően HEX-ben szabványosítják a dizájn-tokeneket, majd HSL-t használnak a variációk kipróbálásához — módosítsd a világosságot 10–15 ponttal egy használható hover állapothoz anélkül, hogy az árnyalat eltolódna.
| Formátum | Példa | Mire a legjobb |
|---|---|---|
| HEX | #3b82f6 | CSS, tervezőeszközök, színek megosztása chatben és specifikációkban |
| RGB | rgb(59, 130, 246) | Kód, amely csatornákat kezel, canvas rajzolás, rgba() átlátszóság |
| HSL | hsl(217, 91%, 60%) | Világosabb/sötétebb/hover változatok készítése, paletták építése |
A kiválasztott színtől a kész CSS-ig
A szín lemintázása általában egy stílusozási feladat első lépése. Ha ugyanarra a színre más jelölésekben is szükséged van — CMYK nyomtatáshoz vagy OKLCH érték a széles színtartományú CSS-hez —, a Színkonverter ott folytatja, ahol ez a választó abbahagyta.
A kiválasztott szín gyakran közvetlenül egy vizuális effektbe kerül: a Box Shadow generátor egy HEX értéket vár a valósághű árnyékokhoz, a Border Radius generátorral épített lekerekített kártyák pedig teljessé teszik a látványt.
→ Színkonverter · Box Shadow Generátor · Border Radius Generátor
Gyakori kérdések
Mi a különbség a HEX, RGB és HSL között?
Ugyanannak a színmodellnek három jelölése. A HEX a piros, zöld és kék csatornákat hat hexadecimális számjegybe tömöríti (#3b82f6), és ez a leggyakoribb forma CSS-ben és tervezőeszközökben. Az RGB ugyanazt a három csatornát decimális számokként sorolja fel 0 és 255 között. A HSL a színt árnyalatként (0–360°), telítettségként és világosságként fejezi ki újra — sokkal intuitívabb, ha "ugyanazt a színt, csak világosabban" szeretnéd. Az átalakítás közöttük sosem változtatja meg a színt.
Hogyan működik a színválasztás egy képről?
A feltöltött kép egy láthatatlan canvas-ra rajzolódik a böngésződben. Amikor kattintasz, az eszköz leolvassa az adott pozíción lévő képpont piros, zöld és kék értékét, és átalakítja HEX, RGB és HSL formátumra. Azokban a böngészőkben, amelyek támogatják az EyeDropper API-t (asztali Chrome és Edge), egy natív nagyító nyílik meg helyette, így pixelpontosan választhatsz a képernyő bármely pontján.
Feltöltésre kerül valahova a képem?
Nem. A képet a böngésződ közvetlenül nyitja meg, és helyben olvassa le egy canvas-ról; sem fájl, sem színadat nem kerül továbbításra vagy tárolásra. Betöltheted az oldalt, lekapcsolhatod az internetet, és a színválasztó, valamint a kép-pipetta továbbra is működik — ez biztonságossá teszi meg nem jelent tervekhez és belső képernyőképekhez.
Miért nem egyezik pontosan a kiválasztott szín azzal, amit a képernyőn látok?
Két gyakori ok van. Élsimítás (anti-aliasing): a szöveg és formák szélein lévő képpontok a háttérrel keverednek, így ha egy képponttal mellé kattintasz, egy köztes színt kapsz — inkább egy terület tömör közepéből mintázz. Színkezelés: a szokatlan színprofilú JPG/PNG fájlok kissé eltérően jeleníthetők meg különböző kijelzőkön; az eszköz a fájlban tárolt képpontértéket jelenti, ami a tervezői munkához szükséges érték.
Melyik formátumot másoljam CSS-hez?
A HEX a legbiztonságosabb alapértelmezés — minden böngésző és eszköz elfogadja. Használj HSL-t, ha hover- vagy sötét módú változatokat tervezel készíteni, mert ha csak a világosság-komponenst módosítod, az árnyalat és a telítettség konzisztens marad. Az RGB főleg akkor hasznos, ha a kód számszerű csatornákból építi fel a színeket, vagy amikor átlátszóságot adsz hozzá — az rgba(59, 130, 246, 0.5) sokkal érthetőbb, mint egy nyolcjegyű HEX.