Silver färgkod rgb. Färg i stilar kan specificeras på olika sätt: med hexadecimalt värde, efter namn, i RGB, RGBA, HSL, HSLA-format
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. Hexadecimalt system, Till skillnad från decimalsystem, bygger, som namnet antyder, på siffran 16. Siffrorna kommer att vara följande: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E , F. Nummer 10 till 15 ersatta 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 bestämning av nummersystemet, innan hexadecimalt tal Hash-symbolen # används, 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.
| FA. | + | 8E | + | 47 | = | FA8E47 |
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 bildas vit färg.
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 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 röda nyansen. Situationen är liknande med grön(#00FF00) och blått (#0000FF).
- Gul(#FFFF00) erhålls 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. Lämplig för detta ändamål grafikredigerare kan arbeta med olika färgmodeller, t.ex. Adobe Photoshop. 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 i olika webbläsare på mitt sätt. 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. I det här ögonblicket Relevansen av webbfärger är 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.
| Färgnamn | Färg | Beskrivning | Hexadecimalt värde |
|---|---|---|---|
| svart | Svart | #000000 | |
| blå | Blå | #0000FF | |
| fuchsia | Ljuslila | #FF00FF | |
| grå | Mörkgrå | #808080 | |
| grön | Grön | #008000 | |
| kalk | Ljusgrön | #00FF00 | |
| rödbrun | Mörkröd | #800000 | |
| Marin | Mörkblå | #000080 | |
| oliv | Oliv | #808000 | |
| lila | Mörklila | #800080 | |
| röd | Röd | #FF0000 | |
| silver | Ljusgrå | #C0C0C0 | |
| kricka | Blå grön | #008080 | |
| vit | Vit | #FFFFFF | |
| gul | Gul | #FFFF00 |
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 .>>Färghantering
Hexadecimala RGB-färgvärden
Metoder för att beskriva och bearbeta färg skiljer sig från varandra i vilken slutlig representation de är avsedda för. Låt oss jämföra till exempel representationen av färger för utskrift och för datorskärmar. I det första fallet tas grunden vit färgen på det papper som tre primärfärger sedan appliceras på: blå, lila Och gul. Blandning med varandra och med pappers vita färg i olika proportioner ger dessa tre primärfärger olika färgnyanser, förutom rent svart, eller i fullständig frånvaro av färg ger de vitt papper. Om vi lägger till svart färg på dem får vi CMYK- sätt att överföra färg när önskad färg erhålls genom att subtrahera de saknade färgerna från vitt.
I det andra fallet tas grunden svart färgen på skärmen, där varje cell lyser i en av tre färger: röd-röd, grön-grönt och blå-blå. Sedan, i fullständig frånvaro av någon glöd, får vi en ren svart skärmfärg, och vilken som helst av de nödvändiga färgerna ges av förhållandet mellan var och en av de tre färgerna. I det här fallet kommer vi att få RGB-metod för färgöverföring. Primärfärger kan ha värden som sträcker sig från 0
innan 255
, eller från 0%
innan 100%
, eller kan representeras som ett hexadecimalt värde. I figuren nedan kan du se resultatet av att blanda primärfärger.
Det hexadecimala talsystemet, till skillnad från det decimala talsystemet, har inte tio siffror, utan sexton - därav namnet. Följaktligen kan det bara finnas icke-upprepande varianter av kombinationer av två siffror - 256 , för att fortsätta sifferserien efter 9 brev från A innan F därför kommer serien att se ut så här -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
I det här fallet anges färgen av tre hexadecimala tal, som var och en består av två siffror. Den första siffran bestämmer intensiteten röd färger, medium- grön, sista sak- blå färger. Alla siffror kan ta värden inom intervallet från 00 innan FF(från 0 till 255). Till exempel: grön färg ges som #00FF00, rödliknande #FF0000, blå-liknande #0000FF, vit-liknande #FFFFFF, fullständig frånvaro färger eller svart anges som #000000 .
I formuläret nedan kan du ange alla hexadecimala värden för var och en av de tre färgerna och se resultatet av att blanda dem genom att klicka i utdatafältet.
Exempel på några hexadecimala RGB-färgvärden: nyanser av rött, blått och grönt.
| se | koda | se | koda | se | koda | se | koda | se | koda | se | koda |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Ange färg med hjälp av strängbokstavar
För att underlätta användningen tilldelades vissa färger och deras kombinationer namn som känns igen av alla webbläsare, och det blev möjligt att ange många av dem med namn. Tabellen nedan visar några av färgnamnen:
| se | namn | se | namn | se | namn | se | namn |
| Vit | Röd | Orange | Gul | ||||
| Grön | Blå | Lila | Svart | ||||
| Aliceblue | Antikvit | Aqua | Akvamarin | ||||
| Azurblå | Beige | Bisque | Blanchedalmond | ||||
| Blåviolett | Brun | Burlywood | Kadettblå | ||||
| Chartreuse | Choklad | Korall | Blåklintblå | ||||
| Majssilke | djupröd | Cyan | Mörkblå | ||||
| Mörkcyan | Mörkguldröd | Mörkgrå | Mörkgrön | ||||
| Mörkkhaki | Mörkmagenta | Mörkolivegrön | Mörkorange | ||||
| Darkorchid | Mörkröd | Mörklax | Mörk havsgrön | ||||
| Mörk skifferblå | Mörkslagegray | Mörkturkos | Mörkviolett | ||||
| Deeppink | Djupt himmelsblått | Dimgray | Dodgerblue | ||||
| Eldfast tegel | Blommigt vit | Skog grön | Fuschia | ||||
| Gainsboro | Ghostwhite | Guld | Gullris | ||||
| grå | Grön gul | Honungsdagg | Skrikrosa | ||||
| Indianred | Indigo | Elfenben | Kaki | ||||
| Lavendel | Lavendelblush | Lemonchiffon | Ljusblå | ||||
| Ljuskorall | Ljuscyan | Ljuskallrödgul | Ljusgrön | ||||
| Ljusgrå | Ljusrosa | Ljuslax | Ljussjögrön | ||||
| Ljusblått | Lightslategray | Ljusstålblå | Ljusgul | ||||
| Kalk | Limegrön | Linné | Magenta | ||||
| Rödbrun | Mediumaquamarine | Mellanblå | Mediumorchid | ||||
| Mediumlila | Mediumseagreen | Mediumslateblå | Mellanvårgrön | ||||
| Mediumturkos | Mediumviolett | Midnattsblå | Mintkräm | ||||
| Mistyros | Navajowhite | Marin | Oldlace | ||||
| Oliv | Oliverab | Orange röd | Orkide | ||||
| Palegoldenrod | Ljusgrön | Paletturkos | Blekviolett | ||||
| Papayawhip | Peachpuff | Peru | Rosa | ||||
| Plommon | Puderblå | Rosybrunt | Kungsblå | ||||
| Sadelbrunt | Havsgrön | Snäckskal | Sienna | ||||
| Silver | Himmelsblå | Skifferblå | Skiffer grå | ||||
| Snö | Springgreen | Stålblå | Solbränna | ||||
| Kricka | Tistel | Tomat | Turkos | ||||
| Violett | Vete | Vit rök | Gulgrön |
Använd en säker färgpalett
Tyvärr på olika plattformar Med olika systeminställningar är korrekt färgåtergivning ett problem. Grejen är att webbläsaren alltid försöker anpassa sig färgpalett dokument under Systeminställningar och bildskärmens möjligheter, genom att självständigt blanda färger och ersätta dem. Som ett resultat kan användaren ibland inte se exakt vad webbmastern ville visa honom. En väg ut ur den här situationen hittades genom att använda en palett, vars färg garanterat återges lika av alla webbläsare på olika plattformar. Detta är den så kallade garanterat palett, även kallad säker palett. Den här paletten innehåller färger vars färgkomponenter har följande värden: 00 ,33 ,66 ,99 , CC,FF, på alla möjliga sätt 216 deras kombinationer.
| se | koda | se | koda | se | koda | se | koda | se | koda | se | koda |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300 CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
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 dubblas. Därför bör posten #fe0 betraktas som #ffee00.
Vid namn
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Webbläsare stöder vissa färger efter deras namn. I tabell 1 visar namnen, hexadecimal kod, värden i RGB-format, HSL och beskrivning.
| namn | Färg | Koda | RGB | HSL | Beskrivning |
|---|---|---|---|---|---|
| vit | #ffffff eller #fff | rgb(255,255,255) | hsl(0,0 %, 100 %) | Vit | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Grå | |
| grå | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Mörkgrå | |
| 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örkröd | |
| röd | #ff0000 eller #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Röd | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Orange | |
| gul | #ffff00 eller #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Gul | |
| oliv | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Oliv | |
| kalk | #00ff00 eller #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Ljusgrön | |
| grön | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Grön | |
| 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å | |
| Marin | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Mörkblå | |
| kricka | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blå grön | |
| fuchsia | #ff00ff eller #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Rosa | |
| lila | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violett |
Använder RGB
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-formatet liknar syntaxen RGB, men innehåller en alfakanal som anger elementets transparens. Värdet 0 är helt transparent, 1 är ogenomskinligt och mellanvärde typ 0,5 - genomskinlighet.
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
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
namn HSL-format bildad av en kombination 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 % anger ingen färg och en grå nyans, 100 % maximalt värde 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 svart och vitt.
HSLA
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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!
Resultat detta exempel visas i fig. 2.
Ris. 2. Färger på webbsidan
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 hjälp av färgnamnet på engelska språket. Den vanligaste nyckelord: svart (svart), vit (vit), röd (röd), grön (grön), blå (blå), etc.:
Textfärg – röd
De mest populära färgerna i Consortium-standarden World Wide Web(Engelsk) World Wide Web Consortium, W3C):
| Färg | namn | Färg | namn | Färg | namn | Färg | namn |
|---|---|---|---|---|---|---|---|
| Svart | grå | Silver | Vit | ||||
| Gul | Kalk | Aqua | Fuchsia | ||||
| Röd | Grön | Blå | Lila | ||||
| Rödbrun | Oliv | Marin | Kricka |
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: 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 med 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, det största antalet 255 i decimal motsvarar 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 inställt på 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):
| engelskt namn | ryskt namn | Prov | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Amaranth | #E52B50 | 229 | 43 | 80 | |
| Bärnsten | Bärnsten | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Blå grön | #00FFFF | 0 | 255 | 255 | |
| Azurblå | Azurblå | #007FFF | 0 | 127 | 255 | |
| Svart | Svart | #000000 | 0 | 0 | 0 | |
| Blå | Blå | #0000FF | 0 | 0 | 255 | |
| Bondi blå | Bondi strandvatten | #0095B6 | 0 | 149 | 182 | |
| Mässing | Mässing | #B5A642 | 181 | 166 | 66 | |
| Brun | Brun | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azurblå | #007BA7 | 0 | 123 | 167 | |
| Mörk vårgrön | Mörk vårgrön | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Äggplanta | Äggplanta | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| Guld | Guld | #FFD700 | 250 | 215 | 0 | |
| grå | Grå | #808080 | 128 | 128 | 128 | |
| Grön | Grön | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Kalk | Kalk | #CCFF00 | 204 | 255 | 0 | |
| Malakit | Malakit | #0BDA51 | 11 | 218 | 81 | |
| Marin | Mörkblå | #000080 | 0 | 0 | 128 | |
| Ockra | Ockra | #CC7722 | 204 | 119 | 34 | |
| Oliv | Oliv | #808000 | 128 | 128 | 0 | |
| Orange | Orange | #FFA500 | 255 | 165 | 0 | |
| Persika | Persika | #FFE5B4 | 255 | 229 | 180 | |
| Pumpa | Pumpa | #FF7518 | 255 | 117 | 24 | |
| Lila | Violett | #800080 | 128 | 0 | 128 | |
| Röd | Röd | #FF0000 | 255 | 0 | 0 | |
| Saffran | Saffran | #F4C430 | 244 | 196 | 48 | |
| Havsgrön | Grönt hav | #2E8B57 | 46 | 139 | 87 | |
| Träskgrönt | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Kricka | Blå grön | #008080 | 0 | 128 | 128 | |
| Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
| Violett | Violett | #8B00FF | 139 | 0 | 255 | |
| Gul | Gul | #FFFF00 | 255 | 255 | 0 | |
Färgkoder (bakgrund) efter mättnad och nyans.