HEX, RGB, HSL: A webes színkódok megértése

Szerkesztesz egy weboldalt, és #FF5733 feliratot látsz a CSS-ben. Vagy egy tervezővel dolgozol, aki rgb(255, 87, 51) értéket küld. Vagy egy tervezőeszköz hsl(11, 100%, 60%) formátumban mutat egy színt. Ezek mind pontosan ugyanazt a színt írják le – egy élénk vörös-narancsat –, de három különböző formátumban.

Ha valaha is összezavarodtál a webes színkódok miatt, ez az útmutató öt perc alatt tisztázza a kérdést.

16,7MElérhető szín HEX-ben

3Általános színformátum

1996A CSS-szín-támogatás megjelenésének éve

Hogyan működnek a digitális színek?

A képernyőn minden szín három alapszín keverésével jön létre: Piros, Zöld és Kék. Ez az RGB-színmodell. Az egyes csatornák intenzitásának nullától (kikapcsolva) a maximumig (teljes fényerő) való változtatásával a standard kijelző által megjeleníthető körülbelül 16,7 millió szín bármelyike létrehozható.

Piros 255, Zöld 0, Kék 0 = tiszta piros
Piros 0, Zöld 255, Kék 0 = tiszta zöld
Piros 0, Zöld 0, Kék 255 = tiszta kék
Piros 255, Zöld 255, Kék 255 = fehér (minden csatorna tele)
Piros 0, Zöld 0, Kék 0 = fekete (minden csatorna üres)
Piros 255, Zöld 255, Kék 0 = sárga (piros + zöld)

A weben használt összes színformátum csak különböző módon fejezi ki ezeket a csatornaértékeket.

Tudtad? A 16,7 milliós szám csatornánként 256 szintből (0-255) ered három csatornán keresztül: 256 × 256 × 256 = 16 777 216 lehetséges szín.

HEX-színek

Hogyan néznek ki?

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Hogyan működnek?

A HEX-színkód egy hat karakteres karakterlánc, amelyet kettőskereszt-szimbólum előz meg. A hat karakter három párra oszlik, amelyek mindegyike hexadecimális (16-os alapú) számrendszerben egy színcsatornát jelöl:

Pár	Csatorna	Tartomány
Első két karakter	Piros	00-tól FF-ig
Középső két karakter	Zöld	00-tól FF-ig
Utolsó két karakter	Kék	00-tól FF-ig

A hexadecimális rendszer 0-9 számjegyeket és A-F betűket használ, ahol A=10, B=11, C=12, D=13, E=14, F=15. Tehát az FF hexadecimálisan 255-öt jelent decimálisan (15 × 16 + 15 = 255).

A #FF5733 részletezve:

FF = Piros 255-ön (maximum)
57 = Zöld 87-en
33 = Kék 51-en

Ez egy élénk vörös-narancssárga színt ad.

Rövidítés

Ha minden pár két azonos karakterből áll, háromkarakteres rövidítést használhatsz:

#FF0000 leírható így: #F00
#3366FF leírható így: #36F
#000000 leírható így: #000

Tipp A HEX-kódok a legelterjedtebb formátum a webfejlesztésben. Ha csak egy formátumot tanulsz meg, ezt tanuld meg.

RGB-színek

Hogyan néznek ki?

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Hogyan működnek?

Az RGB-jelölés közvetlenül adja meg a piros, zöld és kék csatornaértékeket 0-tól 255-ig terjedő decimális számokként. Ez a legintuitívabb formátum, mert a számok közvetlenül megfelelnek az egyes fénycsatornák intenzitásának.

Az rgb(255, 87, 51) azt jelenti:

Piros: 255 (maximum)
Zöld: 87 (körülbelül egyharmad)
Kék: 51 (körülbelül egyötöd)

RGBA: Átlátszóság hozzáadása

Az RGBA negyedik értéket ad az átlátszatlansághoz (alfa), 0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) között:

rgba(255, 87, 51, 0.5)   /* 50% átlátszó */
rgba(0, 0, 0, 0.8)        /* 80% átlátszatlan fekete */

Ez hasznos fedőrétegekhez, árnyékokhoz és bármilyen olyan tervezési elemhez, amelynek a mögötte lévő tartalmat kell megjelenítenie.

HSL-színek

Hogyan néznek ki?

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Hogyan működnek?

A HSL a Hue (árnyalat), Saturation (telítettség) és Lightness (világosság) rövidítése. A piros/zöld/kék csatornakeverés helyett a HSL úgy írja le a színt, ahogy az emberek természetesen gondolnak rá.

A Hue (árnyalat) maga a szín, a színkörön fokokban kifejezve (0-360):

0° / 360° = Piros
60° = Sárga
120° = Zöld
180° = Cián
240° = Kék
300° = Bíbor

A Saturation (telítettség) a szín élénksége, 0% (szürke) és 100% (teljesen telített) között.

A Lightness (világosság) a szín világos vagy sötét volta, 0% (fekete) és 100% (fehér) között. Az 50% a „normál" világosság.

A hsl(11, 100%, 60%) azt jelenti:

Árnyalat: 11° (enyhén narancsos piros)
Telítettség: 100% (teljesen élénk)
Világosság: 60% (enyhén világosabb a normálnál)

Tudtad? A HSL a tervező-barátság szempontjából a legbarátságosabb színformátum, mert illeszkedik ahhoz, ahogy a színeket természetesen írjuk le. „Legyen egy kicsit világosabb" azt jelenti: növeld az L értékét. „Legyen kevésbé élénk" azt jelenti: csökkentsd az S értékét. „Toldd kék felé" azt jelenti: változtasd meg a H értékét. HEX vagy RGB esetén ezek a módosítások egyszerre több érték megváltoztatását igénylik.

HSLA: Átlátszóság hozzáadása

Az RGBA-hoz hasonlóan az HSLA alfa-csatornát ad hozzá:

hsla(11, 100%, 60%, 0.5)   /* 50% átlátszó */

Melyik formátumot mikor érdemes használni?

Formátum	Legjobb ehhez	Előny
HEX	CSS stíluslapok, tervezési specifikációk	Tömör, általánosan ismert
RGB	Programozott szín-manipuláció	Intuitív csatornaértékek
HSL	Tervezési munka, színsémák létrehozása	Illeszkedik az emberi színészleléshez

Webfejlesztéshez

A HEX a de facto szabvány. A legtöbb CSS HEX-kódokkal készül, mert tömörek és minden fejlesztő ismeri őket.

Dizájnrendszerekhez

A HSL ideális konzisztens színpalettákat létrehozásához. A márka szín világosabb és sötétebb változatainak létrehozásához egyszerűen állítsd be a világossági értéket:

Elsődleges: hsl(210, 80%, 50%)
Világos változat: hsl(210, 80%, 70%)
Sötét változat: hsl(210, 80%, 30%)

Az árnyalat és a telítettség ugyanaz marad, garantálva, hogy a változatok ugyanolyan „színek" különböző fényességen.

Átlátszósághoz

Használj RGBA-t vagy HSLA-t, ha fedőrétegekhez, árnyékokhoz vagy üvegeffektekhez félig átlátszó színekre van szükséged.

Válassz egy színt

Válaszd a megfelelő formátumot

Konvertálj szükség esetén

Alkalmazd a projektben

Konvertálás a formátumok között

Gyakran kell konvertálni a formátumok között. Egy tervező HSL-értékeket küld, de a kódbázisod HEX-et használ. Egy arculati útmutató RGB-t ad meg, de neked HSL-re van szükséged a változatok létrehozásához.

A matematika egyszerű, de kézzel fárasztó. Egy konvertáló eszköz azonnal elvégzi.

Tipp Konvertálj HEX, RGB, HSL és más formátumok között: Hogyan konvertálj színkódokat. Add meg a színt bármelyik formátumban, és azonnal megkapod az összes többit.

Kezdj el dolgozni a színekkel:

Az összes eszköz ingyenes, és közvetlenül a böngésződben működik.

HEX, RGB, HSL: A webes színkódok megértése

Ha valaha is összezavarodtál a webes színkódok miatt, ez az útmutató öt perc alatt tisztázza a kérdést.

16,7MElérhető szín HEX-ben

3Általános színformátum

1996A CSS-szín-támogatás megjelenésének éve

Hogyan működnek a digitális színek?

Piros 255, Zöld 0, Kék 0 = tiszta piros
Piros 0, Zöld 255, Kék 0 = tiszta zöld
Piros 0, Zöld 0, Kék 255 = tiszta kék
Piros 255, Zöld 255, Kék 255 = fehér (minden csatorna tele)
Piros 0, Zöld 0, Kék 0 = fekete (minden csatorna üres)
Piros 255, Zöld 255, Kék 0 = sárga (piros + zöld)

A weben használt összes színformátum csak különböző módon fejezi ki ezeket a csatornaértékeket.

Tudtad? A 16,7 milliós szám csatornánként 256 szintből (0-255) ered három csatornán keresztül: 256 × 256 × 256 = 16 777 216 lehetséges szín.

HEX-színek

Hogyan néznek ki?

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Hogyan működnek?

Pár	Csatorna	Tartomány
Első két karakter	Piros	00-tól FF-ig
Középső két karakter	Zöld	00-tól FF-ig
Utolsó két karakter	Kék	00-tól FF-ig

A hexadecimális rendszer 0-9 számjegyeket és A-F betűket használ, ahol A=10, B=11, C=12, D=13, E=14, F=15. Tehát az FF hexadecimálisan 255-öt jelent decimálisan (15 × 16 + 15 = 255).

A #FF5733 részletezve:

FF = Piros 255-ön (maximum)
57 = Zöld 87-en
33 = Kék 51-en

Ez egy élénk vörös-narancssárga színt ad.

Rövidítés

Ha minden pár két azonos karakterből áll, háromkarakteres rövidítést használhatsz:

#FF0000 leírható így: #F00
#3366FF leírható így: #36F
#000000 leírható így: #000

Tipp A HEX-kódok a legelterjedtebb formátum a webfejlesztésben. Ha csak egy formátumot tanulsz meg, ezt tanuld meg.

RGB-színek

Hogyan néznek ki?

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Hogyan működnek?

Az rgb(255, 87, 51) azt jelenti:

Piros: 255 (maximum)
Zöld: 87 (körülbelül egyharmad)
Kék: 51 (körülbelül egyötöd)

RGBA: Átlátszóság hozzáadása

Az RGBA negyedik értéket ad az átlátszatlansághoz (alfa), 0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) között:

rgba(255, 87, 51, 0.5)   /* 50% átlátszó */
rgba(0, 0, 0, 0.8)        /* 80% átlátszatlan fekete */

Ez hasznos fedőrétegekhez, árnyékokhoz és bármilyen olyan tervezési elemhez, amelynek a mögötte lévő tartalmat kell megjelenítenie.

HSL-színek

Hogyan néznek ki?

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Hogyan működnek?

A Hue (árnyalat) maga a szín, a színkörön fokokban kifejezve (0-360):

0° / 360° = Piros
60° = Sárga
120° = Zöld
180° = Cián
240° = Kék
300° = Bíbor

A Saturation (telítettség) a szín élénksége, 0% (szürke) és 100% (teljesen telített) között.

A Lightness (világosság) a szín világos vagy sötét volta, 0% (fekete) és 100% (fehér) között. Az 50% a „normál" világosság.

A hsl(11, 100%, 60%) azt jelenti:

Árnyalat: 11° (enyhén narancsos piros)
Telítettség: 100% (teljesen élénk)
Világosság: 60% (enyhén világosabb a normálnál)

HSLA: Átlátszóság hozzáadása

Az RGBA-hoz hasonlóan az HSLA alfa-csatornát ad hozzá:

hsla(11, 100%, 60%, 0.5)   /* 50% átlátszó */

Melyik formátumot mikor érdemes használni?

Formátum	Legjobb ehhez	Előny
HEX	CSS stíluslapok, tervezési specifikációk	Tömör, általánosan ismert
RGB	Programozott szín-manipuláció	Intuitív csatornaértékek
HSL	Tervezési munka, színsémák létrehozása	Illeszkedik az emberi színészleléshez

Webfejlesztéshez

A HEX a de facto szabvány. A legtöbb CSS HEX-kódokkal készül, mert tömörek és minden fejlesztő ismeri őket.

Dizájnrendszerekhez

A HSL ideális konzisztens színpalettákat létrehozásához. A márka szín világosabb és sötétebb változatainak létrehozásához egyszerűen állítsd be a világossági értéket:

Elsődleges: hsl(210, 80%, 50%)
Világos változat: hsl(210, 80%, 70%)
Sötét változat: hsl(210, 80%, 30%)

Az árnyalat és a telítettség ugyanaz marad, garantálva, hogy a változatok ugyanolyan „színek" különböző fényességen.

Átlátszósághoz

Használj RGBA-t vagy HSLA-t, ha fedőrétegekhez, árnyékokhoz vagy üvegeffektekhez félig átlátszó színekre van szükséged.

Válassz egy színt

Válaszd a megfelelő formátumot

Konvertálj szükség esetén

Alkalmazd a projektben

Konvertálás a formátumok között

A matematika egyszerű, de kézzel fárasztó. Egy konvertáló eszköz azonnal elvégzi.

Tipp Konvertálj HEX, RGB, HSL és más formátumok között: Hogyan konvertálj színkódokat. Add meg a színt bármelyik formátumban, és azonnal megkapod az összes többit.

Kezdj el dolgozni a színekkel:

Az összes eszköz ingyenes, és közvetlenül a böngésződben működik.