# Online színválasztó

> Színkör HSV, HSL és festői RYB móddal, kész színharmóniák, HEX, RGB, HSL, OKLCH és CMYK átváltás, plusz legközelebbi Tailwind token. Ingyenes, telepítés nélkül.

URL: https://acrafto.com/hu/szinvalaszto-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Válassz egy színt a kerékben, finomítsd a telítettség és fényerő vásznon, és olvasd vissza minden formátumban, amit a projekted használ, a `#RRGGBB`\-től az `oklch()`\-ig. Az eszköz azt is tudja, amit más színválasztók kihagynak: három kerékgeometriát, köztük a hagyományos festői RYB kereket, harmóniákat, amelyek maguktól összeállítják a palettát, alfacsatornát és az egész paletta egykattintásos exportját CSS változóként, SCSS-ként vagy JSON-ként. Minden a böngésződben számolódik.

## RYB vagy RGB? Három színkör egy helyett

A **Kerék módja** kapcsoló megváltoztatja, hogyan helyezkednek el az árnyalatok a kerékben:

- A **HSV** és a **HSL** digitális kerekek. Az árnyalatok ott állnak, ahol a képernyőn a fény keveri őket. A négyzet alakú vászon viselkedésében térnek el egymástól: HSV-ben a legfényesebb sarok a tiszta árnyalat, HSL-ben a tiszta árnyalatok középső világosságnál vannak, felettük fehérrel.
- Az **RYB (festői)** úgy rendezi az árnyalatokat, ahogy a festők tanulják: piros, sárga és kék mint alapszínek, közöttük narancs, zöld és lila ([RYB színmodell](https://en.wikipedia.org/wiki/RYB_color_model), angolul). A különbség főleg a harmóniáknál látszik. Az RYB kerékben a piros kiegészítő színe a **zöld**, a kéké pedig a **narancs**, vagyis a klasszikus pigmentpárok. A digitális kerék a pirost a ciánnal párosítja. Ha egy hagyományos színválasztó “kiegészítő” palettája valaha furcsának tűnt, most már tudod, miért.

## Színharmóniák: paletta, ami magától összeáll

A **Színharmónia** mezőben válassz egy szabályt. A kerék megjelöli a kísérő színeket, alattuk pedig megjelenik a kész paletta:

- **Kiegészítő:** egy szemközti szín. A legerősebb kontraszt, egyetlen akcentushoz jó a fő márkaszín mellett.
- **Osztott kiegészítő:** a kiegészítő szín két szomszédja. Majdnem ugyanolyan erős kontraszt, de könnyebben kiegyensúlyozható.
- **Triádikus:** három egyenletesen elosztott árnyalat. Élénk, mégis stabil, ha az egyik dominál, a másik kettőt visszafogottan használod.
- **Tetradikus (négyzet):** négy árnyalat. Gazdag kombináció illusztrációkhoz és grafikonokhoz, egy alkalmazás felületén nehéz egyensúlyba hozni.
- **Analóg:** a legközelebbi szomszédok. Nyugodt kombináció háttereknek és átmeneteknek.
- **Monokróm:** egy árnyalat több világossági szinten. A legbiztonságosabb választás gombállapotokhoz (hover, aktív, letiltott).

Az egész palettát egy kattintással másolhatod a kívánt formátumban: egyszerű **HEX**, **RGB**, **HSL**, **OKLCH**, beilleszthető **CSS egyéni tulajdonságok** (`--color-1: …`), **SCSS változók** vagy **JSON** a kódhoz. Ha azt szeretnéd ellenőrizni, hogy a paletta kontrasztja azoknak is működik, akik nehezebben különböztetik meg az árnyalatokat, készíts képernyőképet, és [alakítsd szürkeárnyalatossá](https://acrafto.com/hu/kepek-atkonvertalasa-szurkearnyalatba/).

## HEX, RGB, HSL, OKLCH és CMYK átváltás: illessz be bármit, kapd meg mindet

A beviteli mezők szinte bármilyen színjelölést elfogadnak: `#f80`, `#ff8800`, nyolcjegyű hex alfával, `rgb()` és `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800`, valamint elnevezett CSS színeket, mint a `rebeccapurple`. Bármit adsz meg, hét összehangolt kimenetet kapsz: **HEX, RGB, HSL, HSV, LCH, OKLCH és CMYK**, mindegyiket saját másoló gombbal.

Az előnézet alatti **Átlátszatlanság (alfa)** csúszka átkapcsolja a kimeneteket az átlátszó alakjukra: `#RRGGBBAA`, `rgba()` és `hsla()`. Az előnézet közben sakktáblamintán jelenik meg, így az átlátszóságot azonnal látod.

## A legközelebbi Tailwind CSS token bármely színhez

Az előnézet alatti két címke elnevezi a színt: a **legközelebbi elnevezett CSS szín** (gyors prototípusokhoz jó) és a **legközelebbi Tailwind token**, például `orange-500`. Így a design rendszereden belül maradhatsz, nem kell egyedi értékeket kitalálnod. Kattints a címkére a másoláshoz.

Ez arra a kérdésre válaszol, ami minden design-átadásnál felmerül: a grafikus küldött egy hex kódot, melyik Tailwind osztály áll hozzá legközelebb? Az egyezést a Tailwind CSS 4 alapértelmezett palettájához számítjuk (lásd a [Tailwind dokumentációját](https://tailwindcss.com/docs/colors), angolul), így a tokent rögtön beillesztheted az osztály nevébe.

## Melyik színformátumot használd?

| Formátum | Teljes név | Mikor használd |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Webes alapértelmezés.** Rövid, mindenhol támogatott, könnyen másolható. Nyolc számjegy hozzáadja az átlátszóságot. |
| **RGB** | Red, Green, Blue | **Így gondolkodnak a képernyők.** Három fénycsatorna 0 és 255 között. Ezt várja a legtöbb API és canvas kód. |
| **HSL** | Hue, Saturation, Lightness | **Szemre végzett módosításhoz.** A “kicsit világosabb” vagy “kevésbé telített” egyetlen szám módosítását jelenti. |
| **HSV** | Hue, Saturation, Value | **Grafikai programok.** A Photoshop és a GIMP színválasztója mögötti modell. |
| **LCH** | Lightness, Chroma, Hue | **Érzékelt egyenletesség.** Az egyenlő numerikus lépések egyenlő vizuális lépésnek tűnnek, amit a HSL csak megjátszik. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Modern választás CSS-hez.** Kijavítja a kékeknél az LCH árnyalateltolódásait. Minden mai böngésző támogatja, ideális design tokenekhez. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Nyomdai tájékozódás.** Közelítő átváltás a nyomdával való egyeztetéshez, a végső értékeket a nyomda színprofilja határozza meg. |

Hogy az OKLCH miért egyenletesebb érzékelésű a régebbi modelleknél, azt Björn Ottosson, az Oklab tér megalkotója fejti ki az [eredeti cikkében](https://bottosson.github.io/posts/oklab/) (angolul). A szintaxist és a böngészőtámogatást az [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) foglalja össze (angolul). A nyomdai modell működését a [CMYK színtér](https://hu.wikipedia.org/wiki/CMYK_sz%C3%ADnt%C3%A9r) Wikipédia-szócikke írja le.

## Apróságok, amik időt spórolnak

- **Az előzmények maguktól megmaradnak.** Az utolsó 24 szín túléli az oldal frissítését. Csak a böngésződ tárhelyén maradnak, sehova nem kerülnek feltöltésre.
- **Pipetta.** Az EyeDropper API-t támogató böngészőkben (Chrome és Edge) a képernyő bármely pontjáról kiválaszthatsz egy színt, akár a böngészőablakon kívülről is. Ha egy fotóból vagy egy logófájlból van szükséged színre, használd az [online színpipettát](https://acrafto.com/hu/kep-szinkivalaszto/).
- **Billentyűzetes vezérlés.** A kerék és a telítettség-vászon reagál a nyílbillentyűkre, így apró lépésekben finomíthatod a színt.
- **Előbeállítások** kínálnak gyakori alapszíneket, ha csak egy gyors kiindulópontra van szükséged.

## Gyakori kérdések

### Hogyan váltom át az OKLCH-t HEX-re?

Illessz be egy `oklch()` értéket az OKLCH mezőbe, és minden más kimenet, a HEX-et is beleértve, azonnal frissül. Fordítva is működik: add meg a HEX kódot, és leolvashatod a hozzá tartozó `oklch()` értéket. Egy megkötés van: az OKLCH az sRGB tartományon kívüli színeket is le tudja írni, ezek pedig levágásra kerülnek arra, amit az sRGB meg tud jeleníteni. Egy nagyon telített `oklch()` ezért nem fog ugyanúgy kinézni, mint a HEX változata egy széles gamutú kijelzőn.

### Használható az oklch() éles CSS-ben?

Igen. A Chrome, az Edge, a Firefox és a Safari minden aktuális verziója támogatja az `oklch()`\-t, és népszerű jelölés lett a design tokenekhez (a Tailwind CSS 4 ebben definiálja a teljes palettáját). Nagyon régi böngészőkhöz tegyél elé egy HEX tartalékértéket. Ez az eszköz mindkét értéket megadja.

### Miért változnak a harmóniák, ha átváltok az RYB kerékre?

Mert az, hogy mi számít "szemközti"-nek, attól függ, hogyan oszlanak el az árnyalatok a kör mentén. Az RYB kerék egyenletesen osztja el a pigment alapszíneket, így a kiegészítő párok azt tükrözik, amit a festők ismernek: piros és zöld, kék és narancs, sárga és lila. A HSV és a HSL kerék a fénykeverés szerint osztja el az árnyalatokat, ezért a pirost a ciánnal párosítja. Egyik sem téves: az RYB a hagyományos képzőművészeti oktatást követi, a HSV és a HSL azt, amit a képernyők csinálnak.

### Megbízhatók a CMYK értékek nyomtatáshoz?

Kezeld tájékoztató jellegűnek. A valódi nyomdai átváltás a nyomda, a papír és a festék [ICC-profiljától](https://en.wikipedia.org/wiki/ICC_profile) (angolul) függ. Ugyanaz az RGB szín máshogy jön ki fényezett és fényezetlen papíron. Az itt látható értékeket a szabványos képlet számolja, ami közel visz, de a végső próbanyomat a nyomdáé.

### Hol van a pipetta gomb Firefoxban vagy Safariban?

Szándékosan rejtve van. Az [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, angolul), amire a gomb épül, jelenleg csak a Chromium alapú böngészőkben érhető el (Chrome, Edge, Opera). Az eszköz minden más funkciója mindenhol működik, csak a képernyőről történő színkiválasztás hiányzik. Ha egy képből van szükséged színre, használd az [online színpipettát](https://acrafto.com/hu/kep-szinkivalaszto/), amely minden böngészőben működik.

### Privát marad a színelőzményem?

Igen. Az előzmények a böngésződ localStorage-ában, a saját eszközödön tárolódnak. Semmi, amit kiválasztasz, beillesztesz vagy másolsz, nem kerül elküldésre sehova. Az egész eszköz JavaScriptként fut a böngésződben, amit a fejlesztői eszközök Hálózat fülén magad is ellenőrizhetsz.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))