Sötét bordó színkód. HTML oktatóanyag

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 World Wide Web Consortium (W3C) szabvány legnépszerűbb színei a következő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. 15 hüvelyknél nagyobb számok hexadecimális rendszer két karakter egy értékké egyesülé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):

Színkódok (háttér) telítettség és színárnyalat szerint.

Mert html oldalak a színeket elsősorban hexadecimálisan jelöljük. Ehhez kétféle kódrögzítést használnak - teljes vagy rövidített. Annak érdekében, hogy helyesen jelezze a html színt a teljes rekorddal, hat karaktert (számokat és / vagy angol betűket) kell írnia a rács után, például a fekete így van írva: #000000. Rövidített jelzés html színek egy hashből és mögötte három számból és/vagy betűből áll. Ahol ezt a fajt tartalék csak akkor használható, ha egy adott szín teljes rekordja a font után ugyanazokból a karakterekből áll. Például ugyanaz a fekete szín felírható így: #000. A html színeket nagy és kis karakterekkel is megadhatja, mivel ezek nem érzékenyek a kis- és nagybetűkre.

Minden „#” után írt karakter a piros, zöld és kék szín bizonyos hányadának felel meg. Az összes monitor viszont hatalmas számú pixelből (mikroszkópikus pontokból) áll, amelyek mindegyike 3 úgynevezett "zseblámpát" (fényforrást) tartalmaz: piros, zöld és kék. Ezután a kibocsátott fény intenzitásának beállításával ezekkel a "zseblámpákkal" a monitor a számunkra szükséges színt jeleníti meg.

A vörös, kék és zöld fényintenzitás kombinálásával (0-tól 256-ig) a monitorok 16 000 000 különböző színt képesek megjeleníteni.

A helyszínek színei szóban vagy RGB-kódban is megadhatók.

A mai napig, szóban, 147 színt írhat elő. Fontos tudni, hogy néhány különböző név ugyanazokra a színekre utalhat, például a Szürke és a Szürke szürke (#808080).

Biztonságos színek webhelyekhez.

Nem minden monitor és böngésző képes mind a 16 millió html szín helyes megjelenítésére.

Ha például olyan szín jelenik meg, amelyet a böngésző nem tud megfelelően megjeleníteni, akkor:

1. A böngésző lecseréli a rá leginkább hasonlító és sikeresen reprodukálhatóra;
2. Mert helyes megjelenítés a böngésző több színt is tud keverni és az eredményt reprodukálni.

Annak érdekében, hogy a kimenet bármely böngészőben és bármely monitoron a kódban megadott színű legyen, javasoljuk a „Biztonságos színek” használatát. Nem kézzel vagy valaki akaratára határozták meg, hanem matematikailag. Ilyen 100%-ban biztonságos színek html dokumentumokat 216 van. És bár a mai technológia elérte azt a pontot, hogy a modern monitorok és böngészők több millió árnyalatot ismernek fel, a színvisszaadás érdekében javasoljuk ezeknek a biztonságos színeknek a használatát.

Ez a táblázat 216 biztonságos html színkódot tartalmaz. Minden színnek van egy értéke RGB-ben, amely megadja a színt a grafikus szerkesztőkben, és HEX-ben a html oldalak színének megadásához.

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.

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, Például, Adobe Photoshop. ábrán. A 6.2 egy ablakot mutat a színválasztáshoz ebben a programban, a kapott vonalat bekarikázzuk hex érték aktuális szín. 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.

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.

Számos módja van a színek megjelenítésének a webdesignban.

A HEX egy hexadecimális rendszer a színek 16-os alapban történő megjelenítésére. Ennél a rendszernél a 0-tól 9-ig terjedő arab decimális számjegyek és az A-tól F-ig terjedő latin betűk kiegészítik a 16-os digitális számot. Webdesignhoz 16 elsődleges (kulcs)szín , az úgynevezett hexadecimális színkód #RRGGBB, ahol minden pár felelős a saját színrészéért: RR - piros, GG - zöld és BB - kék. Minden színfrakció 00-tól FF-ig terjed.

A színek további két megjelenítése a webdesignban: RGB(*,*,*) formában, ahol a szín minden egyes "*" részét 0-tól 255-ig terjedő decimális számjegyek és angol színnevek képviselik.

Színes kép létrehozásakor a fő probléma a színek helyes visszaadása különböző típusok számítógépek, monitorok és böngészők. Ha a böngésző nem tud megfelelően megjeleníteni egy színt, akkor több színt egyezik vagy kever. És néha teljesen más színnel helyettesíthető.

asztal 16 alapszín, amelyeket minden böngészőben használnak

asztal lila színek és árnyalatok

asztal szürke színek és árnyalatok

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, 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

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.

RGB-vel

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 számnak felel meg. Először adja meg kulcsszó rgb , majd zárójelben, vesszővel elválasztva adja meg a színösszetevőket, például rgb(255, 128, 128) vagy rgb(100%, 50%, 50%).

RGBA

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

Név HSL formátum a Hue (hue), Saturate (telítettség) és Lightness (lightness) első betűk kombinációjából alakult ki. 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

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ő.

Színértékek benn RGBA formátumok, HSL és HSLA hozzáadásra került 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