HTML-ben hozhatjuk létre a weblapok szerkezeti vázát, címsorok, bekezdések, linkek struktúráját. Változatos, igényes honlapok készítésekor azonban az áttekinthetőségen túl egyéb szempontok – mint például a színek megválasztása – épp ilyen jelentősek lehetnek. 

A webprogramozás alapjairól korábban már írtunk, érdemes ezt a cikket is átfutnod, ha a HTML színkódokkal kapcsolatos alapokra vagy kíváncsi.

Ebben a bejegyzésben azokat a lehetőségeket járjuk végig, hogyan lehet színeket, árnyalatokat megadni a HTML kódban, sok-sok példával illusztrálva.

 

 

HTML színnevek – a HTML színkódok alapjai

Több millió különböző színárnyalat létezik, amit a modern böngészők meg tudnak jeleníteni. Ezeket mind elnevezni és számontartani lehetetlen volna, ezért az informatikában kódolással oldják meg a színek és árnyalatok pontos megadását. 

A HTML 140 sztenderd színnevet támogat, de színkódok megadásáva ezeken kívül is bármilyen árnyalatot megjeleníthetünk a készülő honlapon. Az előre kódolt színeket elég az őket specifikusan leíró színnévvel megadnunk (aqua, black, yellowgreen, hotpink stb.), nem kell a hozzá kikeresnünk a specifikus kódot, ami pontosan definiálja az adott színt.

Többféle kódolási rendszer létezik a színek megadására, melyek különböző komponensek (alapszínek) arányát és paraméterek (pl. áttetszőség, telítettség) mértékét tartalmazzák. Ebben a cikkben a legtöbbet használt, hexadecimális kódolási rendszert mutatjuk be részletesebben, a többi lehetőségről érintőlegesen teszünk említést. 

HTML színkódokkal szinte végtelen változatosságot hozhatunk létre

HTML színkódokkal szinte végtelen változatosságot hozhatunk létre

Színválasztók és színkeverés

Egy-egy szín kódját a különböző színválasztó (color picker) eszközök segítségével lehet megtalálni. 

Néhány példa színválasztókra: 

Minden, a szemünk által érzékelhető szín alapszínek bizonyos arányú keveréke. Az informatikában a piros, a zöld és a kék (red, green, blue, vagyis RGB)  alapszínek keverésével jelenítődnek meg a különböző árnyalatok. 

(A színtanban egyébként a piros a sárga és a kék az alapszínek, az, hogy az informatikában nem ezeket a komponenseket adjuk meg, a monitorok bizonyos tulajdonságai miatt alakult így.)

Hexadecimális színkód 

A lehetséges megoldások közül hexadecimálisan – 16-os számrendszerben – kódolhatunk a legtömörebben, ez a legelterjedtebb forma HTML szerkesztéskor.

A színkód elé # karakter kerül, ezután hatjegyű karaktersort adunk meg: számjegyek (0-9) és betűk (a-f) meghatározott kombinációjával definiáljuk a pontos színt. A hatjegyű kód első két jegye a piros (RR), második két jegye a zöld (GG), a harmadik kettő pedig a kék (BB) szín értékét határozza meg. 

Például: #eb4034

A szürke különböző árnyalatai azonos arányban tartalmazzák az egyes komponenseket. 

Pl:

#404040

#bebebe

A fekete szín minden karaktere 0 

#000000

A fehér szín minden komponensből a legmagasabb értéket tartalmazza

#ffffff

Tömörebb hexadecimális érték

Ilyen és hasonló esetekben még tömörebb írásmódot is alkalmazhatunk: olyan színeknél, ahol az adott komponensre vonatkozó két karakter ugyanaz, ott írhatjuk 3 számjeggyel is a színkódot, automatikusan kettőzve azonosítja a rendszer. 

A #000 ugyanúgy a fehér színt definiálja, mint a #000000, a #0ff ugyanazt a türkiz árnyalatot hozza létre, amit a #00ffff. 

A #cc2244 színkód tömörebb formája a #c24

 

 

Hova kerül a HTML színkód?

A színeket attribútumok formájában adjuk meg, azon a tagen belül, amire vonatkozni fog. Az egész oldal háttérszínét a <body> tagen belül határozzuk meg, a fő címsor színe pedig a <h1> tagen belül lesz, stb. 

Attribútumok:

A <body> tagen belül ‘text’ attribútummal adhatjuk meg a szöveg színére, ‘bgcolor’-ral a háttér színére vonatkozó információt.  A <font> tagen belül a ‘color’ attribútum használatával állítható be szín.

A HTML-ben lehetőségünk van bármelyik elemnél a <style> taget használni, amivel felülírhatunk bármilyen globálisan megadott – formázásra, stílusra, színre – vonatkozó információt, az adott helyen, ahol más megjelenést szeretnénk látni. 

További lehetséges színkódolási formák

RGB, RGBA

A piros, zöld és kék színek arányát nem csak hexadecimális formában adhatjuk meg, de egy-egy 0-255-ig terjedő értékkel is jelölhetjük. Ilyenkor a text, bgcolor stb. attribútumok után rgb(192,192,192) formában kerül a kódba a színre vonatkozó utasítás. 

Az RGBA kódolásnál az alapszínek értéke kiegészül még egy komponessel, ami az áttetszőségre utal, ez az Alpha Channel. Az alpha paraméter egy szám 0.0 (teljesen áttetsző) és 1.0 (egyáltalán nem áttetsző) között. Ebben az esetben a színre vonatkozó információ a következőképp néz ki:  rgba(255, 99, 71, 0.5)

HSL, HSLA

HTML-ben definiálhatjuk a színt a színárnyalat telítettség és világosság megadásával is, (hue, saturation, lightness – HSL). Az árnyalat értéke a színkörön való elhelyezkedésből származik, így fokban fejezzük ki. 

A telítettség egy százalékos érték, a 0% egy szürke árnyalatot definiál, a 100% a teljes szín. A világosság szintén százalékban kifejezett érték, a 0% a fekete, a 100% a fehér szín. Egy HSL színkód a következőképp néz ki:

hsl(36, 100%, 50%)

Szintén kiegészülhet alpha értékkel, ami az áttetszőségre utal. 

Érdemes kipróbálni a különböző színválasztókat és színkódolási formákat és megtalálni azt, ami a célnak leginkább megfelel, illetve amivel a leggördülékenyebben tudsz dolgozni. Kis gyakorlással te is könnyedén fogsz szebbnél-szebb színeket beállítani készülő weblapodon.

 

 

A CodeBerry Programozóiskola “Programozási oktatóanyagok” sorozatában olyan kiegészítő tananyagokat találsz az egyes programnyelvekhez, melyek segítségével gyorsan és egyszerűen sajátíthatod el a programozás alapjait.

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!