HTML-färger mörkgrön. Färg i stilar kan specificeras på olika sätt: med hexadecimalt värde, efter namn, i RGB, RGBA, HSL, HSLA-format

I HTML kan färg anges på tre sätt:

Ange en färg i HTML efter dess namn

Vissa färger kan anges med deras namn, med färgnamnet på engelska som värde. De vanligaste sökorden: svart, vit, röd, grön, blå, etc.:

Textfärg – röd

De mest populära färgerna i World Wide Web Consortium (W3C) standard:

Exempel på användning av olika färgnamn:

Exempel: ange en färg med dess namn

• Prova själv "

Rubrik på röd bakgrund

Rubrik på orange bakgrund

Rubrik på lime bakgrund

Vit text på blå bakgrund

Rubrik på röd bakgrund

Rubrik på orange bakgrund

Rubrik på lime bakgrund

Vit text på blå bakgrund

Ange färg med RGB

Vid visning av olika färger på en bildskärm används RGB-paletten som bas. Vilken färg som helst erhålls genom att blanda tre grundläggande färger: R - röd, G - grön, B - blå. Ljusstyrkan för varje färg ges av en byte och kan därför ta värden från 0 till 255. Till exempel visas RGB(255,0,0) som rött eftersom rött är satt till sitt högsta värde (255) och resten är inställda på 0 Du kan också ställa in färgen i procent. Varje parameter indikerar ljusstyrkan för motsvarande färg. Till exempel: värdena rgb(127, 255, 127) och rgb(50%, 100%, 50%) kommer att ställa in samma medelgröna färg:

Exempel: Ange färg med RGB

• Prova själv "

rgb(127, 255, 127)

rgb(50 %, 100 %, 50 %)

rgb(127, 255, 127)

rgb(50 %, 100 %, 50 %)

Ställ in färg efter hexadecimalt värde

Värderingar R G B kan också specificeras med hexadecimala (HEX) färgvärden i formen: #RRGGBB där RR (röd), GG (grön) och BB (blå) är hexadecimala värden från 00 till FF (samma som decimal 0-255) ) . Det hexadecimala systemet, till skillnad från decimalsystemet, bygger, som namnet antyder, på talet 16. Det hexadecimala systemet använder följande tecken: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Här ersätts siffrorna från 10 till 15 med latinska bokstäver. Tal större än 15 i det hexadecimala systemet representeras genom att kombinera två tecken till ett värde. Till exempel motsvarar det högsta talet 255 i decimal det högsta FF-värdet i hexadecimal. Till skillnad från decimalsystemet föregås ett hexadecimalt tal av en hash-symbol. # , till exempel, #FF0000 visas som rött eftersom rött är inställt på sitt högsta värde (FF) och resten av färgerna är satt till sitt lägsta värde (00). Tecken efter hash-symbolen # Du kan skriva med både stora och små bokstäver. Det hexadecimala systemet låter dig använda den förkortade formen #rgb, där varje tecken motsvarar dubbelt. Därför bör posten #f7O betraktas som #ff7700.

Exempel: HEX-färg

• Prova själv "

röd: #FF0000

grön: #00FF00

blå: #0000FF

röd: #FF0000

grön: #00FF00

blå: #0000FF

röd+grön=gul: #FFFF00

röd+blå=lila: #FF00FF

grön+blå=cyan: #00FFFF

Lista över vanliga färger (namn, HEX och RGB):

Färgkoder (bakgrund) efter mättnad och nyans.

Som du vet kan färg påverka en persons tillstånd: både mentalt och fysiskt. Varje dag, när de surfar på webbsidor på Internet, utvärderar ögonen miljontals färger och nyanser. En webbdesigner som är bekant med färgens psykologi kan manipulera besökarens humör för att uppnå vissa mål.

Detta beror på det faktum att vissa nyanser lugnar, och vissa, tvärtom, upphetsar. Därefter kommer vi att prata om hur färg syntetiseras och visas med hjälp av datorteknik.

RGB är en färgmodell som representerar en metod för att erhålla alla färger och deras nyanser genom att blanda i olika proportioner tre huvudkomponenter, som är:

• Röd färg ( Röd);
• grön färg ( Grön);
• Blå färg ( Blå).

Det är härifrån det förkortade namnet RGB kommer. Dessa färger valdes som de viktigaste av en anledning: anledningen är fysiologin hos näthinnan i det mänskliga ögat och hur det uppfattar dem:

RGB-modellen är fortfarande den mest populära idag och används för att återge färger på TV-skärmar och datorskärmar. Eftersom tillverkare försett sina produkter med olika egenskaper skapades 1996 ett enhetligt RGB-baserat färgsyntessystem kallat sRGB, där Microsoft och HP arbetade tillsammans.

Numerisk representation av färg

Som tidigare nämnts bildas RGB-färger genom att blanda primärfärger. För att beskriva intensiteten för var och en av dem antogs ett schema där färg representeras av intervallet 0-255 (8 bitar), vilket i hexadecimal notation motsvarar 00-FF.

Det vill säga att de primära färgerna kommer att se ut så här:

• Röd – RGB (255,0,0);
• Grön – RGB (0,255,0);
• Blå – RGB (0,0,255);

Om färgintensiteten tar värden mindre än 255, erhålls olika nyanser av rött, grönt och blått. Följande är en tabell över deras graderingar, såväl som de hexadecimala värdena för var och en av nyanserna:

RGB färgtabeller

Naturligtvis, förutom graderingar av primära färger, finns det blandade, och deras antal är ganska stort. Därför skapades en tabell med RGB-färger, som presenterar alla befintliga nyanser, såväl som deras namn och numeriska representationer ( i decimal och hexadecimal form).

Du kan se den här. Den här tabellen gör livet mycket lättare för webbdesigners, eftersom du på några sekunder kan hitta den önskade nyansen och ta reda på dess numeriska representation.

Säker RGB-färgpalett

Men vid något tillfälle uppstod ett problem med att visa färger i olika webbläsare, och för att lösa det kompilerades den så kallade "säkra" paletten av RGB-färger, som härleddes genom matematiska beräkningar.

När webbläsaren inte kan visa en färg korrekt kommer den att försöka få något i närheten av vad den behöver genom att blanda intilliggande färger, och troligen blir resultatet helt oacceptabelt:

Genom att använda RGB-färgkoder från denna palett kan en webbutvecklare få sinnesfrid när det gäller visningen av färger på sidorna på sin webbplats när de visas med olika webbläsare, plattformar och bildskärmar. Även om tabellen över säkra färger för tillfället tappar sin relevans ( tekniska framsteg står fortfarande inte stilla), när du använder den kan du, som de säger, sova lugnt.

Guldfärg i RGB-modell

Ordet "guld" användes först i början av 1300-talet för att beskriva färgen på ett kemiskt element som kallas Aurum - guld. I RGB-modellen representeras färgen guld av följande numeriska värden:

• RGB (255, 215, 0) – decimalsystem;
• HEX #FFD700 – hexadecimalt system.

Beige färg i RGB-modell

Beige färg upptar en ganska betydande plats i historien, även om den inte är den mest uttrycksfulla. Många kulturminnen, särskilt antika skulpturer, gjordes av täljsten och täljsten, som har en beige nyans. I RGB-modellen har beige följande numeriska representationer:

• RGB (245, 245, 220) – decimalsystem;
• HEX #F5F5DC – hexadecimalt system.

Nuförtiden, särskilt på World Wide Web, är det sällsynt att se en så "tråkig" färg. Utvecklare föredrar catchy design med ljusa färger. Teknologiska framsteg gör det möjligt att visa ett kolossalt antal färger på monitorer, vilket gör bilden mer realistisk.

Bra dålig

Vlad Merzhevich

I HTML specificeras färg på ett av två sätt: med hjälp av hexadecimal kod och med namnet på vissa färger. Metoden baserad på det hexadecimala talsystemet används övervägande, eftersom den är den mest universella.

Hexadecimala färger

HTML använder hexadecimala tal för att ange färger. Det hexadecimala systemet, till skillnad från decimalsystemet, bygger, som namnet antyder, på talet 16. Siffrorna kommer att vara följande: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Siffror från 10 till 15 ersätts med latinska bokstäver. I tabell 6.1 visar överensstämmelsen mellan decimala och hexadecimala tal.

Tal större än 15 i det hexadecimala systemet bildas genom att kombinera två tal till ett (tabell 6.2). Till exempel motsvarar talet 255 i decimal talet FF i hexadecimal.

För att undvika förvirring vid definitionen av talsystemet föregås ett hexadecimalt tal av en hash-symbol #, till exempel #aa69cc. I det här fallet spelar fallet ingen roll, så det är tillåtet att skriva #F0F0F0 eller #f0f0f0.

En typisk färg som används i HTML ser ut så här.

Här är bakgrundsfärgen på webbsidan inställd på #FA8E47. Hashsymbolen # framför ett tal betyder att den är hexadecimal. De två första siffrorna (FA) definierar den röda komponenten i färgen, den tredje till fjärde siffran (8E) definierar den gröna komponenten, och de två sista siffrorna (47) definierar den blå komponenten. Slutresultatet blir denna färg.

Var och en av de tre färgerna - röd, grön och blå - kan ta värden från 00 till FF, vilket resulterar i totalt 256 nyanser. Det totala antalet färger kan alltså vara 256x256x256 = 16 777 216 kombinationer. En färgmodell baserad på röda, gröna och blå komponenter kallas RGB (röd, grön, blå; röd, grön, blå). Denna modell är additiv (från add - add), där tillägget av alla tre komponenterna bildar färgen vit.

För att göra det lättare att navigera i hexadecimala färger, ta hänsyn till några regler.

• Om värdena för färgkomponenterna är desamma (till exempel: #D6D6D6), blir resultatet en grå nyans. Ju högre siffra, desto ljusare färg, med värden från #000000 (svart) till #FFFFFF (vit).
• En klar röd färg bildas om den röda komponenten görs maximal (FF) och de återstående komponenterna sätts till noll. En färg med värdet #FF0000 är den rödaste möjliga nyansen av rött. Detsamma gäller för grönt (#00FF00) och blått (#0000FF).
• Gul (#FFFF00) görs genom att blanda rött och grönt. Detta är tydligt synligt på färghjulet (Fig. 6.1), som visar primärfärgerna (röd, grön, blå) och komplementära eller ytterligare. Dessa inkluderar gul, cyan och violett (även kallad magenta). I allmänhet kan vilken färg som helst erhållas genom att blanda färger nära den. Således erhålls cyan (#00FFFF) genom att kombinera blått och grönt.

Ris. 6.1. Färgcirkel

Färger baserade på hexadecimala värden behöver inte väljas empiriskt. För detta ändamål är en grafisk editor som kan arbeta med olika färgmodeller, till exempel Adobe Photoshop, lämplig. I fig. Figur 6.2 visar fönstret för att välja en färg i detta program. Det resulterande hexadecimala värdet för den aktuella färgen är markerat med en linje. Du kan kopiera och klistra in den i din kod.

Ris. 6.2. Fönster för att välja färger i Photoshop

Webbfärger

Om du ställer in bildskärmens färgåtergivningskvalitet till 8 bitar (256 färger), kan samma färg visas på olika sätt i olika webbläsare. Detta beror på hur grafiken visas, när webbläsaren arbetar med sin egen palett och inte kan visa en färg som inte finns i dess palett. I det här fallet ersätts färgen av en kombination av pixlar av andra, nära den, färger som imiterar den givna. För att säkerställa att färgen förblir densamma i olika webbläsare introducerades en palett med så kallade webbfärger. Webbfärger är de färger för vilka varje komponent - röd, grön och blå - är inställd på ett av sex värden - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) 255 (FF). Det hexadecimala värdet för denna komponent anges inom parentes. Det totala antalet färger från alla möjliga kombinationer ger 6x6x6 - 216 färger. Ett exempel på webbfärg är #33FF66.

Huvudfunktionen med webbfärg är att den ser likadan ut i alla webbläsare. För tillfället är relevansen av webbfärger mycket liten på grund av förbättringen av kvaliteten på bildskärmar och utvidgningen av deras kapacitet.

Färger efter namn

För att undvika att behöva komma ihåg en uppsättning siffror kan du istället använda namnen på vanliga färger. I tabell 6.3 visar namnen på populära färgnamn.

Det spelar ingen roll om du anger en färg med dess namn eller genom att använda hexadecimala tal. Dessa metoder är lika i sin effekt. Exempel 6.1 visar hur man ställer in bakgrunds- och textfärger på en webbsida.

Exempel 6.1. Bakgrund och textfärg

Exempeltext

I det här exemplet ställs bakgrundsfärgen in med taggens bgcolor-attribut , och textfärgen genom textattributet. För variation sätts textattributet till ett hexadecimalt tal och bgcolor-attributet är satt till det reserverade nyckelordet teal .

Minecraft-koder färger, eller Minecraft koder formatering, tillåt vilken spelare som helst att lägga till blommor och formatera text på alla möjliga sätt direkt i Minecraft. Färgkoder från &0-9 - till &a-f. Lägg till dem före din text. Meddelanden från spelare kan innehålla färgkoder som låter dig lägga till färg till dina meningar.

Färger och formateringskoder

Et-tecken (&) följt av ett hexadecimalt tal i meddelanden signalerar klienten att byta färg när text visas. Dessutom kan text formateras med en & följt av en bokstav. Du kan lägga till olika färger i böcker, kommandoblock, servernamn, serverbeskrivning (motd), världsnamn, tecken och till och med spelarnamn.

Det är väldigt enkelt att formatera din text i konfigurationer eller i spel med hjälp av färgkartan nedan. &r används för att återställa alla koder, dvs. &mAAA&rBBB kommer att visas som AAA BBB.

Vi presenterar en tabell över befintliga färgkoder i Minecraft för din bekvämlighet:

Ibland är det nödvändigt understryka, stryka över, markera vilken text som helst. Detta görs med hjälp av textformatering. Det används på exakt samma sätt som färger (vi sätter före texten koda, till exempel &lMinecraft = Minecraft.

För din bekvämlighet finns nedan en tabell med formateringskoder:

Hexadecimala tal används för att ange färger. Det hexadecimala systemet, till skillnad från decimalsystemet, bygger, som namnet antyder, på talet 16. Siffrorna kommer att vara följande: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Siffror från 10 till 15 ersätts med latinska bokstäver. Tal större än 15 i det hexadecimala systemet bildas genom att kombinera två tal till ett. Till exempel motsvarar talet 255 i decimal talet FF i hexadecimal. För att undvika förvirring vid bestämning av talsystemet placeras en hash-symbol # före det hexadecimala talet, till exempel #666999. Var och en av de tre färgerna - röd, grön och blå - kan ta värden från 00 till FF. Färgsymbolen är alltså uppdelad i tre komponenter #rrggbb, där de två första symbolerna indikerar färgens röda komponent, de två mittersta - grönt och de två sista - blått. Det är tillåtet att använda den förkortade formen #rgb, där varje tecken ska dubbleras. Därför bör posten #fe0 betraktas som #ffee00.

Vid namn

Webbläsare stöder vissa färger efter deras namn. I tabell 1 visar namn, hexadecimal kod, RGB, HSL-värden och beskrivning.

Använder RGB

Du kan definiera färg med de röda, gröna och blå värdena i decimaler. Var och en av de tre färgkomponenterna har ett värde från 0 till 255. Det är också tillåtet att ange färgen i procent, med 100 % motsvarande siffran 255. Ange först nyckelordet rgb och ange sedan färgkomponenterna inom parentes , separerade med kommatecken, till exempel rgb(255, 128, 128) eller rgb(100%, 50%, 50%).

RGBA

RGBA-formatet liknar syntaxen RGB, men innehåller en alfakanal som anger elementets transparens. Ett värde på 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halvtransparent.

RGBA lades till i CSS3, så CSS-koden måste valideras mot denna version. Det bör noteras att CSS3-standarden fortfarande är under utveckling och vissa funktioner kan ändras. Till exempel, en färg i RGB-format som lagts till i egenskapen bakgrundsfärg valideras, men en som läggs till i egenskapen bakgrund är inte längre giltig. Samtidigt förstår webbläsare helt korrekt färgen för båda egenskaperna.

HSL

Namnet på HSL-formatet kommer från kombinationen av de första bokstäverna Hue (nyans), Saturate (mättnad) och Lightness (ljushet). Nyans är färgvärdet på färghjulet (fig. 1) och anges i grader. 0° motsvarar rött, 120° grönt och 240° blått. Nyansvärdet kan variera från 0 till 359.

Ris. 1. Färghjul

Mättnad är intensiteten hos en färg och mäts i procent från 0 % till 100 %. Ett värde på 0 % indikerar ingen färg och en grå nyans, 100 % är maxvärdet för mättnad.

Ljushet anger hur ljus färgen är och anges i procent från 0 % till 100 %. Låga värden gör färgen mörkare, och höga värden gör färgen ljusare; extrema värden på 0% och 100% motsvarar svartvitt.

HSLA

HSLA-formatet liknar syntaxen HSL, men innehåller en alfakanal för att specificera elementets transparens. Ett värde på 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halvtransparent.

RGBA-, HSL- och HSLA-färgvärden läggs till i CSS3, så kontrollera din kod för versionsgiltighet när du använder dessa format.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Varning

Alla lejonfångstmetoder som listas på webbplatsen är teoretiska och baserade på beräkningsmetoder. Författarna garanterar inte din säkerhet när du använder dem och frånsäger sig allt ansvar för resultaten. Kom ihåg att ett lejon är ett rovdjur och ett farligt djur!

Resultatet av detta exempel visas i fig. 2.

Ris. 2. Färger på webbsidan