> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/szinek-szinrendszerek.md).

# Színek, színrendszerek

## Hexadecimális - **#rrggbb**

RGB szín, 256^3 bit mélységben, amit színenként egy két helyi értékű 16 számrendszerben kifejezett szám ad meg. (16\*16=256)

```css
#000000; /* Fekete */
#808080; /* 50%-os szürke */
#ffffff; /* Fehér */


#ff0000; /* Vörös */
#00ff00; /* Zöld */
#0000ff; /* Kék */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcZf99wMTCI89OphavI%2F-LcZfFENn-LrFxQg75m6%2Frgb-colors.png?alt=media\&token=56f81abb-cef2-4cf4-9d69-d748d07725af)

## Hexadecimális rövid - #rgb

Mint a hexadecimális, csak kevesebb árnyalatot tartalmaz, 256^3 helyett csak\
16^3 eltérő árnyalatot lehet kifejezni vele. Hexadecimális színek közül azokat, amelyeknél egy szín két helyi értéke egyezik.

**#000000 = #000**\
**#777777 = #777**\
**#112233 = #123**\
**#ffffff = #fff**

## RGB színek **- rgb(r, g, b)**

Megadhatjuk a színeket direkt rgb értékük alapján, vagy egy 0-255 ig terjedő számmal, vagy százalékosan is.

```css
rgb(0, 0, 0) /* Fekete */
rgb(128, 128, 128) /* 50%-os szürke */
rgb(255, 255, 255) /* Fehér */

rgb(255, 0, 0)  /* Vörös */
rgb(0, 255, 0)  /* Zöld */
rgb(0, 0, 255)  /* Kék */

rgb(53%, 76%, 29%) /* Százalékos rgb */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcZhtTxeGinVqBqxThn%2F-LcZhyOEacQyrKAPqQBj%2Frgb-colors2.png?alt=media\&token=d05cee9b-e6f9-4a37-bbed-963da7f08689)

## RGBA színek **- rgba(r, g, b, a)**

Hasonló mint az RGB, de itt van egy alfa csatorna is, ami meghatározza a szín átlátszóságát, az alfa csatorna értéke egy 0 és egy közötti szám, tört érték esetén részleges az átlátszóság.

```css
rgba(0, 255, 0, 0.1)  /* 10%-ban átlátszatlan zöld */
rgba(0, 255, 0, 0.5)  /* 50%-ban átlátszatlan zöld */
rgba(0, 255, 0, 0.9)  /* 90%-ban átlátszatlan zöld */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcbQHmIE7gx7WhIkpux%2F-LcbQVfkXBoZXEIAdIhV%2Frgba-colors.png?alt=media\&token=46b68a38-c2c3-44b7-99ad-ba6056eb8423)

## HSL színek **- hsl(h, s, l)**

HSL (Színezet telítettség fényesség) alapú színrendszer, az első értéke 0 -től 360 -ig terjedő szög érték, ami a HSL színkörön jelöl ki egy színt, második értéke a telítettség, harmadik a világosság, ez a kettő százalékos.

![HSL színkör, minden színárnyalathoz tartozik egy konkrét 0-tól 360-ig terjedő szög érték.](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LOKFbE7sQK_e0CK2tzV%2F-LOJpIJl6lv_a2MLTJ8H%2Fcolor_wheel_hsl.png?alt=media\&token=053fbe19-aa81-42d9-8ea6-5a4e5dab5766)

```css
hsl(0, 0%, 0%) /* Fekete */
hsl(0, 0%, 50%) /* 50%-os szürke */
hsl(0, 0%, 100%) /* Fehér */

hsl(0, 100%, 50%)  /* Vörös */
hsl(120, 100%, 50%)  /* Zöld */
hsl(240, 100%, 50%)  /* Kék */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcZhtTxeGinVqBqxThn%2F-LcZizehvM-bF-2cAktj%2Fhsl-colors.png?alt=media\&token=46e5079e-b2c3-463e-a5d7-e41cb88e98bb)

![HSL színrendszer egy lehetséges modellje,  a színgömb.](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0DaQhbm--EFEGTQqSn%2F-M0DcLmWV24GAxEFpg2K%2Fhsl-color-globe.png?alt=media\&token=6b22b07a-7077-4828-a735-cf07c1d41722)

## HSLA színek **- hsla(h, s, l, a)**

Itt is van alfa csatorna mint az RGBA esetében.

```css
hsla(120, 255%, 50%, 0.1)  /* 10%-ban átlátszatlan zöld */
hsla(120, 255%, 50%, 0.5)  /* 50%-ban átlátszatlan zöld */
hsla(120, 255%, 50%, 0.9)  /* 90%-ban átlátszatlan zöld */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcbQZbebqZcM32v73oa%2F-LcbRFGyWiqeglofv_jU%2Fhsla-colors.png?alt=media\&token=4f7af2c4-28f0-4c81-8e3b-bfa52b6b11ca)

## Kulcsszavas színek

Színeket megadhatunk a nevük alapján is, kulcsszavas formában. A modern böngészők 140 kulcsszavas színt támogatnak.

```css
black /* Fekete */
gray /* 50%-os szürke */
white /* Fehér */

red  /* Vörös */
lime  /* Zöld */
blue  /* Kék */
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LcZhtTxeGinVqBqxThn%2F-LcZkzwfYPSo_Bf64pry%2Fnamed-colors.png?alt=media\&token=18f19497-a435-4d8c-af48-17f8f3f2d11f)

## Átlátszó

A transparent (átlátszó) kulcsszóval adhatunk meg (teljesen) átlátszó színt.

```css
transparent
```