Színkód átváltó: HEX to RGB és RGB to HEX

Hogyan használd?

Írd be a HEX színkódot (például #FF5733) vagy az RGB-értékeket.
Ha nincs még kódod, válaszd ki a színt a színválasztóval.
Nézd meg az előnézetet, és ellenőrizd, hogy a kívánt színt kaptad-e.
Másold ki a szükséges formátumot a CSS-be vagy a tervezőprogramba.

Mire jó a színkód átváltó?

A színkód átváltó ugyanazt a színt mutatja meg különböző írásmódokban. A webes munkában és a tervezőprogramokban leggyakrabban a HEX színkód (például #1E90FF) és az RGB érték (például rgb(30, 144, 255)) szerepel. A kettő ugyanazt jelenti, csak más számrendszerben.

Akkor jön jól, ha:

egy arculati kézikönyvben HEX-kódot kaptál, de a programod RGB-t kér (hex to rgb),
egy képszerkesztőből RGB-értéket olvastál ki, és CSS-be kell írnod (rgb to hex),
áttetszőséget szeretnél adni egy színnek, és ehhez RGBA kell,
csak ránéznél egy kódra, hogy milyen színt takar.

A beépített színválasztóval (color picker) kódot sem kell tudnod: kiválasztod a színt, és megkapod mindkét formátumot.

Hogyan épül fel a HEX színkód?

A HEX színkód egy # jelből és hat hexadecimális számjegyből áll: #RRGGBB. Az első két jegy a vörös (R), a második kettő a zöld (G), az utolsó kettő a kék (B) összetevő erősségét adja meg, 00-tól (nincs) FF-ig (teljes erősség).

A hexadecimális számrendszerben a 0–9 számjegyek után az A–F betűk jönnek (A = 10, F = 15). Egy kétjegyű HEX-érték így 0 és 255 között lehet, a három összetevőből tehát 256 × 256 × 256 = 16 777 216 szín írható le.

Néhány változat, amivel találkozhatsz:

Rövid alak: #0F8 ugyanaz, mint #00FF88. Minden jegy megduplázódik. Csak akkor használható, ha mindhárom pár két egyforma jegyből áll.
Áttetszőséggel: #RRGGBBAA. Az utolsó két jegy az átlátszatlanság: FF teljesen fedő, 80 (128) nagyjából 50%, 00 teljesen átlátszó.
Kis- és nagybetű: #ff5733 és #FF5733 ugyanaz a szín.

Kidolgozott példa: HEX to RGB és RGB to HEX

HEX → RGB: alakítsuk át a #FF5733 kódot.

Bontsd párokra: FF, 57, 33.
Minden párnál az első jegy értékét szorozd 16-tal, és add hozzá a második jegyet:
- FF = 15 × 16 + 15 = 255
- 57 = 5 × 16 + 7 = 87
- 33 = 3 × 16 + 3 = 51
Az eredmény: rgb(255, 87, 51), egy élénk narancsvörös.

RGB → HEX: most az rgb(30, 144, 255) értéket alakítjuk vissza.

Oszd el mindegyik számot 16-tal; a hányados az első jegy, a maradék a második:
- 30 = 1 × 16 + 14 → 1E
- 144 = 9 × 16 + 0 → 90
- 255 = 15 × 16 + 15 → FF
Írd egymás után: #1E90FF, egy világos kék.

Figyelj arra, hogy minden összetevő mindig két jegy legyen. A 10-es érték HEX-ben 0A, nem A, különben elcsúszik az egész kód.

Gyakori színek HEX és RGB kódja

Szín	HEX színkód	RGB
Fehér	`#FFFFFF`	255, 255, 255
Fekete	`#000000`	0, 0, 0
Vörös	`#FF0000`	255, 0, 0
Tiszta zöld	`#00FF00`	0, 255, 0
Kék	`#0000FF`	0, 0, 255
Szürke	`#808080`	128, 128, 128
Ezüst	`#C0C0C0`	192, 192, 192
Narancs	`#FFA500`	255, 165, 0
Lila	`#800080`	128, 0, 128

A szürke árnyalatoknál mindhárom összetevő egyenlő. Minél nagyobb a közös érték, annál világosabb a szürke.

Színkódok a CSS-ben: ugyanaz a szín többféle írásmóddal

A CSS ugyanazt a színt többféle alakban is elfogadja. Ezek mind ugyanazt a narancsvöröset jelentik:

Írásmód	Megjegyzés
`#FF5733`	HEX színkód, nagybetűvel
`#ff5733`	HEX, kisbetűvel, teljesen egyenértékű
`rgb(255, 87, 51)`	RGB, vesszővel elválasztva
`rgb(255 87 51)`	RGB, újabb, szóközös írásmód
`hsl(11, 100%, 60%)`	HSL, kerekítve, ezért a kód minimálisan eltérhet

A CSS-ben a színeket névvel is megadhatod, például red vagy orange. Itt van egy gyakori csapda: a green név nem a tiszta zöldet jelenti, hanem egy sötétebb árnyalatot (#008000, vagyis rgb(0, 128, 0)). A #00FF00 tiszta zöld neve a CSS-ben lime. Ha pontos színre van szükséged, mindig HEX vagy RGB kódot használj a név helyett.

Ha egy arculatban sok színnel dolgozol, érdemes a kódokat egy helyen, változóként tárolni, és mindenhol arra hivatkozni. Így ha egy szín változik, csak egyetlen helyen kell átírnod.

Mikor melyik formátumot használd?

HEX: a CSS-ben és a legtöbb tervezőprogramban ez a legrövidebb és legelterjedtebb. Arculati kézikönyvekben is szinte mindig így adják meg a színeket.
RGB / RGBA: akkor kényelmes, ha áttetszőséget állítasz be, például rgba(255, 87, 51, 0.5), vagy ha programból számolod a színt.
HSL: színárnyalat, telítettség és világosság. Akkor hasznos, ha egy szín világosabb vagy sötétebb változatát keresed. A #FF5733 például kerekítve hsl(11, 100%, 60%).

Gyakori hibák:

A képernyőn látott szín nyomtatásban más lesz. A nyomdák CMYK színekkel dolgoznak, ezért nyomtatott anyagnál kérd el a nyomdától a megfelelő értékeket.
Ugyanaz a kód két kijelzőn kicsit eltérően nézhet ki a kijelzők beállításai miatt. Ez nem a kód hibája.
Szövegnél a háttér és a betű színe között legyen elég kontraszt. Egy szép, de halvány szürke betű fehér háttéren nehezen olvasható.

Gyakori kérdések

Mi a különbség a HEX és az RGB színkód között?

Ugyanazt a színt írják le, csak más számrendszerben. A HEX hexadecimálisan, kétjegyű párokban adja meg a vörös, zöld és kék összetevőt, az RGB pedig 0 és 255 közötti tízes számrendszerbeli számokkal.

Hogyan váltok át HEX színkódot RGB-re fejben?

Bontsd a kódot három párra, és mindegyiknél az első jegyet szorozd 16-tal, majd add hozzá a másodikat. Az A–F betűk értéke 10–15.

Mit jelent a háromjegyű HEX-kód, például a #FFF?

Ez a rövid alak: minden jegy megduplázódik, így a #FFF ugyanaz, mint a #FFFFFF (fehér). A #0F8 például #00FF88-at jelent.

Hogyan adhatok áttetszőséget egy színnek?

Használj RGBA formát, például rgba(255, 87, 51, 0.5), vagy nyolcjegyű HEX-kódot, ahol az utolsó két jegy az átlátszatlanság. A 80 nagyjából 50%-nak felel meg.

Számít a kis- és nagybetű a HEX színkódban?

Nem, a #ff5733 és a #FF5733 ugyanaz a szín. Egy projekten belül érdemes egységesen az egyiket használni.

Miért más a kinyomtatott szín, mint a képernyőn?

A képernyő fénnyel, RGB alapon dolgozik, a nyomtatás festékkel, CMYK alapon. Nem minden képernyős szín nyomtatható ki pontosan, ezért nyomdai munkánál kérd el a nyomda által ajánlott értékeket.

Utoljára módosítva: 2026. november 3.

Színkód átváltó: HEX és RGB

Ezután ezt is megcsinálhatod