Hamu színkódja. 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
Olvassa el is
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ő akik különböző színű modellekkel dolgozhatnak, pl. 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. BAN BEN Ebben a pillanatban a webszínek relevanciája igen csekély a monitorok minőségének növekedése é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.
| 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
Minta szöveg
Ebben a példában a háttérszín beállítása a címke bgcolor attribútumával történik
, és a szöveg színe a text attribútumon keresztül. A változatosság érdekében a text attribútum értéke hexadecimális számra van állítva, a bgcolor pedig a teal fenntartott kulcsszóra.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. A hexadecimális rendszerben a 15-nél nagyobb számok két szám egyesítésével jönnek létre. 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 # 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.
| 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
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!
Eredmény ezt a példátábrán látható. 2.
Rizs. 2. Színek a weboldalon
A CSS színe többféleképpen állítható be:
- név szerint,
- Által hexadecimális érték,
- RGB és RGBA formátumban,
- HSL és HSLA formátumban.
Á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 kulcsszavakat(angol színnevek) a színtulajdonságok, az RGB-kód, a hexadecimális kód (HEX) és a HSL-kód beállítására szolgál.
| 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.
Ez a kód így működik:
Színbeállítás RGB-vel
RGB - adalékanyag színes modell. 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:
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
Ezután a kódban állítsa be a blokk háttérszínét
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.
Í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:
Í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.
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 mindegy, 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 HTML-ben a szín háromféleképpen adható meg:
Szín beállítása a HTML-ben a név alapján
Egyes színek a nevükkel adhatók meg, értékként a szín angol nyelvű nevét használva. A leggyakoribb kulcsszavak: fekete (fekete), fehér (fehér), piros (piros), zöld (zöld), kék (kék) stb.:
Szöveg színe - piros
A World Wide Web Consortium (W3C) szabvány legnépszerűbb színei a következők:
| Szín | Név | Szín | Név | Szín | Név | Szín | Név |
|---|---|---|---|---|---|---|---|
| Fekete | szürke | Ezüst | fehér | ||||
| Sárga | mész | Aqua | Fukszia | ||||
| Piros | Zöld | Kék | Lila | ||||
| gesztenyebarna | Olajbogyó | haditengerészet | A zöldeskék |
Példa a különböző színnevek használatára:
Példa: szín beállítása a neve alapján
- Próbáld ki magad "
Fejléc piros háttéren
Fejléc narancssárga háttérrel
Fejléc lime háttéren
Fehér szöveg kék alapon
Fejléc piros háttéren
Fejléc narancssárga háttérrel
Fejléc lime háttéren
Fehér szöveg kék alapon
Szín megadása RGB-vel
Ha különböző színeket jelenít meg a monitoron, az RGB paletta alapul. Bármilyen színt kapunk a három fő keverésével: R - piros, G - zöld (zöld), B - kék (kék). Az egyes színek fényerejét egy bájt adja meg, ezért 0 és 255 közötti értékeket vehet fel. Például az RGB (255,0,0) pirosként jelenik meg, mivel a piros a legmagasabb értékre (255) van beállítva, és a mások 0-ra vannak állítva A színt százalékban is beállíthatja. Mindegyik paraméter jelzi a megfelelő szín fényerejét. Például: az rgb(127, 255, 127) és rgb(50%, 100%, 50%) értékek ugyanazt a közepes telítettségű zöld színt állítják be:
Példa: Szín megadása RGB-vel
- Próbáld ki magad "
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
A szín beállítása hexadecimális értékkel
Értékek R G B hexadecimális (HEX) színértékekkel is megadható a következő formában: #RRGGBB ahol RR (piros), GG (zöld) és BB (kék) hexadecimális értékek 00-tól FF-ig (ugyanaz, mint a decimális 0-). 255) . A hexadecimális rendszer, a decimális rendszertől eltérően, ahogy a neve is sugallja, a 16-os számon alapul. A hexadecimális rendszer a következő karaktereket használja: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Itt a 10 és 15 közötti számokat latin betűk helyettesítik. A 15-nél nagyobb számok a hexadecimális rendszerben két karakter egy értékké egyesítése. Például a legnagyobb 255 decimális szám megfelel a legnagyobb FF-nek hexadecimálisban. A decimális rendszertől eltérően a hexadecimális számot egy font jel előzi meg. # Például az #FF0000 pirosként jelenik meg, mert a piros a legmagasabb értékre (FF), a többi szín pedig a minimális értékre (00) van beállítva. Karakterek a hash szimbólum után # kis- és nagybetűkkel is beírható. A hexadecimális rendszer lehetővé teszi az #rgb rövidített alak használatát, ahol minden karakter kétszerese. Így az #f7O bejegyzést #ff7700-nak kell tekinteni.
Példa: Szín HEX
- Próbáld ki magad "
piros: #FF0000
zöld: #00FF00
kék: #0000FF
piros: #FF0000
zöld: #00FF00
kék: #0000FF
piros+zöld=sárga: #FFFF00
piros+kék=lila: #FF00FF
zöld+kék=cián: #00FFFF
Az általánosan használt színek listája (név, HEX és RGB):
| Angol cím | Orosz név | Minta | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Bársonyvirág | bársonyvirág | #E52B50 | 229 | 43 | 80 | |
| Borostyán | Borostyán | #FFBF00 | 255 | 191 | 0 | |
| Aqua | kékeszöld | #00FFFF | 0 | 255 | 255 | |
| Égszínkék | Égszínkék | #007FFF | 0 | 127 | 255 | |
| Fekete | Fekete | #000000 | 0 | 0 | 0 | |
| Kék | Kék | #0000FF | 0 | 0 | 255 | |
| Bondi kék | Bondi tengerparti víz | #0095B6 | 0 | 149 | 182 | |
| Sárgaréz | Sárgaréz | #B5A642 | 181 | 166 | 66 | |
| Barna | Barna | #964B00 | 150 | 75 | 0 | |
| Égszínkék | Égszínkék | #007BA7 | 0 | 123 | 167 | |
| sötét tavaszi zöld | Sötét tavaszi zöld | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Padlizsán | padlizsán | #990066 | 153 | 0 | 102 | |
| Fukszia | Fukszia | #FF00FF | 255 | 0 | 255 | |
| Arany | Arany | #FFD700 | 250 | 215 | 0 | |
| szürke | Szürke | #808080 | 128 | 128 | 128 | |
| Zöld | Zöld | #00FF00 | 0 | 255 | 0 | |
| Indigó | Indigó | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| mész | Mész | #CCFF00 | 204 | 255 | 0 | |
| Malachit | Malachit | #0BDA51 | 11 | 218 | 81 | |
| haditengerészet | Sötétkék | #000080 | 0 | 0 | 128 | |
| Okker | Okker | #CC7722 | 204 | 119 | 34 | |
| Olajbogyó | Olajbogyó | #808000 | 128 | 128 | 0 | |
| narancs | narancs | #FFA500 | 255 | 165 | 0 | |
| őszibarack | Őszibarack | #FFE5B4 | 255 | 229 | 180 | |
| Tök | Tök | #FF7518 | 255 | 117 | 24 | |
| Lila | Ibolya | #800080 | 128 | 0 | 128 | |
| Piros | Piros | #FF0000 | 255 | 0 | 0 | |
| Sáfrány | Sáfrány | #F4C430 | 244 | 196 | 48 | |
| tenger zöld | zöld tenger | #2E8B57 | 46 | 139 | 87 | |
| Mocsári zöld | Bolotny | #ACB78E | 172 | 183 | 142 | |
| A zöldeskék | kékeszöld | #008080 | 0 | 128 | 128 | |
| Ultramarin | ultramarin | #120A8F | 18 | 10 | 143 | |
| ibolya | Ibolya | #8B00FF | 139 | 0 | 255 | |
| Sárga | Sárga | #FFFF00 | 255 | 255 | 0 | |
Színkódok (háttér) telítettség és színárnyalat szerint.
>> Színkezelés
Hexadecimális RGB színértékek
A színek leírásának és feldolgozásának módszerei eltérnek egymástól abban, hogy milyen végső ábrázolásra szánják őket. Hasonlítsuk össze például a poligráfia és a számítógép-monitorok színeinek megjelenítését. Az első esetben az alap az fehér annak a papírnak a színe, amelyre ezt követően a három alapszínt alkalmazzák: kék, lilaÉs sárga. Ez a három alapszín egymással és a papír fehér színével különböző arányban keveredve különböző színárnyalatokat ad, kivéve a tiszta feketét, színek teljes hiányában pedig fehér papírt. Ha feketét adunk hozzájuk, akkor azt kapjuk CMYK- a szín közvetítésének módja, amikor a kívánt színt a hiányzó színek fehérből való kivonásával kapjuk.
A második esetben az alap az fekete a monitor képernyőjének színe, amelynek minden cellája három szín valamelyikében világít: piros-piros, zöld-zöld és kék-kék. Ezután minden ragyogás hiányában tiszta fekete színt kapunk a képernyőn, és a szükséges színek bármelyikét a három szín aránya adja meg. Ebben az esetben megkapjuk RGB- Színátviteli módszer. Az elsődleges színeknek jelentése lehet 0
előtt 255
, vagy től 0%
előtt 100%
, vagy hexadecimális értékként is ábrázolható. Az alábbi ábrán az alapszínek keverésének eredményeit láthatja.
A hexadecimális számrendszernek a decimális számrendszerrel ellentétben nem tíz számjegye van a számsorában, hanem tizenhat – innen ered a név. Ennek megfelelően a két számjegyből álló kombinációk nem ismétlődő változatai csak - 256 , a számsor folytatása után 9 levelei A előtt F, így a sor így fog kinézni -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Ebben az esetben a színt három adja hexadecimális számok, mindegyik két számjegyből áll. Az első szám határozza meg az intenzitást piros színek, átlagos zöld, utolsó dolog- kék színek. Minden szám értéke tól kezdve lehet 00 előtt FF(0-tól 255-ig). Például: zöld színt adunk meg #00FF00, piros - mint #FF0000, kék - szerű #0000FF, fehér - szerű #FFFFFF, a szín vagy a fekete teljes hiányát úgy adjuk meg #000000 .
Az alábbi űrlapon beállíthat tetszőleges hexadecimális értéket a három szín mindegyikéhez, és a kimeneti mezőre kattintva megtekintheti a keverés eredményét.
Példák néhány hexadecimális RGB színértékre: piros, kék és zöld színátmenet.
| Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Szín megadása karakterlánc-literálokkal
A könnyebb használat érdekében egyes színek és kombinációik olyan nevet kaptak, amelyet minden böngésző felismer, és lehetővé vált sok közülük név szerinti beállítás. Az alábbi táblázatban látható néhány színnév:
| Kilátás | Név | Kilátás | Név | Kilátás | Név | Kilátás | Név |
| fehér | Piros | narancs | Sárga | ||||
| Zöld | Kék | Lila | Fekete | ||||
| Alice kék | antik fehér | Aqua | akvamarin | ||||
| Égszínkék | Bézs | Krémleves | blansírozott mandula | ||||
| Kék ibolya | Barna | Burlywood | Cadetblue | ||||
| karthauzi likőr | Csokoládé | Korall | Búzavirágkék | ||||
| Cornsilk | Karmazsinvörös | cián | sötétkék | ||||
| sötétcián | sötét aranyvessző | sötét szürke | sötétzöld | ||||
| Darkkhaki | Sötétbíbor | sötétzöld | sötét színű | ||||
| Darkorchid | sötét vörös | sötétlazac | Sötétzöld | ||||
| sötét palakék | sötét palaszürke | sötéttürkiz | Sötétlila | ||||
| Mély rózsaszín | mély ég kék | Dimgray | dodger kék | ||||
| Tűztégla | Virágos fehér | erdő zöld | Fuschia | ||||
| Gainsboro | szellem fehér | Arany | Aranyvessző | ||||
| szürke | Zöld sárga | Mézharmat | dögös rózsaszín | ||||
| indiai vörös | Indigó | Elefántcsont | Khaki | ||||
| Levendula | Levendulapirosító | Lemonchiffon | világoskék | ||||
| könnyű korall | világoscián | világos hidegsárga | világos zöld | ||||
| világos szürke | Világos rózsaszín | könnyű lazac | Világos tengerzöld | ||||
| Világos égszínkék | Világos palaszürke | világos acélkék | halványsárga | ||||
| mész | Zöldcitrom zöld | vászon | Bíborvörös | ||||
| gesztenyebarna | közepes akvamarin | közepes kék | Közepes orchidea | ||||
| Közepes lila | Közepes zöld | Közepes lapátkék | Közepes tavaszi zöld | ||||
| közepes türkiz | középibolyás | éjkék | mentakrém | ||||
| ködrózsa | navajofehér | haditengerészet | régi csipke | ||||
| Olajbogyó | Olivedrab | narancsvörös | Orchidea | ||||
| halványaranyvessző | Halvány zöld | halvány türkiz | halványibolya színű | ||||
| papayawhip | Barackpuff | Peru | Rózsaszín | ||||
| Szilva | Kobalt kék | Rózsabarna | királykék | ||||
| nyeregbarna | tengerzöld | Tengeri kagyló | Sienna | ||||
| Ezüst | égszínkék | palakék | Slategray | ||||
| Hó | Tavaszi zöld | acél kék | Cser | ||||
| A zöldeskék | Bogáncs | Paradicsom | Türkiz | ||||
| ibolya | Búza | Fehér füst | sárga zöld |
Biztonságos színválasztó használata
Sajnos a különböző platformokon, eltérő rendszerbeállítások mellett a helyes színvisszaadás problémát jelent. Az a helyzet, hogy a böngésző mindig megpróbálja beállítani az alatta lévő dokumentum színpalettáját rendszerbeállításokés a monitor képességeit a színek önkeverésével és helyettesítésével. Ennek eredményeként a felhasználó néha nem egészen azt látja, amit a webmester meg akart mutatni neki. Ebből a helyzetből a kiutat egy paletta használata találta meg, amelynek minden színét garantáltan azonos módon jeleníti meg minden böngésző különböző platformokon. Ez az ún garantált paletta, más néven biztonságos paletta. Ez a paletta olyan színeket tartalmaz, amelyek színösszetevői a következő értékeket veszik fel: 00 ,33 ,66 ,99 , CC,FF, minden lehetséges módon 216 kombinációik.
| Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód | Kilátás | kód |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99 FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66 FF00 | 66FF33 | 33 FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000 FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300 CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | 0000 FF | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | 0000 FF | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |