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, a szín nevének használatával angol nyelv. 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 Consortium szabvány legnépszerűbb színei világháló(Angol World Wide Web Consortium, W3C):
| 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, mert a piros a legmagasabb értékre (255) van beállítva, és a többi értéke 0. 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 számban 255 hüvelyk decimális rendszer a legmagasabb FF értéknek felel meg hexadecimálisan. 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 következőre van állítva. minimális érték(00). 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 | |
| narancssárga | narancssárga | #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.
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 definíciójában 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, a két középső a zöldet, az utolsó kettő pedig a kéket jelöli. 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, hexadecimális kódot, értékeket RGB, HSL formátumban és leírást.
| Név | Szín | A 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 | |
| narancssárga | #ffa500 | rgb(255;165;0) | HSL(38,8,100%,50%) | narancssárga | |
| 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) első 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, a szélsőséges 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!
Ennek a példának az eredménye az ábrán látható. 2.
Rizs. 2. Színek a weboldalon
2014.11.28. 11,1KSajnos az oldalon még nem lehet ízérzetet megjeleníteni. De ez teljesen kompenzálható használatával színek. Végül is a html színek lehetővé teszik a milliónyi árnyalat bármelyikének megjelenítését. Tehát hogy " színes ceruzák” készletében sokkal több van hétnél.
színséma html-ben
A html-ben a szín többféle formátumban is megadható:
1. Hexadecimális értékként - a hexadecimális rendszerben megadott kódot használjuk. Az ilyen színkódok a html-ben három pár hexadecimális számból állnak. Mindegyik pár felelős az árnyalat telítettségéért az elsődleges színével:
- Az első számpár felelős a piros színért;
- A második pár a zöld szín tartalmára vonatkozik;
- Ez utóbbi a kék szín tartalmára vonatkozik.
A kód elejére (a számok elé) egy hash jel kerül. Így a hexadecimális színkód. Ez a számrendszer az 1-től 9-ig terjedő számokon kívül a latin ábécé betűit (A, B, C, D, E, F) használja.
Például a fehér színkód a html-ben így néz ki: #FFFFFF:
2. Kulcsszó – Jelenleg a html körülbelül 147 kulcsszót támogat. De nem mindegyik szó egyedi. Némelyikük ugyanarra a színárnyalatra utal.
A szürke színt két kulcsszó jelöli: szürke és szürke . Hexadecimális kódjukat (HEX ) ugyanaz a #808080 érték adja.
Példa :
#808080
3. RGB formátumban – ez a html színkódolás három, 0 és 255 közötti tartományban beállított érték használatán alapul. Mindegyik meghatározza az árnyalat telítettségét az egyik elsődleges színnel:
- R - piros (piros);
- G - zöld (zöld);
- B - kék (kék).
A színszám RGB formátumban a következőképpen írható: rgb(0, 210, 100).
háttérszín:rgb(100,186,43)
4. Be RGBA formátum- ez egy fejlett RGB formátum, ahol a negyedik érték a szín átlátszóságát adja meg 0 és 1 közötti tizedes tört formájában.
Használati példa:
háttérszín:rgba(100;86,143;0.2)
háttérszín:rgba(100;86;143;0.5)
háttérszín:rgba(100;86,143;0.8)
háttérszín:rgba(100,86,143,1)
html színtáblázatok és színgenerátorok
A színbeállítási formátumok ilyen széles választékával könnyen összezavarodhatunk. Ezért egy speciális színtáblázatot találtak fel. Ebben a színárnyalatok 147 kulcsnevéhez a megfelelőségi kódok szerepelnek az összes főbb színmegjelenítési szabványban. Ezen kívül minden mező fel van szerelve egy sávval a vizuális színegyeztetés érdekében. A táblázatok egyike a colourcheme.ru webhelyen található:
De még a levelezés ilyen felépítésének segítségével is nehéz lehet a kívánt árnyalat kiválasztása. És nem tény, hogy a színkódtáblázatban megvan a megfelelő.
Ennek az akadálynak a megkerülésére és a megfelelő árnyalat kiválasztásának lehető legkönnyebbé tételére interaktív webszolgáltatásokat fejlesztettek ki. Őket felhasználói felület némileg eltérhet.
A html-color-codes.info oldalon a színgenerátor így néz ki:
És a color-picker.appsmaster.co szolgáltatáson belül ez az eszköz egy kicsit másképp van megvalósítva:
A generátor egyes színeinek telítettségét speciális csúszkák segítségével állítják be. Vizuálisan az árnyalat a keret és a bal oldalon lévő téglalap színével jelenik meg. Alul 3 mezőben látható a színkód a fő formátumokban.
De a színgenerátor nem csak speciális webhelyeken érhető el. Szinte minden grafikus szerkesztő hasonló eszközzel van felszerelve. Például Photoshop:
Színbiztonság
És ez nagyon régen volt, még a 256 színt támogató videokártyák korában. Azokban a távoli időkben Operációs rendszer csak bizonyos számú nyolcbites árnyalatot tudott torzítás nélkül megjeleníteni.
Aztán levezették a nagyszerű asztalt biztonságos színek. 216 árnyalatot jelölt meg, amelyek torzítás nélkül jeleníthetők meg az akkori böngészők bármelyikében. És a mai napig ez nagyszerű kézirat» továbbra is elérhető bizonyos forrásokon:
Minden megváltozott a mi időnkben. Ezért a html-ben a színekkel való munkavégzés minden biztonsági szabálya teljesen megszűnt. Végül is a modern számítógépes hardver több mint 16 millió különböző árnyalatot támogat. És 216 biztonságos szín a feledés homályába merült.
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 mutatja a decimális és a hexadecimális számok közötti megfelelést.
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. NÁL NÉL 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
NÁL NÉL 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.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.
Beállíthatja saját színértékeit különféle formátumok. 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 az Adobe Photoshop, a 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 |