Gylden fargekode. HTML opplæring
Heksadesimale tall brukes til å spesifisere farger. Det heksadesimale systemet, i motsetning til desimalsystemet, er, som navnet antyder, basert på tallet 16. Tallene vil være som følger: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Tall fra 10 til 15 erstattes av latinske bokstaver. Tall større enn 15 i det heksadesimale systemet dannes ved å kombinere to tall til ett. For eksempel tilsvarer tallet 255 i desimal tallet FF i heksadesimalt. For å unngå forvirring ved å bestemme tallsystemet, plasseres et hash-symbol # foran det heksadesimale tallet, for eksempel #666999. Hver av de tre fargene - rød, grønn og blå - kan ha verdier fra 00 til FF. Dermed er fargesymbolet delt inn i tre komponenter #rrggbb, der de to første symbolene indikerer den røde komponenten i fargen, de to midterste - grønn, og de to siste - blå. Det er lov å bruke den forkortede formen #rgb, hvor hvert tegn skal dobles. Dermed bør oppføringen #fe0 betraktes som #ffee00.
Ved navn
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Nettlesere støtter enkelte farger etter navn. I tabellen 1 viser navn, heksadesimal kode, RGB, HSL verdier og beskrivelse.
| Navn | Farge | Kode | RGB | HSL | Beskrivelse |
|---|---|---|---|---|---|
| hvit | #ffffff eller #fff | rgb(255,255,255) | hsl(0,0 %, 100 %) | Hvit | |
| sølv | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Grå | |
| grå | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Mørk grå | |
| svart | #000000 eller #000 | rgb(0,0,0) | hsl(0,0%,0%) | Svart | |
| rødbrun | #800000 | rgb(128;0,0) | hsl(0,100%,25%) | Mørkerød | |
| rød | #ff0000 eller #f00 | rgb(255;0,0) | hsl(0,100%,50%) | rød | |
| oransje | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | oransje | |
| gul | #ffff00 eller #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Gul | |
| oliven | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Oliven | |
| lime | #00ff00 eller #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Lysegrønn | |
| grønn | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Grønn | |
| aqua | #00ffff eller #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blå | |
| blå | #0000ff eller #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blå | |
| marinen | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Mørke blå | |
| blågrønn | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blå grønn | |
| fuchsia | #ff00ff eller #f0f | rgb(255;0,255) | hsl(300,100%,50%) | Rosa | |
| lilla | #800080 | rgb(128;0;128) | hsl(300,100%,25%) | Fiolett |
Bruker RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Du kan definere farge ved å bruke de røde, grønne og blå verdiene i desimaler. Hver av de tre fargekomponentene har en verdi fra 0 til 255. Det er også tillatt å spesifisere fargen i prosent, med 100 % tilsvarende tallet 255. Angi først nøkkelordet rgb, og spesifiser deretter fargekomponentene i parentes , atskilt med kommaer, for eksempel rgb(255 , 128, 128) eller rgb(100 %, 50 %, 50 %).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-formatet ligner syntaks på RGB, men inkluderer en alfakanal som spesifiserer gjennomsiktigheten til elementet. En verdi på 0 er helt gjennomsiktig, 1 er ugjennomsiktig, og en mellomverdi som 0,5 er halvgjennomsiktig.
RGBA ble lagt til CSS3, så CSS-koden må valideres mot denne versjonen. Det skal bemerkes at CSS3-standarden fortsatt er under utvikling og noen funksjoner kan endres. For eksempel valideres en farge i RGB-format som er lagt til bakgrunnsfargeegenskapen, men en farge som legges til bakgrunnsegenskapen er ikke lenger gyldig. Samtidig forstår nettlesere helt riktig fargen for begge egenskapene.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Navnet på HSL-formatet er avledet fra kombinasjonen av de første bokstavene Hue (hue), Saturate (metning) og Lightness (lightness). Hue er fargeverdien på fargehjulet (fig. 1) og er gitt i grader. 0° tilsvarer rødt, 120° til grønt og 240° til blått. Fargeverdien kan variere fra 0 til 359.
Ris. 1. Fargehjul
Metning er intensiteten til en farge og måles som en prosentandel fra 0 % til 100 %. En verdi på 0 % indikerer ingen farge og en grå nyanse, 100 % er maksimumsverdien for metning.
Lyshet angir hvor lys fargen er og angis som en prosentandel fra 0 % til 100 %. Lave verdier gjør fargen mørkere, og høye verdier gjør fargen lysere; ekstreme verdier på 0% og 100% tilsvarer svart og hvitt.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA-formatet ligner syntaks på HSL, men inkluderer en alfakanal for å spesifisere elementets gjennomsiktighet. En verdi på 0 er helt gjennomsiktig, 1 er ugjennomsiktig, og en mellomverdi som 0,5 er halvgjennomsiktig.
RGBA-, HSL- og HSLA-fargeverdier legges til CSS3, så sjekk koden din for versjonsgyldighet når du bruker disse formatene.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Advarsel
Alle løvefangstmetoder som er oppført på nettstedet er teoretiske og basert på beregningsmetoder. Forfatterne garanterer ikke din sikkerhet når du bruker dem og fraskriver seg ethvert ansvar for resultatene. Husk at en løve er et rovdyr og et farlig dyr!
Resultatet av dette eksemplet er vist i fig. 2.
Ris. 2. Farger på nettsiden
Fargekoder i CSS brukes til å spesifisere farger. Vanligvis brukes fargekoder eller fargeverdier for å angi fargen for enten forgrunnsfargen til et element (f.eks. tekstfarge, lenkefarge) eller bakgrunnsfargen til et element (bakgrunnsfarge, blokkfarge). De kan også brukes til å endre fargen på en knapp, kantlinje, markør, hover og andre dekorative effekter.
Du kan spesifisere fargeverdiene dine i forskjellige formater. Følgende tabell viser alle mulige formater:
De listede formatene er beskrevet mer detaljert nedenfor.
CSS-farger - Hex-koder
Heksadesimal fargekode er en sekssifret representasjon av farge. De to første sifrene (RR) representerer den røde verdien, de to neste representerer den grønne verdien (GG), og de to siste representerer den blå verdien (BB).
CSS-farger - korte heksadesimale koder
Kort sekskantet fargekode er en kortere form for notasjon på seks tegn. I dette formatet gjentas hvert siffer for å produsere en ekvivalent sekssifret fargeverdi. For eksempel: #0F0 blir #00FF00.
Den heksadesimale verdien kan hentes fra hvilken som helst grafikkprogramvare som Adobe Photoshop, Core Draw, etc.
Hver heksadesimal fargekode i CSS vil bli innledet av et hash-tegn "#". Nedenfor er eksempler på bruk av heksadesimale notasjoner.
CSS-farger - RGB-verdier
RGB-verdi er en fargekode som settes ved hjelp av egenskapen rgb(). Denne egenskapen har tre verdier: én hver for rød, grønn og blå. Verdien kan være et heltall, fra 0 til 255, eller en prosentandel.
Merk: Ikke alle nettlesere støtter rgb() color-egenskapen, så det anbefales ikke å bruke den.
Nedenfor er et eksempel som viser flere farger ved bruk av RGB-verdier.
Fargekodegenerator
Du kan lage millioner av fargekoder ved å bruke tjenesten vår.
Nettlesersikre farger
Nedenfor er en tabell med 216 farger som er de mest sikre og datamaskinuavhengige. Disse fargene i CSS varierer fra 000000 til FFFFFF heksadesimal kode. De er trygge å bruke fordi de sikrer at alle datamaskiner viser farger riktig når de arbeider med 256-fargepaletten.
| Tabell over "sikre" farger i CSS | |||||
| #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 |
Som du vet, kan farge påvirke en persons tilstand: både mental og fysisk. Hver dag, mens de surfer på nettsider på Internett, vurderer øynene millioner av farger og nyanser. En webdesigner som er kjent med fargepsykologien kan manipulere besøkendes humør for å oppnå visse mål.
Dette skyldes det faktum at noen nyanser beroliger, og noen, tvert imot, begeistrer. Deretter vil vi snakke om hvordan farge syntetiseres og vises ved hjelp av datateknologi.
RGB er en fargemodell som representerer en metode for å oppnå alle farger og deres nyanser ved å blande tre hovedkomponenter i forskjellige proporsjoner, som er:
- Rød farge ( rød);
- grønn farge ( Grønn);
- blå farge ( Blå).
Det er her det forkortede navnet RGB kommer fra. Disse fargene ble valgt som de viktigste av en grunn: årsaken er fysiologien til netthinnen i det menneskelige øyet, og hvordan det oppfatter dem:
RGB-modellen er fortsatt den mest populære i dag og brukes til å gjengi farger på TV-skjermer og dataskjermer. Siden produsenter gir produktene sine forskjellige egenskaper, ble det i 1996 laget et enhetlig RGB-basert fargesyntesesystem kalt sRGB, som Microsoft og HP jobbet sammen om.
Numerisk representasjon av farge
Som nevnt tidligere dannes RGB-farger ved å blande primærfarger. For å beskrive intensiteten til hver av dem, ble det tatt i bruk et skjema der fargen er representert av området 0-255 (8 biter), som i heksadesimal notasjon tilsvarer 00-FF.
Det vil si at primærfargene vil se slik ut:
- Rød – RGB (255,0,0);
- Grønn – RGB (0,255,0);
- Blå – RGB (0,0,255);
Hvis fargeintensiteten tar verdier mindre enn 255, oppnås forskjellige nyanser av rødt, grønt og blått. Følgende er en tabell over deres graderinger, samt de heksadesimale verdiene for hver av nyansene:
RGB fargetabeller
Naturligvis, i tillegg til graderinger av primærfarger, er det blandede, og antallet er ganske stort. Derfor ble det laget en tabell med RGB-farger, som presenterer alle eksisterende nyanser, samt deres navn og numeriske representasjoner ( i desimal og heksadesimal form).
Du kan se den her. Denne tabellen gjør livet mye enklere for webdesignere, siden du på noen få sekunder kan finne den nødvendige nyansen og finne ut dens numeriske representasjon.
Trygg RGB-fargepalett
Men på et tidspunkt var det et problem med å vise farger i forskjellige nettlesere, og for å løse det ble den såkalte "sikre" paletten med RGB-farger kompilert, som ble utledet av matematiske beregninger.
Når nettleseren ikke kan vise en farge riktig, vil den prøve å få noe i nærheten av det den trenger ved å blande tilstøtende farger, og mest sannsynlig vil resultatet være helt uakseptabelt:
Ved å bruke RGB-fargekoder fra denne paletten kan en nettutvikler ha trygghet når det gjelder visning av farger på sidene på nettsiden deres når de vises med forskjellige nettlesere, plattformer og skjermer. Selv om tabellen over sikre farger for øyeblikket mister sin relevans ( teknologiske fremskritt står fortsatt ikke stille), når du bruker den, kan du, som de sier, sove rolig.
Gullfarge i RGB-modell
Ordet "gull" ble først brukt på begynnelsen av 1300-tallet for å beskrive fargen på et kjemisk grunnstoff kalt Aurum - gull. I RGB-modellen er fargen gull representert med følgende numeriske verdier:
- RGB (255, 215, 0) – desimalsystem;
- HEX #FFD700 – heksadesimalt system.
Beige farge i RGB-modell
Beige farge inntar en ganske betydelig plass i historien, selv om den ikke er den mest uttrykksfulle. Mange kulturminner, spesielt antikke skulpturer, ble laget av kleberstein og kleberstein, som har en beige fargetone. I RGB-modellen har fargen beige følgende numeriske representasjoner.
I HTML kan farge spesifiseres på tre måter:
Angi en farge i HTML etter navnet
Noen farger kan spesifiseres ved navn, ved å bruke fargenavnet på engelsk som verdi. De vanligste søkeordene: svart, hvit, rød, grønn, blå osv.:
Tekstfarge – rød
De mest populære fargene i World Wide Web Consortium (W3C)-standarden:
| Farge | Navn | Farge | Navn | Farge | Navn | Farge | Navn |
|---|---|---|---|---|---|---|---|
| Svart | Grå | Sølv | Hvit | ||||
| Gul | Lime | Aqua | Fuchsia | ||||
| rød | Grønn | Blå | Lilla | ||||
| Rødbrun | Oliven | marinen | Blågrønn |
Eksempel på bruk av forskjellige fargenavn:
Eksempel: spesifisere en farge ved navn
- Prøv selv"
Overskrift på rød bakgrunn
Overskrift på oransje bakgrunn
Overskrift på lime bakgrunn
Hvit tekst på blå bakgrunn
Overskrift på rød bakgrunn
Overskrift på oransje bakgrunn
Overskrift på lime bakgrunn
Hvit tekst på blå bakgrunn
Spesifisere farge ved hjelp av RGB
Når du viser forskjellige farger på en skjerm, brukes RGB-paletten som grunnlag. Enhver farge oppnås ved å blande tre grunnleggende farger: R - rød, G - grønn, B - blå. Lysstyrken til hver farge er gitt av én byte og kan derfor ta verdier fra 0 til 255. For eksempel vises RGB(255,0,0) som rødt siden rød er satt til sin høyeste verdi (255) og resten er satt til 0 Du kan også angi fargen som en prosentandel. Hver parameter indikerer lysstyrkenivået til den tilsvarende fargen. For eksempel: verdiene rgb(127, 255, 127) og rgb(50%, 100%, 50%) vil sette den samme mellomgrønne fargen:
Eksempel: Spesifisere farge ved hjelp av RGB
- Prøv selv"
rgb(127, 255, 127)
rgb(50 %, 100 %, 50 %)
rgb(127, 255, 127)
rgb(50 %, 100 %, 50 %)
Sett farge etter heksadesimal verdi
Verdier R G B kan også spesifiseres ved bruk av heksadesimale (HEX) fargeverdier i formen: #RRGGBB hvor RR (rød), GG (grønn) og BB (blå) er heksadesimale verdier fra 00 til FF (samme som desimal 0-255) ). Det heksadesimale systemet, i motsetning til desimalsystemet, er, som navnet antyder, basert på tallet 16. Det heksadesimale systemet bruker følgende tegn: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Her er tallene fra 10 til 15 erstattet med latinske bokstaver. Tall større enn 15 i det heksadesimale systemet er representert ved å kombinere to tegn til én verdi. For eksempel tilsvarer det høyeste tallet 255 i desimal den høyeste FF-verdien i heksadesimal. I motsetning til desimalsystemet, er et heksadesimalt tall innledet av et hash-symbol. # , for eksempel, #FF0000 vises som rødt fordi rødt er satt til sin høyeste verdi (FF) og resten av fargene er satt til minimumsverdien (00). Tegn etter hash-symbolet # Du kan skrive med både store og små bokstaver. Det heksadesimale systemet lar deg bruke den forkortede formen #rgb, hvor hvert tegn tilsvarer dobbel. Dermed bør oppføringen #f7O betraktes som #ff7700.
Eksempel: HEX-farge
- Prøv selv"
rød: #FF0000
grønn: #00FF00
blå: #0000FF
rød: #FF0000
grønn: #00FF00
blå: #0000FF
rød+grønn=gul: #FFFF00
rød+blå=lilla: #FF00FF
grønn+blå=cyan: #00FFFF
Liste over vanlige farger (navn, HEX og RGB):
| engelsk navn | Russisk navn | Prøve | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Amaranth | #E52B50 | 229 | 43 | 80 | |
| Rav | Rav | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Blå grønn | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Svart | Svart | #000000 | 0 | 0 | 0 | |
| Blå | Blå | #0000FF | 0 | 0 | 255 | |
| Bondi blå | Bondi strandvann | #0095B6 | 0 | 149 | 182 | |
| Messing | Messing | #B5A642 | 181 | 166 | 66 | |
| brun | brun | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| Mørk vårgrønn | Mørk vårgrønn | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Aubergine | Aubergine | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| Gull | Gull | #FFD700 | 250 | 215 | 0 | |
| Grå | Grå | #808080 | 128 | 128 | 128 | |
| Grønn | Grønn | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
| Malakitt | Malakitt | #0BDA51 | 11 | 218 | 81 | |
| marinen | Mørke blå | #000080 | 0 | 0 | 128 | |
| Oker | Oker | #CC7722 | 204 | 119 | 34 | |
| Oliven | Oliven | #808000 | 128 | 128 | 0 | |
| oransje | oransje | #FFA500 | 255 | 165 | 0 | |
| Fersken | Fersken | #FFE5B4 | 255 | 229 | 180 | |
| Gresskar | Gresskar | #FF7518 | 255 | 117 | 24 | |
| Lilla | Fiolett | #800080 | 128 | 0 | 128 | |
| rød | rød | #FF0000 | 255 | 0 | 0 | |
| Safran | Safran | #F4C430 | 244 | 196 | 48 | |
| Sjøgrønn | Grønt hav | #2E8B57 | 46 | 139 | 87 | |
| Sumpgrønn | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Blågrønn | Blå grønn | #008080 | 0 | 128 | 128 | |
| Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
| Fiolett | Fiolett | #8B00FF | 139 | 0 | 255 | |
| Gul | Gul | #FFFF00 | 255 | 255 | 0 | |
Fargekoder (bakgrunn) etter metning og fargetone.
Vlad Merzhevich
I HTML spesifiseres farge på en av to måter: ved hjelp av heksadesimal kode og ved navn på bestemte farger. Metoden basert på det heksadesimale tallsystemet brukes overveiende, da den er den mest universelle.
Heksadesimale farger
HTML bruker heksadesimale tall for å spesifisere farger. Det heksadesimale systemet, i motsetning til desimalsystemet, er, som navnet antyder, basert på tallet 16. Tallene vil være som følger: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Tall fra 10 til 15 erstattes av latinske bokstaver. I tabellen 6.1 viser samsvaret mellom desimaltall og heksadesimaltall.
Tall større enn 15 i det heksadesimale systemet dannes ved å kombinere to tall til ett (tabell 6.2). For eksempel tilsvarer tallet 255 i desimal tallet FF i heksadesimalt.
For å unngå forvirring når det gjelder å definere tallsystemet, er et heksadesimalt tall innledet med et hash-symbol #, for eksempel #aa69cc. I dette tilfellet spiller saken ingen rolle, så det er tillatt å skrive #F0F0F0 eller #f0f0f0.
En typisk farge brukt i HTML ser slik ut.
Her er bakgrunnsfargen på nettsiden satt til #FA8E47. Hash-symbolet # foran et tall betyr at det er heksadesimalt. De to første sifrene (FA) definerer den røde komponenten i fargen, de tredje til og med fjerde sifrene (8E) definerer den grønne komponenten, og de to siste sifrene (47) definerer den blå komponenten. Sluttresultatet blir denne fargen.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Hver av de tre fargene - rød, grønn og blå - kan ha verdier fra 00 til FF, noe som resulterer i totalt 256 nyanser. Dermed kan det totale antallet farger være 256x256x256 = 16 777 216 kombinasjoner. En fargemodell basert på røde, grønne og blå komponenter kalles RGB (rød, grønn, blå; rød, grønn, blå). Denne modellen er additiv (fra add - add), der tillegget av alle tre komponentene danner fargen hvit.
For å gjøre det lettere å navigere i heksadesimale farger, ta hensyn til noen regler.
- Hvis verdiene til fargekomponentene er de samme (for eksempel: #D6D6D6), vil resultatet være en grå nyanse. Jo høyere tall, desto lysere er fargen, med verdier fra #000000 (svart) til #FFFFFF (hvit).
- En lys rød farge dannes hvis den røde komponenten gjøres maksimal (FF) og de resterende komponentene settes til null. En farge med en verdi på #FF0000 er den rødest mulige røde nyansen. Det samme gjelder for grønn (#00FF00) og blå (#0000FF).
- Gul (#FFFF00) lages ved å blande rødt og grønt. Dette er godt synlig på fargehjulet (fig. 6.1), som presenterer primærfargene (rød, grønn, blå) og komplementære eller tilleggsfarger. Disse inkluderer gul, cyan og fiolett (også kalt magenta). Generelt kan enhver farge oppnås ved å blande farger nær den. Dermed oppnås cyan (#00FFFF) ved å kombinere blått og grønt.
Ris. 6.1. Fargesirkel
Farger basert på heksadesimale verdier trenger ikke å velges empirisk. For dette formålet er en grafisk editor som kan jobbe med forskjellige fargemodeller, for eksempel Adobe Photoshop, egnet. I fig. Figur 6.2 viser vinduet for å velge en farge i dette programmet; den resulterende heksadesimale verdien for gjeldende farge er skissert med en linje. Du kan kopiere og lime den inn i koden din.
Ris. 6.2. Vindu for valg av farger i Photoshop
Nettfarger
Hvis du setter skjermens fargegjengivelseskvalitet til 8 biter (256 farger), kan samme farge vises forskjellig i forskjellige nettlesere. Dette er på grunn av måten grafikk vises på, når nettleseren jobber med sin egen palett og ikke kan vise en farge som ikke er i paletten. I dette tilfellet erstattes fargen med en kombinasjon av piksler av andre, nær den, farger som imiterer den gitte. For å sikre at fargen forblir den samme på tvers av ulike nettlesere, ble en palett med såkalte nettfarger introdusert. Nettfarger er de fargene som hver komponent - rød, grønn og blå - er satt til en av seks verdier - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) 255 (FF). Den heksadesimale verdien til denne komponenten er angitt i parentes. Totalt antall farger fra alle mulige kombinasjoner gir 6x6x6 - 216 farger. Et eksempel på nettfarge er #33FF66.
Hovedtrekket til nettfarger er at det ser likt ut i alle nettlesere. For øyeblikket er relevansen til nettfarger veldig liten på grunn av forbedringen i kvaliteten på skjermene og utvidelsen av deres evner.
Farger etter navn
For å unngå å måtte huske et sett med tall, kan du bruke navnene på ofte brukte farger i stedet. I tabellen 6.3 viser navnene på populære fargenavn.
| Fargenavn | Farge | Beskrivelse | Heksadesimal verdi |
|---|---|---|---|
| svart | Svart | #000000 | |
| blå | Blå | #0000FF | |
| fuchsia | Lys lilla | #FF00FF | |
| grå | Mørk grå | #808080 | |
| grønn | Grønn | #008000 | |
| lime | Lysegrønn | #00FF00 | |
| rødbrun | Mørkerød | #800000 | |
| marinen | Mørke blå | #000080 | |
| oliven | Oliven | #808000 | |
| lilla | Mørklilla | #800080 | |
| rød | rød | #FF0000 | |
| sølv | Lysegrå | #C0C0C0 | |
| blågrønn | Blå grønn | #008080 | |
| hvit | Hvit | #FFFFFF | |
| gul | Gul | #FFFF00 |
Det spiller ingen rolle om du angir en farge ved navn eller ved å bruke heksadesimale tall. Disse metodene er like i sin effekt. Eksempel 6.1 viser hvordan du setter bakgrunns- og tekstfarger på en nettside.
Eksempel 6.1. Bakgrunn og tekstfarge
Eksempeltekst
I dette eksemplet settes bakgrunnsfargen ved å bruke bgcolor-attributtet til taggen
, og tekstfargen gjennom tekstattributtet. For variasjon er tekstattributtet satt til et heksadesimalt tall, og bgcolor-attributtet er satt til det reserverte søkeordet teal .