Dessverre er det ennå ikke mulig å vise smaksopplevelsene på siden. Men dette kan kompenseres fullt ut ved hjelp av farger. Tross alt lar html-farger deg vise hvilken som helst av de millioner av nyanser. så " fargeblyanter Det er mye mer enn syv i settet hans.
Farger i html
I html kan farge spesifiseres i flere formater:
1. Som en heksadesimal verdi - koden spesifisert i det heksadesimale systemet brukes. Slike html-fargekoder består av tre par heksadesimale tall. Hvert par er ansvarlig for metningen av fargetonen med hovedfargen:
- Det første numeriske paret er ansvarlig for den røde fargen;
- Det andre paret er for innholdet av grønt;
- Sistnevnte er for innholdet i den blå fargen.
En hash plasseres i begynnelsen av koden (før tallene). Dette er den heksadesimale fargekoden. I tillegg til tall fra 1 til 9, bruker dette tallsystemet bokstaver i det latinske alfabetet (A, B, C, D, E, F).
For eksempel vil hvit kode i html se ut som #FFFFFF:
2. Nøkkelord - html støtter for tiden ca. 147 nøkkelord. Men ikke alle disse ordene er unike. Noen av dem refererer til samme fargenyanse.
Grå er representert med to nøkkelord: grå og grå. Deres heksadesimale kode (HEX) er satt med samme verdi # 808080.
Eksempel:
#808080
3. I RGB-format - denne html-fargekodingen er basert på bruken av tre verdier, satt 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å.
Fargenummeret i RGB-format skrives som følger: rgb (0, 210, 100).
bakgrunnsfarge: rgb (100,186,43)
4. I RGBA-format - 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 fargeinnstillinger er det lett å bli forvirret. Derfor ble et spesielt fargekart oppfunnet. I den er 147 nøkkelnavn på fargenyanser gitt samsvarskoder i alle hovedstandarder for fargerepresentasjon. I tillegg er hvert felt utstyrt med en stolpe for visuell fargetilpasning. En av disse tabellene er presentert på nettstedet colorscheme.ru:
Men selv med en slik strukturering av kampen kan valget av ønsket nyanse være vanskelig. Og det er ikke et faktum at fargekodetabellen inneholder den rette.
For å komme rundt denne barrieren og gjøre det så enkelt som mulig å finne den riktige nyansen, er det utviklet interaktive webtjenester. Brukergrensesnittet deres kan variere noe.
På nettstedet html-color-codes.info ser fargegeneratoren slik ut:
Og innenfor tjenesten color-picker.appsmaster.co er dette verktøyet implementert litt annerledes:
Metningen til hver farge i generatoren settes ved hjelp av spesielle glidere. Visuelt vises fargetonen i fargen på rammen og rektangelet på venstre side. Nederst, i 3 felter, vises fargekoden i hovedformatene.
Men fargegeneratoren er ikke bare tilgjengelig på spesialiserte nettsteder. Nesten alle grafiske redaktører er utstyrt med et slikt verktøy. For eksempel Photoshop:
Fargesikkerhet
Og det var lenge siden, tilbake i epoken med skjermkort som kun støtter 256 farger. I disse fjerne tider kunne operativsystemer bare vise et visst antall åtte-bits nyanser uten forvrengning.
Så ble det flotte fargesafe bordet utviklet. Det indikerte 216 nyanser som kunne vises uten forvrengning i noen av datidens nettlesere. Og til denne dag denne " flott manuskript"Er fortsatt tilgjengelig på noen ressurser:
I vår tid har alt forandret seg. Derfor er alle sikkerhetsregler ved arbeid med farge i html helt kansellert. Tross alt støtter moderne maskinvare mer enn 16 millioner forskjellige nyanser. Og 216 trygge farger har sunket inn i glemselen.
Heksadesimale tall brukes til å angi 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 heksadesimal er dannet ved å kombinere to tall til ett. For eksempel er 255 desimal lik FF heksadesimal. For å unngå forvirring i definisjonen av tallsystemet, plasseres hash-symbolet # foran det heksadesimale tallet, for eksempel # 666999. Hver av de tre fargene - rød, grønn og blå - kan variere fra 00 til FF. Dermed er fargebetegnelsen delt inn i tre komponenter #rrggbb, der de to første tegnene markerer den røde komponenten i fargen, de to midterste - grønn, og de to siste - blå. Det er tillatt å bruke en forkortet form som #rgb, hvor hvert tegn skal dobles. Så # fe0-oppføringen skal behandles som # fee00.
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 noen farger etter navn. Bord 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 %) | marineblå | |
| 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 %) | Lilla |
Med 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 bestemme fargen ved å bruke desimalverdiene til de røde, grønne og blå komponentene. Hver av de tre fargekomponentene har en verdi fra 0 til 255. Det er også tillatt å sette fargen i prosent, mens 100 % vil tilsvare tallet 255. Først angis rgb nøkkelordet, og deretter i parentes fargekomponenter er angitt, atskilt med komma, 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 kontrollerer gjennomsiktigheten til elementet. En verdi på 0 tilsvarer full gjennomsiktighet, 1 til opasitet og en mellomverdi som 0,5 til semi-transparens.
RGBA ble lagt til i CSS3, så CSS-kodevalidering bør gjøres med denne versjonen. Det skal bemerkes at CSS3-standarden fortsatt er under utvikling og noen funksjoner kan endres. For eksempel blir en RGB-farge lagt til bakgrunnsfargeegenskapen validert, men en farge lagt til bakgrunnsegenskapen ikke lenger. 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 dannet av en kombinasjon av de første bokstavene Hue (nyanse), Saturate (metning) og Lightness (letthet). Hue er verdien av en farge på fargehjulet (fig. 1) og er gitt i grader. 0 ° er rødt, 120 ° er grønt og 240 ° er blått. Fargeverdien kan variere fra 0 til 359.
Ris. 1. Fargehjul
Metning er intensiteten til en farge, målt i prosent fra 0 % til 100 %. En verdi på 0 % angir ingen farge og en gråtone, 100 % er maksimal metningsverdi.
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 blir 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 som angir gjennomsiktigheten til elementet. En verdi på 0 tilsvarer full gjennomsiktighet, 1 til opasitet og en mellomverdi som 0,5 til semi-transparens.
Fargeverdier i RGBA-, HSL- og HSLA-formater er lagt til i CSS3, så sørg for å se etter versjonsgyldighet når du bruker disse formatene.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
En advarsel
Alle metodene for å fange en løve 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 resultatet. Husk at løven er et rovdyr og et farlig dyr!
Resultatet av dette eksemplet er vist i fig. 2.
Ris. 2. Farger på nettsiden
CSS-fargekoder brukes til å spesifisere en farge. Vanligvis brukes fargekoder eller fargeverdier for å angi en farge for enten forgrunnen til et element (for eksempel tekstfarge, lenkefarge) eller for bakgrunnen 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 dine egne fargeverdier i forskjellige formater. Følgende tabell viser alle mulige formater:
De listede formatene er beskrevet mer detaljert nedenfor.
CSS-farger - heksadesimale koder
Heksadesimal fargekode er en sekssifret representasjon av en 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 den kortere formen for sekssifret notasjon. I dette formatet gjentas hvert siffer for å produsere den tilsvarende sekssifrede fargeverdien. 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 "#". Følgende er eksempler på bruk av heksadesimal notasjon.
CSS-farger - RGB-verdier
RGB-verdi er fargekoden, 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 fargeegenskapen rgb (), 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.
Trygge nettleserfarger
Nedenfor er en tabell med 216 farger som er de sikreste og mest datamaskinuavhengige. Disse CSS-fargene varierer fra 000 000 til FFFFFF heksadesimal. De er trygge å bruke fordi de sikrer at alle datamaskiner viser farger riktig når de arbeider med en 256-fargepalett.
| CSS "sikker" fargetabell | |||||
| #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 |
