Szürke-kék színkód. A stílusok színe többféleképpen állítható be: hexadecimális értékkel, név szerint, RGB, RGBA, HSL, HSLA formátumban

Szürke-kék színkód. A stílusok színe többféleképpen állítható be: hexadecimális értékkel, név szerint, RGB, RGBA, HSL, HSLA formátumban
Szürke-kék színkód. A stílusok színe többféleképpen állítható be: hexadecimális értékkel, név szerint, RGB, RGBA, HSL, HSLA formátumban
30.09.2019

A színek megadására hexadecimális számokat használunk. A hexadecimális rendszer, a decimális rendszertől eltérően, ahogy a neve is sugallja, a 16-os számon alapul. A számok a következők lesznek: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. A 10 és 15 közötti számokat latin betűk helyettesítik. 15 hüvelyknél nagyobb számok hexadecimális rendszer két szám egyesítésével jött létre. Például a 255 decimális szám megfelel a hexadecimális FF számnak. A számrendszer meghatározása során a félreértés elkerülése érdekében a hexadecimális számot a # hash szimbólum előzi meg, például #666999. A három szín – piros, zöld és kék – mindegyike 00 és FF közötti értéket vehet fel. Így a szín megjelölése három komponensre oszlik #rrggbb, ahol az első két karakter a szín piros összetevőjét jelöli, a két középső a zöldet, az utolsó kettő pedig a kéket. Megengedett a #rgb rövidített alak használata, ahol minden karaktert meg kell duplázni. Így a #fe0 bejegyzést #ffee00-nak kell tekinteni.

név szerint

internet böngésző Króm Opera szafari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

A böngészők egyes színeket név szerint támogatnak. táblázatban. 1 mutatja a neveket, a hexadecimális kódot, az értékeket RGB formátum, HSL és leírás.

Tab. 1. Színnevek
Név Szín Kód RGB HSL Leírás
fehér #fffff vagy #ffff rgb(255 255 255) hsl (0,0%, 100%) fehér
ezüst #c0c0c0 rgb(192;192,192) HSL (0,0%, 75%) Szürke
szürke #808080 rgb(128.128.128) hsl (0,0%, 50%) Sötétszürke
fekete #000000 vagy #000 rgb(0;0;0) hsl(0,0%,0%) Fekete
gesztenyebarna #800000 rgb(128;0;0) hsl(0,100%,25%) Sötét vörös
piros #ff0000 vagy #f00 rgb(255;0;0) hsl(0,100%,50%) Piros
narancs #ffa500 rgb(255;165;0) HSL(38,8,100%,50%) narancs
sárga #ffff00 vagy #ff0 rgb(255;255;0) HSL(60,100%,50%) Sárga
olajbogyó #808000 rgb(128;128;0) HSL (60 100%, 25%) Olajbogyó
mész #00ff00 vagy #0f0 rgb(0;255;0) hsl(120,100%,50%) világos zöld
zöld #008000 rgb(0;128;0) HSL (120 100%, 25%) Zöld
aqua #00ffff vagy #0ffff rgb(0,255,255) hsl(180,100%,50%) Kék
kék #0000ff vagy #00f rgb(0;0;255) HSL(240,100%,50%) Kék
haditengerészet #000080 rgb(0;0;128) HSL (240 100%, 25%) Sötétkék
a zöldeskék #008080 rgb(0,128,128) HSL(180100%,25%) kékeszöld
fukszia #ff00ff vagy #f0f rgb(255;0;255) hsl(300,100%,50%) Rózsaszín
lila #800080 rgb(128;0;128) hsl(300,100%,25%) Ibolya

RGB-vel

internet böngésző Króm Opera szafari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

A színt a vörös, zöld és kék tizedesjegyek használatával határozhatja meg. A három színösszetevő mindegyike 0 és 255 közötti értéket vesz fel. Elfogadható a szín százalékos megadása is, míg a 100% a 255-ös számnak felel meg. Először az rgb kulcsszót kell megadni, majd a színösszetevőket zárójelben megadva, vesszővel elválasztva, például rgb(255 , 128, 128) vagy rgb(100%, 50%, 50%).

RGBA

internet böngésző Króm Opera szafari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Az RGBA formátum szintaxisában hasonló az RGB-hez, de tartalmaz egy alfa-csatornát, amely beállítja az elem átlátszóságát. A 0 érték teljesen átlátszó, az 1 átlátszatlan, a közbülső érték, például a 0,5 pedig áttetsző.

Az RGBA hozzáadva a CSS3-hoz, így a CSS kód érvényesítését ennek a verziónak megfelelően kell elvégezni. Megjegyzendő, hogy a CSS3 szabvány még fejlesztés alatt áll, és egyes funkciói változhatnak. Például a background-color tulajdonsághoz hozzáadott RGB-szín átmegy az ellenőrzésen, de a háttértulajdonsághoz hozzáadott nem. Ugyanakkor a böngészők pontosan megértik mindkét tulajdonság színét.

HSL

internet böngésző Króm Opera szafari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

A HSL formátum neve a Hue (árnyalat), Saturate (telítettség) és Lightness (lightness) kezdőbetűk kombinációjából adódik. A színárnyalat a színkörön lévő színérték (1. ábra), és fokokban van megadva. A 0° piros, 120° zöld és 240° kék. A színárnyalat értéke 0 és 359 között változhat.

Rizs. 1. Színkör

A telítettség a szín intenzitása, százalékban mérve 0% és 100% között. A 0% érték a szín hiányát és a szürke árnyalatát jelzi, a 100% a maximális telítettségi érték.

A világosság beállítja a szín fényerejét, és 0% és 100% között van megadva. A kis értékek sötétebbé teszik a színt, míg a magas értékek világosabbá teszik, az extrém 0% és 100% értékek a fekete-fehérnek felelnek meg.

HSLA

internet böngésző Króm Opera szafari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

A HSLA formátum szintaxisában hasonló a HSL-hez, de tartalmaz egy alfa-csatornát, amely beállítja az elem átlátszóságát. A 0 érték teljesen átlátszó, az 1 átlátszatlan, a közbülső érték, például a 0,5 pedig áttetsző.

Az RGBA, HSL és HSLA formátumú színértékek hozzáadódnak a CSS3-hoz, ezért ha ezeket a formátumokat használja, ellenőrizze a kód érvényességét a verzióhoz képest.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Színek

Figyelem

Az oroszlánfogás minden, az oldalon felsorolt ​​módszere elméleti és számítási módszereken alapul. A szerzők nem garantálják az Ön biztonságát használatuk során, és kizárnak semmilyen felelősséget az eredményekért. Ne feledje, az oroszlán ragadozó és veszélyes állat!

Arrrgh!

Ennek a példának az eredménye az ábrán látható. 2.

Rizs. 2. Színek a weboldalon

2015.02.26. 8,9K

Mint tudják, a szín befolyásolhatja az ember állapotát: mind a mentális, mind a fizikai. Az interneten böngészve a szem minden nap több millió színt és árnyalatot értékel. A színpszichológiában jártas webdesigner képes irányítani a látogató hangulatát bármilyen cél elérése érdekében.

Ez annak a ténynek köszönhető, hogy egyes árnyalatok megnyugtatnak, mások pedig éppen ellenkezőleg, izgatnak. Ezután arról fogunk beszélni, hogyan szintetizálják és jelenítik meg a színeket számítógépes technológia segítségével.

Az RGB egy színmodell, amely az összes szín és árnyalatai elérésének módszerét képviseli a három fő összetevő különböző arányú keverésével, amelyek a következők:

  • Piros szín ( Piros);
  • zöld szín ( Zöld);
  • kék szín ( Kék).

Innen származik az RGB rövidített elnevezés. Ezeket a színeket okkal választották fő színnek: ennek oka az emberi szem retinájának fiziológiája, és az, hogy hogyan érzékeli őket:


Az RGB modell ma is a legnépszerűbb, és a TV-képernyők és a számítógép-monitorok színeinek reprodukálására szolgál. Mivel a gyártók ruházzák fel termékeiket különböző jellemzők, 1996-ban alakult egy rendszer Az sRGB nevű RGB alapú színszintézis, amelyet a Microsoft és a HP közösen fejlesztett ki.

Numerikus színábrázolás

Mint korábban említettük, az RGB színek az elsődleges színek keverésével jönnek létre. Mindegyikük intenzitásának leírására egy sémát fogadtak el, amelyben a színt a 0-255 (8 bit) tartomány képviseli, ami hexadecimálisan 00-FF-nek felel meg.

Vagyis az elsődleges színek így fognak kinézni:

  • Piros - RGB (255.0.0);
  • zöld - RGB (0,255,0);
  • kék - RGB (0,0,255);

Ha a színintenzitás értéke 255-nél kisebb, akkor a vörös, zöld és kék különböző árnyalatait kapjuk. Az alábbiakban egy táblázat látható ezek fokozatosságáról, valamint az egyes árnyalatok hexadecimális értékei:

RGB színtáblázatok

Természetesen az alapszínek gradációi mellett vannak vegyesek is, és számuk meglehetősen nagy. Ezért elkészült az RGB színek táblázata, amelyben az összes létező árnyalat megjelenik, valamint azok nevei és numerikus ábrázolásai ( decimális és hexadecimális formában).

Itt ismerkedhetsz meg vele. Ez a táblázat nagyban megkönnyíti a webdesignerek életét, mert néhány másodperc alatt megtalálhatja a kívánt árnyalatot és megtudhatja annak numerikus ábrázolását.

Biztonságos RGB színpaletta

Azonban valamikor problémát jelentett a színek megjelenítése a különböző böngészőkben, ennek megoldására összeállították az úgynevezett "biztonságos" RGB színpalettát, amelyet matematikai számításokkal vezettek le.

Ha a böngésző nem tud megfelelően megjeleníteni egy színt, akkor a szomszédos színek keverésével megpróbálja megközelíteni a kívánt színt, és az eredmény valószínűleg teljesen elfogadhatatlan:

Az ebből a palettából származó RGB színkódok használatával a webfejlesztők nyugodt szívvel jeleníthetik meg a színeket webhelyük oldalain, amikor különböző böngészők, platformok és monitorok használatával nézik. Bár tovább Ebben a pillanatban a biztonságos színek táblázata elveszti jelentőségét ( a technológiai fejlődés nem áll meg), használatával, ahogy mondani szokás, nyugodtan aludhatsz.

Arany szín RGB modellben

Az "arany" szót először a XIV. század elején használták a szín leírására kémiai elemúgynevezett Aurum - arany. Az RGB modellben az arany színt a következő számértékek képviselik:

  • RGB (255, 215, 0) - decimális rendszer;
  • HEX #FFD700 - hexadecimális rendszer.

Bézs szín RGB modellben

A bézsnek meglehetősen jelentős helye van a történelemben, még ha nem is a legkifejezőbb. Számos kulturális emlék, különösen az antik szobrok, steatitból és szappankőből készültek, amelyek bézs árnyalatúak. Az RGB modellben a bézs színnek a következő numerikus ábrázolásai vannak.

A CSS színe többféleképpen állítható be:

Állítsa be a színt név szerint

A böngészők támogatják az elemek bizonyos színeinek név szerinti megadását. Ebben a táblázatban néhány kulcsszó (angol színnevek) a színtulajdonságok, az RGB-kód, a hexa kód (HEX) és a HSL-kód beállítására szolgál.

Tab. 1. A színek nevei, azok RGB, HEX és HSL kódja.
Név Szín RGB HEX HSL Leírás
fehér rgb(255, 255, 255) #fffff vagy #ffff hsl(0, 0%, 100%) fehér
ezüst rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Szürke
szürke rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Sötétszürke
fekete rgb(0; 0; 0) #000000 vagy #000 hsl(0, 0%, 0%) Fekete
gesztenyebarna rgb(128; 0; 0) #800000 hsl(0, 100%, 25%) Sötét vörös
piros rgb(255; 0; 0) #ff0000 vagy #f00 hsl(0, 100%, 50%) Piros
narancs rgb(255; 165; 0) #ffa500 HSL(38,8, 100%, 50%) narancs
sárga rgb(255; 255; 0) #ffff00 vagy #ff0 hsl(60, 100%, 50%) Sárga
olajbogyó rgb(128; 128; 0) #808000 hsl(60, 100%, 25%) Olajbogyó
mész rgb(0; 255; 0) #00ff00 vagy #0f0 hsl(120, 100%, 50%) világos zöld
zöld rgb(0; 128; 0) #008000 hsl(120, 100%, 25%) Zöld
aqua rgb(0; 255; 255) #00ffff vagy #0ffff hsl(180, 100%, 50%) Kék
kék rgb(0; 0; 255) #0000ff vagy #00f hsl(240, 100%, 50%) Kék
haditengerészet rgb(0;0;128) #000080 HSL(240, 100%, 25%) Sötétkék
a zöldeskék rgb(0; 128; 128) #008080 hsl(180, 100%, 25%) kékeszöld
fukszia rgb(255; 0; 255) #ff00ff vagy #f0f hsl(300, 100%, 50%) Rózsaszín
lila rgb(128; 0; 128) #800080 hsl(300, 100%, 25%) Ibolya

Ez egy példa a színnevek használatára, a színnevek a kiterjesztett táblázatból származnak.

RGB-ből CSS-be

Közepes türkiz
barna
karmazsinvörös
kék ibolya
szerepléltdrab

Ez a kód így működik:

Színbeállítás RGB-vel

Az RGB egy additív színmodell. Tovább angol nyelv kiegészítés- kiegészítés. Az RGB az angol szavak rövidítése: Red, Green, Blue - piros, zöld, kék). Ebből jól látható, hogy az RGB modellben a színeket három szín (piros, zöld, kék) különböző mennyiségben történő hozzáadásával szintetizálják.

A piros, zöld és kék színek keverésével több millió árnyalatot kaphatunk. Az összes lehetséges kombináció a számítógép memóriájában tárolódik.

Térjen a tárgyra.

A tulajdonságok beállításához ebben a formátumban az rgb(r, g, b) jelölést használjuk, ahol r, g, b az egyes színekhez tartozó három csatorna (piros, zöld, kék). Az egyes csatornák értékei 0 és 255 közötti tartományban vannak beállítva.

Kódpélda.

Hogy minden világos legyen, adok egy példakódot:

RGB-ből CSS-be

rgb(255; 0; 0)
rgb(0; 255; 0)
rgb(0; 0; 255)

Ennek a példának így kell működnie:

1. ábra. Színek RGB-ben.

Magyarázatok például.

Az oldal elején létrehozzuk a div.rgb osztályt, arra van szükség, hogy a tag által létrehozott blokkok

a megfelelő méretben jelenik meg: 240 x 40 képpont . A line-height tulajdonsághoz (sor magasság) a - 40px értéket rendeljük, azaz egyenlő a blokk magasságával, ez lehetővé teszi a szöveg megjelenítését a blokkban
a függőleges közepén. vízszintesen középre kell helyezni a szöveget a szabály segítségével ( szövegigazítás : középre ;).

Ezután az általunk beállított kódban háttérszín Blokk

használja a style attribútumot a háttértulajdonság használatával, és értékeket rendel hozzá az rgb(255, 0, 0) , rgb(0, 255, 0) és rgb(0, 0, 255) paraméterekhez. Vagyis felváltva az egyik csatornát a lehető legtelítettebbé tesszük, és a többi csatornát nem használjuk szintézishez, mivel értékük nulla.

Próbálja meg szerkeszteni ezt a példát úgy, hogy belefoglalja saját értékeit, például az rgb(100, 100, 100) .

Színbeállítás RGBA-val

A CSS3 bemutatott egy új eszközt a színekkel való munkavégzéshez - az RGBA formátumot. Az RGB modell evolúciójának nevezhető, de egy új csatorna hozzáadásával - A vagy alfa csatorna. Ez a csatorna állítja be a szín átlátszóságát. Értékei 0 és 1 közötti tartományban vannak beállítva. A 0-val egyenlő érték a teljes átlátszóságnak, az 1-es a teljes átlátszatlanságnak (a szín megegyezik az első három RGB csatornában beállított színnel) és a közbenső értékeknek felel meg. , például 0,4 vagy 0,6 - áttetszőség különböző mértékben.

Kódpélda.

RGBA - CSS3

Így fog működni:

Ez a kód vizuálisan hasonlít a következőhöz, amely az RGB modellt használja a színérték beállításához:

RGBA - CSS3

Íme az eredménye:

Az alfa-csatorna nullával egyenlő értéke láthatatlanná tesz minden színt – abszolút átlátszóvá, az eggyel egyenlő érték változtatás nélkül lefordítja az RGB-kód színét. Az rgba(255,0,0,1.0) tulajdonság a piros színt mutatja rgb(255, 0, 0) .

Hexadecimális érték szerint (HEX kód)

A mindennapi életben a tizedes számrendszert használjuk. Eredete nagyon egyszerű - tíz ujjunk van a kezünkön, és az életben kényelmes volt az ujjakon számolni. Ha a decimális rendszerben tíz számjegy van: 0-tól 9-ig, és a 10 a következő számjegy, akkor a hexadecimális számrendszerben 16 számjegy van, és a következő számjegy a 16 lesz.

A színkódok jelzésére a 0-tól 9-ig terjedő közönséges decimális számjegyeket hexadecimális számjegyként, az A-tól F-ig tartó latin betűket pedig a 10-től 15-ig terjedő számok jelzésére, azaz (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Az érthetőség kedvéért foglaljuk össze egy táblázatban:

F-nél (15 decimális) nagyobb hexadecimális számok írásához, mint a decimális rendszerben, szintén két számjegy unióját használják, de már hexadecimális, ami nyilvánvaló. Tehát a 255 decimális szám hexadecimálisan írásához az FF jelölést használjuk.

A hexadecimális rendszer érthetőbb a számítógép számára, gyorsabban dolgozza fel a hexadecimális érték által adott értékeket.

A szín hexadecimális rendszerben történő megadásához tegyen a számérték elé egy "#" jelet, például: #FFC0CB . Maga az #FFC0CB érték három hexadecimális számjegyből áll: FF , C0 és CB . Ennek a bejegyzésnek a jelentése megegyezik a szín RGB formátumban történő beállításával (rgb(r, g, b) ) - a HEX kód minden hexadecimális számjegye jelzi a színtelítettséget az RGB modellcsatornájában.

HEX kód a CSS-ben

#FF0000
#00FF00
#0000FF

Ez a kód a következő elemeket jeleníti meg:

És itt van egy kép a fenti oldalon található "Szín beállítása RGB-vel" szakaszból.

1. ábra. Színek RGB-ben.

Látjuk, hogy a színek azonosak.

A HEX színkód rövidített jelölése megengedett: 6 jegyű szám 3 jegyű számként írható fel. Ez csak akkor érvényes, ha ugyanazon csatorna színértékének két számjegye ismétlődik.

Vagyis a következő rövidítés elfogadható:

Például a #ff22aa szín #f2a , a #44aa22 szín pedig #4a2 .

Színbeállítás HSL-lel

A CSS3 új formátummal rendelkezik a színek meghatározásához.

A HSL formátum az angol szavak rövidítése: Hue (színárnyalat), Saturate (telítettség) és Lightness (lightness).

A Hue a HSL-ben egy színérték egy speciális színkörön (2. ábra), és fokokban van megadva. Ha analógiákat vonunk le az RGB modellel, akkor a 0° a pirosnak, a 120° a zöldnek, a 240° pedig a kéknek felel meg.

A színárnyalat értéke 0-ról 359-re változik.


2. ábra HSL színkör.

A második érték - telítettség (Saturate) százalékban van beállítva. 100%-os telítettségnél a szín a lehető leg "lédúsabb", mivel a telítettség jelző 0% felé halad, a szín egyre tompább lesz és szürkére gurul.

A harmadik érték - világosság (Lightness) szintén százalékban van beállítva. Minél magasabb ez a százalék, annál világosabb lesz a szín. A 0% és 100% szélső értékek a fekete (fényhiány) és a fehér (exponált) színeket jelzik, és nem számít, hogy a színkörből melyik színt választották ki az első csatornában. Az optimális értéknek az 50%-os színfényerőt tekinthetjük.

Színbeállítás HSLA-val

A HSLA formátum a HSL-hez kapcsolódik, csakúgy, mint az RGB az RGBA-hoz. BAN BEN HSL formátum A, mint az RGBA-ban, egy alfa-csatorna is hozzáadásra kerül, amely a színek átlátszóságáért felelős.

A HSL formátumban megadott szín könnyebben olvasható. Mondhatjuk, hogy intuitív. Például a hsl(120,60%,50%) kód képviselheti a végső színt, ha a HSL színkerékről van kép a memóriában. Az RGB és HEX formátumokról ez nem mondható el, az ezekben a formátumokban megadott színkódok csak a monitoron való megjelenítés után derülnek ki.

A CSS3 új formátumai (HSL, HSLA és RGBA) a következő verziók óta működnek a böngészőkben: IE 9.0, Opera 10.0 Firefox 3.0. Hogyan lehet stílusokat működni régebbi böngészőkön?

Someblock ( háttérszín: rgb(255,50,50); háttérszín: rgba(255,50,50,0,85) )

Ha ezt a kódot használja régebbi böngészőkben, a .somebloсk osztály háttérszíne, bár nem használ alfa csatornát, RGB formátumban jelenik meg.

A CSS-ben található színkódok a színek meghatározására szolgálnak. A színkódokat vagy színértékeket általában egy elem előterének (pl. szöveg, hivatkozás színe) vagy egy elem hátterének (háttér, blokkszín) színének beállítására használják. Használhatók a gombok színének, szegélyeinek, jelölőjének, lebegésének és egyéb dekoratív effektusainak megváltoztatására is.

Különféle formátumokban állíthatja be színértékeit. Az alábbi táblázat felsorolja az összes lehetséges formátumot:

Ezeket a formátumokat az alábbiakban részletesebben ismertetjük.

CSS színek – hexadecimális kódok

Hexadecimális színkód egy hatjegyű színábrázolás. Az első két számjegy (RR) a piros érték, a következő kettő a zöld érték (GG), az utolsó kettő pedig a kék érték (BB).

CSS színek – Rövid hexadecimális kódok

Rövid hexadecimális színkód a hatkarakteres jelölés rövidebb formája. Ebben a formátumban minden számjegy megismétlődik, hogy az egyenértékű hatjegyű színértéket kapja. Például: #0F0 #00FF00 lesz.

A hexadecimális érték bármilyen grafikáról vehető szoftver, mint például Adobe Photoshop, Core Draw stb.

A CSS-ben minden hexadecimális színkódot egy "#" hash jel előz meg. Az alábbiakban példákat mutatunk be a hexadecimális jelölés használatára.

CSS színek – RGB értékek

RGB érték egy színkód, amely az rgb() tulajdonsággal van beállítva. Ez a tulajdonság három értéket vesz fel: egy-egy piros, zöld és kék értéket. Az érték lehet egész szám, 0 és 255 között, vagy százalék.

Jegyzet: Nem minden böngésző támogatja az rgb() color tulajdonságot, ezért ennek használata nem javasolt.

Az alábbiakban több színt mutatunk be RGB-értékek használatával.

Színkód generátor

Szolgáltatásunkkal több millió színkódot hozhat létre.

Biztonságos böngésző színei

Az alábbiakban egy 216 színt tartalmazó táblázat található, amelyek a legbiztonságosabbak és a számítógéptől függetlenek. Ezek a színek a CSS-ben 000000-től FFFFFF hexadecimális kódig terjednek. Használatuk biztonságos, mivel biztosítják, hogy minden számítógép helyesen jelenítse meg a színeket, amikor a 256-os színpalettával dolgozik.

A "biztonságos" színek táblázata a CSS-ben
#000000 #000033 #000066 #000099 #0000CC#0000FF
#003300 #003333 #003366 #003399 #0033CC#0033FF
#006600 #006633 #006666 #006699 #0066CC#0066FF
#009900 #009933 #009966 #009999 #0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000 #330033 #330066 #330099 #3300CC#3300FF
#333300 #333333 #333366 #333399 #3333CC#3333FF
#336600 #336633 #336666 #336699 #3366CC#3366FF
#339900 #339933 #339966 #339999 #3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000 #660033 #660066 #660099 #6600CC#6600FF
#663300 #663333 #663366 #663399 #6633CC#6633FF
#666600 #666633 #666666 #666699 #6666CC#6666FF
#669900 #669933 #669966 #669999 #6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000 #990033 #990066 #990099 #9900CC#9900FF
#993300 #993333 #993366 #993399 #9933CC#9933FF
#996600 #996633 #996666 #996699 #9966CC#9966FF
#999900 #999933 #999966 #999999 #9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

Vlad Merzsevics

A HTML-ben a színt kétféleképpen lehet megadni: hexadecimális kóddal és egyes színek nevével. A leggyakrabban használt módszer a hexadecimális rendszeren alapul, mint a leguniverzálisabb.

Hexadecimális színek

A HTML hexadecimális számokat használ a színek meghatározásához. A hexadecimális rendszer, a decimális rendszertől eltérően, ahogy a neve is sugallja, a 16-os számon alapul. A számok a következők lesznek: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. A 10 és 15 közötti számokat latin betűk helyettesítik. táblázatban. A 6.1 a decimális és a hexadecimális számok közötti megfelelést mutatja.

A hexadecimális rendszerben a 15-nél nagyobb számok két szám egyesítésével jönnek létre (6.2. táblázat). Például a 255 decimális szám megfelel a hexadecimális FF számnak.

A számrendszer meghatározásakor a félreértés elkerülése érdekében a hexadecimális számot a # font jel előzi meg, például #aa69cc. Ebben az esetben a kis- és nagybetű nem számít, ezért megengedett az #F0F0F0 vagy #f0f0f0 beírása.

A HTML-ben használt tipikus szín a következő.

Itt a weboldal háttérszíne #FA8E47. A szám előtti # font jel azt jelenti, hogy hexadecimális. Az első két számjegy (FA) határozza meg a szín piros összetevőjét, a harmadik-negyedik számjegy (8E) a zöld komponenst, az utolsó két számjegy (47) pedig a kék összetevőt. A végeredmény ez a szín.

FA + 8E + 47 = FA8E47

A három szín – piros, zöld és kék – mindegyike 00 és FF közötti értéket vehet fel, ami végül 256 árnyalatot alkot. Így a színek teljes száma 256x256x256 = 16.777.216 kombináció lehet. A vörös, zöld és kék komponensekre épülő színmodellt RGB-nek (piros, zöld, kék; piros, zöld, kék) hívják. Ez a modell additív (az add - add), amelyben mindhárom komponens hozzáadásával fehér lesz.

A hexadecimális színekben való navigálás megkönnyítése érdekében vegye figyelembe néhány szabályt.

  • Ha a színösszetevők értéke megegyezik (például: #D6D6D6), akkor szürke árnyalatot kapunk. Minél nagyobb a szám, annál világosabb a szín, és az értékek #000000-ról (fekete) #FFFFFF-re (fehérre) változnak.
  • Élénkvörös szín keletkezik, ha a piros komponenst maximálisra (FF) tesszük, a többi komponenst pedig nullára állítjuk. Az #FF0000 értékű szín a lehető legvörösebb vörös árnyalat. Ugyanez igaz a zöldre (#00FF00) és a kékre (#0000FF).
  • A sárgát (#FFFF00) a piros és a zöld keverésével kapjuk. Ez jól látható a színkörön (6.1. ábra), amely az alapszíneket (piros, zöld, kék) és a kiegészítő vagy kiegészítő színeket mutatja be. Ezek közé tartozik a sárga, a cián és az ibolya (más néven bíbor). Általánosságban elmondható, hogy a szomszédos színek keverésével bármilyen színt kaphatunk. Tehát a ciánt (#00FFFF) a kék és a zöld kombinálásával kapjuk.

Rizs. 6.1. Színes kör

A hexadecimális értékeken alapuló színeket nem kell empirikusan kiválasztani. Erre a célra alkalmas grafikus szerkesztő tud dolgozni különböző színes modellek mint például az Adobe Photoshop. ábrán. A 6.2 egy ablakot mutat a színválasztáshoz ebben a programban, a vonal az aktuális szín eredő hexadecimális értékét körözi. Kimásolhatja és beillesztheti a kódjába.

Rizs. 6.2. Színválasztó a Photoshopban

Web színek

Ha a monitor színminőségét 8 bitesre (256 szín) állítja, ugyanaz a szín jeleníthető meg különböző böngészők a magam módján. Ez a grafikák megjelenítési módjához kapcsolódik, amikor a böngésző a saját palettájával működik, és nem tud olyan színt megjeleníteni, amely nem szerepel a palettán. Ebben az esetben a színt más, ahhoz közel álló színek pixeleinek kombinációja váltja fel, amelyek utánozzák az adott színt. Annak érdekében, hogy a szín változatlan maradjon a különböző böngészőkben, bevezették az úgynevezett webes színek palettáját. A webszínek olyan színek, amelyek mindegyik összetevőjéhez - piros, zöld és kék - a hat érték egyike van beállítva - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Ennek a komponensnek a hexadecimális értéke zárójelben van feltüntetve. Az összes lehetséges kombinációból származó színek száma 6x6x6 - 216 színt ad. Egy példa webszínre a #33FF66.

A webszín fő jellemzője, hogy minden böngészőben egyformán jelenik meg. Jelenleg a webes színek jelentősége nagyon kicsi a monitorok minőségének javulása és képességeik bővülése miatt.

Színek név szerint

Annak érdekében, hogy ne emlékezzen egy számgyűjteményre, használhatja helyette a gyakran használt színek nevét. táblázatban. 6.3 mutatja a népszerű színnevek nevét.

Tab. 6.3. Néhány szín neve
Színnév Szín Leírás Hex érték
fekete Fekete #000000
kék Kék #0000FF
fukszia Világos lila #FF00FF
szürke Sötétszürke #808080
zöld Zöld #008000
mész világos zöld #00FF00
gesztenyebarna Sötét vörös #800000
haditengerészet Sötétkék #000080
olajbogyó Olajbogyó #808000
lila Sötét lila #800080
piros Piros #FF0000
ezüst világos szürke #C0C0C0
a zöldeskék kékeszöld #008080
fehér fehér #FFFFFF
sárga Sárga #FFFF00

Nem mindegy, hogyan adja meg a színt – a nevével vagy hexadecimális számokkal. Hatásukban ezek a módszerek egyenrangúak. A 6-1. példa bemutatja, hogyan kell beállítani egy weboldal háttér- és szövegszínét.

6.1. példa. Háttér és szöveg színe

Színek

Minta szöveg

BAN BEN ezt a példát a háttérszín beállítása a címke bgcolor attribútuma segítségével történik , és a szöveg színe a text attribútumon keresztül. A változatosság esetében a text attribútum értéke hexadecimális számra, a bgcolor pedig fenntartott értékre van állítva. kulcsszó a zöldeskék.