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		Marine		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 grønne fargen med 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 med 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
Marine	Mørk 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.

CSS er ikke forstått). Derfor trenger den fremtidige webmasteren ganske enkelt å studere HTML-verktøy som lar deg endre farge, for eksempel for å lage lyse og fargerike nyhetsbrev på e-post som vil tiltrekke seg oppmerksomheten til nettstedets målgruppe.

Dette innlegget er ganske langt, men fra det vil du lære om alle de tekniske funksjonene ved å jobbe med farger ved hjelp av HTML. Vi vil begynne opptaket med å forstå spørsmålet: hvorfor må vi fremheve visse elementer på en HTML-side med farger? Så skal vi snakke om RGB-modellen, som lar deg sette farger i HTML ved hjelp av spesialkoder (underveis skal vi se på desimalfargekoder og heksadesimale HTML-fargeverdier). Også fra dette innlegget vil du lære om fargepaletten, og også forstå hvorfor det ikke er noen palett i HTML. Og på slutten av denne publikasjonen vil det være eksempler på endring av bakgrunnsfarge, tekst og lenker.

Bruke farger i HTML

Nettsider ville vært kjedelige og uinteressante uten bilder, som vi snakket om tidligere og i stor detalj. Men bilder har en betydelig ulempe: hvert bilde er et ekstra og følgelig en ekstra belastning på hostingen.

Jeg vil merke meg at jeg ikke brukte et eneste bilde for å designe WordPress-bloggen min. Akkurat det samme I dag skal vi snakke om farger i HTML.. Farger i HTML brukes til forskjellige formål, for eksempel kan vi designe nettsidelayouter ved å fremheve enkelte elementer med en eller annen farge.

Ved å bruke farger kan vi fokusere oppmerksomheten til våre besøkende på en bestemt tekst eller blokk av nettstedet. Merk at det også bestemmes ved hjelp av farger på en slik måte at brukeren kan forstå: hvilken lenke han allerede har klikket på, hvilken lenke han ennå ikke har besøkt, og hvilken HTML-side han er på for øyeblikket.

Vær forsiktig bruke farger for å designe HTML-dokumenter, ikke alle farger passer sammen, og ikke alle farger vil være tiltalende for besøkende på nettstedet ditt. Men du bør spørre webdesignere om disse finessene. Denne artikkelen vil hjelpe deg å forstå de tekniske funksjonene som lar deg kontrollere fargen på HTML-sideelementer.

Men du bør ikke glemme at designet skal skilles fra innholdet, så det er bedre å bruke CSS for å manipulere farger på HTML-sider, men vi vil snakke om dette i et annet innlegg. Nå får vi se Hvilke verktøy har HTML for å kontrollere farger på nettstedssider?.

I IT-bransjen finnes det mange fargemodeller for fargemanipulering. Den mest brukte fargerepresentasjonsmodellen er RGB-modellen. Vi vil snakke om noen av funksjonene til denne modellen her, og det vil komme en egen publikasjon for en mer detaljert introduksjon til RGB. Nedenfor finner du en liste over fargemodeller som brukes i IT (ikke bare HTML og CSS):

1. RGB-modell. Denne modellen har blitt veldig utbredt og er kanskje en av de mest praktiske og vanlige måtene å manipulere fargen på HTML-elementer på.
2. Modell RGBA. Denne modellen er veldig lik RGB-modellen, men inkluderer en alfakanal for fargen. Det spesielle med RGBA-modellen er at den lar deg justere ikke bare fargen på HTML-elementet, men også dets gjennomsiktighet på grunn av tilstedeværelsen av en alfakanal. RGBA-modellen ble lagt til CSS3 og støttes ikke av eldre nettlesere.
3. Modell HSL. Det særegne ved HSL-modellen er at vi setter fargen ved å bruke parameterne: fargetone, flathet og lyshet. Denne modellen er noe vanskeligere å forstå enn RGB-modellen.
4. Modell HSLA. Denne modellen er veldig lik HSL-modellen, men akkurat som RGBA-modellen lar den deg jobbe med alfafargekanalen, så ved å bruke HSLA kan vi angi ikke bare fargen på et HTML-element på siden, men også dets gjennomsiktighet .
5. Modell HSV (HSB). Denne modellen må ikke forveksles med HSL-modellen. Merk at de fire første modellene kan brukes i HTML eller CSS for å designe nettsider, men HSV-modellen kan ikke. HSV ble designet av en av grunnleggerne av Pixar i 1978 og ligner veldig på HSL.
6. Modell CMY eller CMYK. Denne modellen brukes i alle fargeskrivere for utskrift. CMYK-modellen er basert på regelen om at utskrift skjer på hvite ark. Enhver CMYK-farge oppnås ved å blande Cyan (lyseblå, turkis), Magenta (magenta) og gul. Hver farge i CMY-modellen har en opasitetskarakteristikk (mengde blekk), målt i prosent. Men i tillegg til de tre oppførte fargene, bruker CMYK-modellen også svart.

Alle de ovennevnte fargemodellene er maskinvareavhengige, det vil si hvis du angi fargen på et HTML-element ved å bruke RGB- eller HSL-modellen, da er det umulig å si med sikkerhet hvilken eksakt fargenyanse en besøkende på nettstedet ditt vil se, siden skjermene til alle brukere er forskjellige og de formidler farger forskjellig. Vær også oppmerksom på at alle de ovennevnte modellene er basert på RGB-modellen og enhver farge spesifisert i noen av modellene (unntatt HSLA og RGBA på grunn av tilstedeværelsen av en alfakanal) kan konverteres til RGB.

Hvis vi snakker om maskinvareuavhengige fargeoverføringsmodeller, er det verdt å merke seg LAB-modellen. Så vi tok en liten pause fra å jobbe med farger i HTML ved å bli kjent med noen fargemodeller. Merk at nettlesere bare "forstår" de fire første modellene: HSL, RGB, HSLA og RGBA. Derfor kan vi bare kontrollere fargen på HTML-elementer ved å bruke disse modellene.

Hvordan fargen til et HTML-element dannes: noen funksjoner i RGB-modellen

La oss finne ut av det hvordan fargen til et HTML-element dannes og med noen funksjoner i RGB-modellen. Merk at vi vil snakke om RGB-modellen, samt andre modeller som brukes til å designe nettsider, litt senere i separate innlegg.

Så RGB-modellen står for rød, grønn, blå. RGB-modellen er basert på prinsippet om additivitet. Dette prinsippet er at for å oppnå hvilken som helst farge, legges farge til svart. For en bedre forståelse, se for deg at skjermen din er en svart vegg og du har tre spotlights: den første lyser rødt, den andre lyser grønt og den tredje lyser blått. Du kan justere lysstyrken til hver spotlight ved å bruke en linjal med tall fra 0 til 255. Følgelig, hvis du setter spotlighten til null, slår den seg av og lyser ikke hvis verdien er 255, så produserer spotlighten den lyseste fargen som er mulig .

Dermed viser det seg at hvis du lyser en rød og en grønn spotlight på samme punkt, så vil du legge merke til en gul flekk på en svart vegg. Kombinerer du rødt og blått får du lilla, og kombinerer du grønt og blått vil lysflekken på en svart vegg være Cyan, men peker du alle tre spottene på ett punkt vil lysflekken være hvit.

Prinsippet beskrevet ovenfor ligger til grunn for RGB-modellen og brukes til å manipulere farger i HTML-elementer på en side i en nettleser.

HTML-attributter for å endre fargen på elementer: bakgrunnsfargen til elementet og fargen på teksten inne i elementet

Brukes til å gjøre sideelementer unike. Ved å bruke HTML-attributter kan vi manipulere fargen på elementer:

1. HTML-attributtfarge. Dette attributtet lar deg endre fargen på teksten inne i HTML-elementet. Attributtet kan ta verdier i form av HTML-fargenavn og RGB-modellkoder i heksadesimale og desimale notasjoner. Fargeattributtet er et unikt HTML-attributt som lar deg endre fargen på tekst inne i visse HTML-elementer.
2. HTML-tekstattributt. Dette attributtet er et unikt tag-attributt . Tag sammen med tagger Og skjema. Hvis du husker det, inne i beholderen elementer plasseres som deretter vises av nettleseren i visningsområdet. Tekstattributtet lar deg spesifisere Standard tekstfarge for hele HTML-siden.
3. HTML-attributt bgcolor. Det er også et unikt HTML-attributt og lar deg endre bakgrunnsfargen til enkelte HTML-elementer.
4. HTML-attributt vlink. Dette attributtet er unikt og gjelder bare for taggen for å endre fargen på en lenke som brukeren allerede har besøkt.
5. HTML-attributt alink. Dette attributtet er også unikt og gjelder kun for taggen . Alink-attributtet endrer fargen på den aktive HTML-lenken.
6. HTML-lenkeattributt. Link-attributtet brukes bare i forbindelse med en tag og tjener til å endre fargen på HTML-sidekoblinger som brukeren ennå ikke har besøkt.

Vær oppmerksom på at det ikke anbefales å bruke attributter for å endre fargen på HTML-elementer, siden det finnes overlappende stilark som lar deg skille utformingen av en nettside fra innholdet.

Bruke desimalfargekoder i HTML

Så vi snakket om det faktum at du kan stille inn lysstyrken til søkelyset ved hjelp av en spesiell linjal der det er nummererte tegninger fra 0 til 255. La oss nå se hvordan dette vil hjelpe oss med å endre fargen på HTML-elementer. Saken er at vi kan endre fargen på teksten inne i et HTML-element eller bakgrunnsfargen i HTML ved å bruke desimalkode som følger:

Hvis du oppretter et HTML-dokument der brødtekstbeholderen er beskrevet, som i eksempelet, vil du se:

1. Bakgrunnsfargen til HTML-dokumentet er nå grønn: bgcolor=”rgb (0,255,0)”.
2. Tekstfargen på HTML-siden blir blå: text="rgb (0,0,255)".
3. HTML-fargen på en lenke som brukeren ikke har besøkt vil være hvit: link=”rgb (255,255,255)”.
4. Fargene på lenken som for øyeblikket er åpen vil være svart: alink=”rgb (0,0,0)”.
5. Og fargen på HTML-lenken som allerede er besøkt vil være rød: vlink=”rgb (255,0,0)”.

Vennligst merk: ingen forbyr deg å justere "spotlight power" etter eget skjønn, du kan angi HTML-farge, for eksempel på denne måten:

rgb(94; 85; 50)

Og få fargen på barnslig overraskelse. Dette er særegenheten, fleksibiliteten og bekvemmeligheten til RGB-modellen. Skjermen din er en svart vegg med spotlights som skinner på den, og du kan justere styrken til disse spotlightene og lage alle slags bakgrunnsfarger, tekst og lenker ved å bruke HTML-attributter i desimalnotasjonssystemet, eller du kan også si: ved hjelp av desimalfargekoder.

Faktisk Det er feil å si desimalfargekoder i HTML, ville det være mer riktig å si RGB desimal fargekoder, siden denne modellen ikke bare brukes til å designe nettsider i HTML og CSS.

Heksadesimale HTML-fargeverdier

Å angi fargen på HTML-elementer ved hjelp av desimalkoder av RGB-modellen er ikke veldig praktisk (og for øyeblikket støtter ikke alle nettlesere denne metoden for fargemanipulering), siden opptaket ikke vil være den mest kompakte det er mye mer praktisk angi fargen på HTML-elementer ved hjelp av heksadesimale verdier. På bildet nedenfor kan du se hvordan desimalverdier konverteres til heksadesimale.

For de som ikke er kjent med det heksadesimale tallsystemet bør det gis en liten forklaring slik at du enkelt kan manipulere fargen på HTML-elementer ved å bruke heksadesimale RGB-modellkoder. For det første heter desimaltallsystemet slik fordi et hvilket som helst tall kan oppnås ved en kombinasjon av ti sifre (terminologi er viktig: det er forskjell mellom et tall og et siffer): 0, 1, 2, 3, 5, 6, 7, 8, 9.

I det heksadesimale tallsystemet kan et hvilket som helst tall skrives ved å bruke en kombinasjon av seksten sifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. For å lette forståelsen kan du anta at a er ti og f er femten. For eksempel vil tallet seksten bli skrevet i heksadesimal som 10. Og tallet 255 vil bli skrevet som ff.

La oss nå se hvordan vi kan angi fargen på HTML-elementer ved hjelp av heksadesimale verdier, la oss gjenta vårt forrige eksempel, og erstatte desimalfargekodene med deres heksadesimale motstykker:

< body alink = ”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”>

Vennligst merk: å skrive farge i HTML i heksadesimalt format er noe mer kompakt enn i desimal, det er den første. For det andre: kraften til hver spotlight settes av tall fra 0 til 255. For å skrive tallet 255 kreves det to sifre i heksadesimalt format (ff = 250), så lysstyrken til hver fargekanal (våre spotlights kalles riktig fargekanalen, fargekanal) er satt av to tall fra 0 til f.

Vennligst merk: lysstyrken til hver fargekanal settes separat, men hvis vi forestiller oss at dette er et enkelt tall, så er det maksimalt mulige tallet i det heksadesimale tallsystemet til RGB-modellen ffffff, det vil gi oss hvitt, og i desimalsystemet er det: 16.777.215. Dette antallet farger og nyanser lar deg stille inn/bruke RGB-modellen. Dette tallet kommer fra det faktum at hver fargekanal har 256 lysstyrkeverdier (fra 0 til 255), henholdsvis: 256 * 256 * 256 = 16.777.215.

Heksadesimale HTML-fargeverdier er mer kompakte og klarere, de fleste nettdesignere og layoutdesignere bruker heksadesimale verdier for å manipulere farger i HTML, så vi anbefaler at du ikke blir vant til desimalformen for fargenotasjon, men umiddelbart bruker heksadesimal.

Det er klart at det til å begynne med vil være vanskelig for en nybegynner eller layoutdesigner å navigere i den heksadesimale formen for fargenotasjon, så nesten enhver grafisk editor har en såkalt fargepalett, som lar deg velge ønsket farge og få sin kode for ulike fargemodeller i ulike tallsystemer.

Noen tekstredigerere, for eksempel , har palettutvidelser som er veldig nyttige når du raskt vil velge en farge og endre den. Jeg kan ikke si noe om dette i denne forbindelse.

Fargenavn i HTML

HTML-attributter kan ta som verdier ikke bare desimalkoder og heksadesimale verdier, men også spesielle blomsternavn. Det er ikke en god idé å endre fargen på HTML-elementer ved å bruke navnet. For det første, bak fargenavnet i HTML ligger RGB-modellkoden, og for det andre viser hver nettleser fargen på HTML-elementet spesifisert av navnet annerledes, det avhenger bare av ønsket til nettleserutviklerne.

Det er derfor bruk av et fargenavn i HTML anbefales ikke. RGB-modellen er maskinvareavhengig, og fargen spesifisert av navnet avhenger av nettleseren og til og med versjonen. La oss prøve å angi fargen på HTML-sideelementene ved å bruke navnet:

< body alink = ”black ”link = ”#white” vlink=”rød” bgcolor=”grønn” text=”blå”>

Som du forstår, er det mange farger og nyanser. Det er verdt å merke seg her at HTML-attributter ikke lar deg sette en gradient CSS har dette alternativet, men vi snakker om det i et annet innlegg. Og mange farger i HTML har navn. Du kan finne en tabell med fargenavn i HTML og deres RGB-koder på nettstedet mitt.

Tabellen ovenfor viser hvilken farge HTML-elementet vil få hvis du spesifiserer det med navnet. Denne tabellen inneholder 16 farger og deres navn som er godkjent av W3C og skal vises på samme måte i alle nettlesere. Men faktisk, i HTML kan du bruke omtrent 200 fargenavn som støttes av store nettlesere, for eksempel: Opera, Chrome, Firefox, Safari, Internet Explorer (denne uttalelsen er veldig kontroversiell om sistnevnte).

HTML fargepalett

Faktisk det er ingen fargepalett i HTML. La oss huske definisjonen av ordet palett. En palett er et lite tynt brett med en firkantet eller oval form som kunstneren blander maling på og oppnår alle slags farger. Noen ganger lages det et hull i paletten for tommelen for å gjøre den behagelig å holde. Du finner et bilde av paletten nedenfor. Det er derfor det ikke er noen palett i HTML.

Men i ulike tekstredigerere er det plugins for fargepalett som hjelper raskt velge fargen på et HTML-element. Det er også en fargepalett i grafiske redaktører, fordi det ikke er veldig praktisk og morsomt for en designer å sitte og beregne: hvilken farge vil komme ut ved denne eller den lysstyrken til denne eller den kanalen. På bildet nedenfor kan du se den enkleste paletten til Paint-editoren.

Merk at mange fargepalettmoduler og plugins lar deg få en fargekode ikke bare i RGB/RGBA-formatet, men også i formatet til andre modeller. Huske at det ikke er noen palett i HTML, vel, med mindre du er en artist til kjernen og du kaller fargepaletten til HTML-siden disse fargene som ble brukt til å dekorere det (tross alt, noen ganger refererer en palett til fargene som en bestemt kunstner bruker, eller fargene som ble brukt til å lage et bestemt maleri).

Lære å endre tekstfarge i HTML

Vi fikk mye teori om farger i HTML, la oss øve og prøve arbeid med farger på HTML-elementer. Det første vi skal lære å gjøre er endre tekstfarge i HTML-dokument ved hjelp av spesielle attributter og tagger. Åpne en hvilken som helst editor og skriv følgende kode i den:

Lære å jobbe med farger i HTML

Endre tekstfargen

For å endre fargen på teksten kan vi bruke elementets unike BODY-tekstattributt, og vi kan også bruke FONT-elementet og dets fargeattributt. Denne teksten blir nedtonet.

< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >Endre fargen på teksten i HTML-dokumentet< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >Lære å jobbe med farger i HTML< / font > < / h1 > < h2 > < font color = "yellow" >Endre tekstfargen< / font > < / h2 > < p >For å endre tekstfargen kan vi bruke en unik elementets BODY-tekstattributt, og bruk også FONT-elementet < / body > < / html >

Jeg vil lagre denne filen som color.html og råder deg til ikke å glemme . Opptak av farger i desimalsystemet støttes ikke av Chrome, Firefox og Opera, men IE forstår denne fargenotasjonen og fremhever HTML-overskriften i grønt:

Det riktige å si er ikke å endre tekstfargen i HTML, men å endre skriftfargen i HTML. Om

Fargekoder i CSS brukes til å spesifisere en farge. 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 hex-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.

Note: 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 sikreste og mest 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 til tallet FF i heksadesimal.

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å). 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, jo lysere farge, 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. Fargehjul

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 valg av 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-bit (256 farger), kan den samme fargen 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.

Bord 6.3. Navn på noen farger

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ørk rød	#800000
marine		Mørk blå	#000080
oliven		Oliven	#808000
lilla		Mørk lilla	#800080
rød		Rød	#FF0000
sølv		Lys grå	#C0C0C0
blågrønn		Blå-grønn	#008080
hvit		Hvit	#FFFFFF
gul		Gul	#FFFF00

Det spiller ingen rolle om du spesifiserer 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 er bakgrunnsfargen satt 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 .