Grønn sekskant. Farge i stiler kan spesifiseres på forskjellige måter: med heksadesimal verdi, etter navn, i RGB, RGBA, HSL, HSLA-format
Dessverre er det ennå ikke mulig å vise smaksopplevelser på nettsiden. Men dette kan kompenseres fullt ut med fargeskala. Tross alt lar html-farger deg vise hvilken som helst av millioner av nyanser. Så " fargeblyanter Det er mange flere enn syv i settet hans.
Fargeskjema i html
I html kan farge spesifiseres i flere formater:
1. Som en heksadesimal verdi – koden spesifisert i heksadesimalt system kalkulus. Slike fargekoder i html består av tre par heksadesimale tall. Hvert par er ansvarlig for metningen av skyggen med sin primære farge:
- Det første numeriske paret er ansvarlig for fargen rød;
- Det andre paret er for innholdet i den grønne fargen;
- Sistnevnte er for sitt blå innhold.
Et hash-merke plasseres i begynnelsen av koden (før tallene). Dette er hva heksadesimal står for fargekode. I tillegg til tall fra 1 til 9, bruker dette tallsystemet bokstaver i det latinske alfabetet (A, B, C, D, E, F).
For eksempel kode hvit i html vil det se ut som #FFFFFF:
2. Nøkkelord - HTML støtter for øyeblikket ca. 147 nøkkelord. Men ikke alle disse ordene er unike. Noen av dem refererer til samme fargenyanse.
Fargen grå er representert med to nøkkelord: grå og grå . Deres heksadesimale kode (HEX) er gitt med samme verdi #808080.
Eksempel:
#808080
3. B RGB-format– denne fargekodingen i html er basert på bruken av tre verdier, spesifisert i området fra 0 til 255. Hver av dem bestemmer metningen av fargetonen med en av primærfargene:
- R - rød (rød);
- G - grønn (grønn);
- B – blå (blå).
Fargenummeret i RGB-format skrives i følgende form: rgb(0, 210, 100).
bakgrunnsfarge:rgb(100,186,43)
4. I RGBA-formatet - det er et forbedret RGB-format, der den fjerde verdien spesifiserer gjennomsiktigheten av fargen som en desimalbrøk fra 0 til 1.
Brukseksempel:
bakgrunnsfarge:rgba(100,86,143,0.2)
bakgrunnsfarge:rgba(100,86,143,0.5)
bakgrunnsfarge:rgba(100,86,143,0.8)
bakgrunnsfarge:rgba(100,86,143,1)
HTML fargetabeller og fargegeneratorer
Med et så bredt utvalg av fargeinnstillingsformater er det lett å bli forvirret. Derfor ble et spesielt fargebord oppfunnet. I det til 147 nøkkelnavn fargenyanser er gitt samsvarskoder i alle viktige fargestandarder. I tillegg er hvert felt utstyrt med en stolpe for visuelt fargevalg. En av disse tabellene er presentert på nettstedet colorscheme.ru:
Men selv med denne struktureringen av matching, kan det være vanskelig å velge riktig nyanse. Og det er ikke et faktum at tabellen med fargekoder vil inneholde den du trenger.
For å komme rundt denne hindringen og gjøre det så enkelt som mulig å velge riktig nyanse, er det utviklet interaktive nettjenester. Deres brukergrensesnitt kan avvike litt fra hverandre.
På nettstedet html-color-codes.info ser fargegeneratoren slik ut:
Og innenfor color-picker.appsmaster.co-tjenesten er dette verktøyet implementert litt annerledes:
Metningen til hver farge i generatoren settes ved hjelp av spesielle glidere. Visuelt vises skyggen av fargen på rammen og rektangelet på venstre side. Nederst viser 3 felt fargekoden i grunnleggende formater.
Men fargegeneratoren er ikke bare tilgjengelig på spesialiserte nettsteder. Nesten alle grafiske redaktører er utstyrt med et lignende verktøy. For eksempel Photoshop:
Sikkerhetsregler ved arbeid med farger
Og dette var lenge siden, tilbake i epoken med skjermkort som kun støttet 256 farger. I de fjerne tider OS kunne bare vises uten forvrengning en viss mengdeåtte bit nyanser.
Så ble det trukket et flott bord trygge farger. Den spesifiserte 216 nyanser som kunne vises uten forvrengning i hvilken som helst av datidens nettlesere. Og den dag i dag denne " flott manuskript» er fortsatt tilgjengelig på noen ressurser:
Nå for tiden har alt forandret seg. Derfor er alle sikkerhetsregler ved arbeid med farge i html helt kansellert. Tross alt moderne maskinvare støtter mer enn 16 millioner forskjellige nyanser. Og 216 trygge farger har sunket inn i glemselen.
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 med latinske bokstaver. Tall større enn 15 i det heksadesimale systemet dannes ved å kombinere to tall til ett. For eksempel tallet 255 tommer desimalsystem tilsvarer tallet FF i heksadesimal. 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 en farge ved å bruke verdiene til de røde, grønne og blå komponentene i desimal. 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 mellomverdi som 0,5 - gjennomsiktighet.
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+ |
Navn HSL-format dannet av en kombinasjon av de første bokstavene Hue (nyanse), Saturate (metning) og Lightness (letthet). 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. Fargesirkel
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 nyanse av grå, 100 % maksimal verdi 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.
Fargeverdier i RGBA-formater, HSL og HSLA er lagt til CSS3, så når du bruker disse formatene, sjekk koden din for versjonsgyldighet.
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
I HTML farge kan stilles inn på tre måter:
Angi en farge i HTML etter navnet
Noen farger kan spesifiseres ved navn, ved å bruke fargenavnet på engelske språk. De vanligste søkeordene: svart, hvit, rød, grønn, blå osv.:
Tekstfarge – rød
De mest populære fargene i Consortium-standarden Verdensveven(Engelsk) Verdensomspennende Nettkonsortium, W3C):
| 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ødt 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 det samme grønn farge middels metning:
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, det største antallet 255 i desimal tilsvarer 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 minimumsverdi(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.
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 angi fargeverdiene dine ulike 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.
Heksadesimal verdi kan hentes fra hvilken som helst grafikk programvare, som for eksempel 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 |
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 heksede farger, vennligst ta hensyn til noen regler.
- Hvis verdiene til fargekomponentene er de samme (for eksempel: #D6D6D6), blir resultatet grå nyanse. Hvordan større antall, jo lysere fargen er, 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. Situasjonen er lik med 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. Egnet for dette formålet grafikk editor kan jobbe med forskjellige fargemodeller, for eksempel Adobe Photoshop. 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 farge i Photoshop program
Nettfarger
Hvis du setter skjermens fargegjengivelseskvalitet til 8 bits (256 farger), kan den samme fargen vises i forskjellige nettlesere på min egen måte. 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. I dette øyeblikket Relevansen til nettfarger er 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 i dette eksemplet Bakgrunnsfargen settes ved å bruke bgcolor-attributtet til taggen
, og tekstfargen gjennom tekstattributtet. For variasjon er verdien av tekstattributtet satt til: heksadesimalt tall, og bgcolor ved å bruke reservert nøkkelord blågrønn.