Det finns flera sätt att representera färg i webbdesign.
HEX - hexadecimal färgrepresentationssystem bas 16. Arabiska decimala siffror från 0 till 9 och latinska bokstäver från A till F används för detta system för att komplettera det digitala numret till 16. För webbdesign tas 16 primära (nyckelfärger), den så kallade hexadecimala färgkod #RRGGBB, där varje par ansvarar för sin färgandel: RR - röd, GG - grön och BB - blå. Varje färgfärg varierar från 00 till FF.
Två andra färgrepresentationer i webbdesign är: i form av RGB (*, *, *), där varje "*" -fraktion av färgen representeras av decimaler från 0 till 255 och med färgnamn på engelska.
När du skapar en färgbild är huvudproblemet rätt färgåtergivning på olika typer av datorer, bildskärmar och webbläsare. Om webbläsaren inte kan visa färgen korrekt väljer den en liknande eller blandar flera färger. Och ibland kan den ersättas med en helt annan färg.
Tabell 16 primärfärgersom används i alla webbläsare
| Titel | Färg | hex | (RGB) |
| Aqua (havsvågen) | # 00FFFF | (000,255,255) | |
| Svart | #000000 | (000,000,000) | |
| Blå | # 0000FF | (000,000,255) | |
| Fuchsia (Fuchsin) | # FF00FF | (255,000,255) | |
| grå | #808080 | (128,128,128) | |
| Grön | #008000 | (000,128,000) | |
| Kalk (ljusgrön) | # 00FF00 | (000,255,000) | |
| Rödbrun (rödbrun) | #800000 | (128,000,000) | |
| Marinblå (mörkblå) | #000080 | (000,000,128) | |
| Olive (Olive) | #808000 | (128,128,000) | |
| Lila | #800080 | (128,000,128) | |
| Röd | # FF0000 | (255,000,000) | |
| Silver (silver) | # C0C0C0 | (192,192,192) | |
| Teal (grå grön) | #008080 | (000,128,128) | |
| Vit | #FFFFFF | (255,255,255) | |
| Gul | # FFFF00 | (255,255,000) |
Tabell magenta färger och dess nyanser
| Titel | Färg | hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | # FF0099 | (255,000,153) | |
| Magenta (Magenta) | # F95A61 | (249,090,097) | |
| Fuchsia (Fuchsia) | # FF00FF | (255,000,255) | |
| Movein (anilin lila) | # EF0097 | (239,000,151) | |
| Laxrosa (orange rosa) | # FF91A4 | (255,145,164) | |
| Cenise (skugga av magenta) | # DE3163 | (153,149,140) | |
| Aubergine Aubergine (aubergine) | #990066 | (153,000,132) | |
| Lavendel rodnad (rosa lavendel) | & nbsp # FFF0F5 | (255,240,245) | |
| Lilac (Lilac) | # C8A2C8 | (200,162,200) | |
| Magenta (Magenta) | # FF008F | (255,000,143) | |
| Orchid (Orchid) | # DA70D6 | (218,112,214) | |
| Red-violett | # C71585 | (199,021,133) | |
| Sanguine (Sanguine) | # 92000A | (146,000,010) | |
| Tistel (nyans av lila) | # D8BFD8 | (185,211,238) | |
| Violett-aubergine (nyans av lila) | #991199 | (153,017,153) | |
| Rosa vivo (rikrosa) | # FF007F | (255,000,127) | |
| Lavendel-ros (nyans av lila) | # FBA0E3 | (108,123,139) | |
| Mountbatten pink (Mountbatten pink) | # 997ABD | (153,122,141) |
Tabell grå färger och dess nyanser
| Titel | Färg | hex | (RGB) |
| grå | #808080 | (128,128,128) | |
| grå | #bebebe | (190,190,190) | |
| (Grå-nyans) | #858585 | (133,133,133) | |
| Gray33 (Gray-33) | #545454 | (084,084,084) | |
| (Grå skiffer) | #708090 | (112,128,144) | |
| (Kvarts) | # 99958s | (153,149,140) | |
| (Ljusgrå) | #bbbbbb | (187,187,187) | |
| (Silver) | # c0c0c0 | (192,192,192) | |
| (Grå vit) | # f0f0f0 | (240,240,240) | |
| (Skäggarna från Abdel Kerim) | # e0e0e0 | (224,224,224) | |
| LightGray (ljusgrå) | # d3d3d3 | (211,211,211) | |
| LightStateGray () | #778899 | (119,136,153) | |
| StateGray-1 (blek blåblomblå1) | # c6e2ff | (198,226,255) | |
| StateGray-2 (Pale Cornflower blue2) | # b9d3ee | (185,211,238) | |
| StateGray3 () | # 9fb6cd | (159,182,205) | |
| StateGray4 () | # 6c7b8b | (108,123,139) |
HTML-tabell (palett) ger dig möjlighet att välja rätt ton för dig. Färgvärdet visas i tre format: Hex, RGB och HSV.
- Hex består av tre två teckenvärden i ett hexadecimalt talsystem. Till exempel: # ff00b3, där det första numret är rött, det andra är grönt och det tredje är blått.
- RGB (RedGreenBlue) har formen "200 1005 255", vilket anger mängden motsvarande ton (röd, grön, blå) i den resulterande färgen.
- HSV (nyans, mättnad, värde - ton, mättnad, värde) - en färgmodell där koordinaterna är:
- Nyans - färgton, kan variera från 0 ° till 360 °.
- Mättnad - mättnad, från 0-100 eller 0-1. Ju större denna parameter, desto “renare” färgen, så denna parameter kallas ibland färgrenhet. Och ju närmare denna parameter är noll, desto närmare är färgen neutralt grått.
- Värde (färgvärde) - ställer in ljusstyrkan, värdet kan också variera mellan 0-100 eller 0-1.
Ange färgkod: GÅ
Lista med färger med namn
Tabellen visar färgnamnen på engelska (som kan användas som värden) som stöds av alla webbläsare och deras hexadecimala värden. Alla listade färger är “säkra”, det vill säga de kommer att visas på samma sätt i alla webbläsare.
| Färgnamn | hex | Färg |
|---|---|---|
| Svart | #000000 | |
| Marin | #000080 | |
| Mörkblå | # 00008B | |
| medium | # 0000CD | |
| Blå | # 0000FF | |
| Mörkgrön | #006400 | |
| Grön | #008000 | |
| Kricka | #008080 | |
| Darkcyan | # 008B8B | |
| DeepSkyBlue | # 00BFFF | |
| Darkturquoise | # 00CED1 | |
| MediumSpringGreen | # 00FA9A | |
| Kalk | # 00FF00 | |
| Springgreen | # 00FF7F | |
| Aqua | # 00FFFF | |
| cyan | # 00FFFF | |
| Midnattsblå | #191970 | |
| Dodgerblue | # 1E90FF | |
| LightSeaGreen | # 20B2AA | |
| Skog grön | # 228B22 | |
| Havsgrön | # 2E8B57 | |
| DarkSlateGray | # 2F4F4F | |
| Limegrön | # 32CD32 | |
| MediumSeaGreen | # 3CB371 | |
| Turkos | # 40E0D0 | |
| Kungsblå | # 4169E1 | |
| Stålblå | # 4682B4 | |
| DarkSlateBlue | # 483D8B | |
| Medium turkos | # 48D1CC | |
| Indigo | # 4B0082 | |
| DarkOliveGreen | # 556B2F | |
| Cadetblue | # 5F9EA0 | |
| kornblå | # 6495ED | |
| MediumAquaMarine | # 66CDAA | |
| Dimgray | #696969 | |
| Slateblue | # 6A5ACD | |
| olivedrab | # 6B8E23 | |
| Skiffer grå | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | # 7B68EE | |
| Lawngreen | # 7cfc00 | |
| Chartreuse | # 7FFF00 | |
| Akvamarin | # 7FFFD4 | |
| Rödbrun | #800000 | |
| Lila | #800080 | |
| Oliv | #808000 | |
| grå | #808080 | |
| Himmelsblå | # 87CEEB | |
| LightSkyBlue | # 87CEFA | |
| Blåviolett | # 8A2BE2 | |
| Mörkröd | # 8B0000 | |
| Darkmagenta | # 8B008B | |
| Saddlebrown | # 8B4513 | |
| DarkSeaGreen | # 8FBC8F | |
| Ljusgrön | # 90EE90 | |
| Medium lila | # 9370D8 | |
| Darkviolet | # 9400D3 | |
| Ljusgrön | # 98FB98 | |
| Darkorchid | # 9932CC | |
| Gulgrön | # 9ACD32 | |
| Sienna | # A0522D | |
| Brun | # A52A2A | |
| Mörkgrå | # A9A9A9 | |
| Ljusblå | # ADD8E6 | |
| Grön gul | # ADFF2F | |
| Paleturquoise | #AFEEEE | |
| LightSteelBlue | # B0C4DE | |
| Puderblå | # B0E0E6 | |
| Eldfast tegel | # B22222 | |
| DarkGoldenRod | # B8860B | |
| MediumOrchid | # BA55D3 | |
| Rosybrown | # BC8F8F | |
| Darkkhaki | # BDB76B | |
| Silver | # C0C0C0 | |
| MediumVioletRed | # C71585 | |
| Indianred | # CD5C5C | |
| peru | # Cd853f | |
| Choklad | # D2691E | |
| Solbränna | # D2B48C | |
| Ljusgrå | # D3D3D3 | |
| PaleVioletRed | # D87093 | |
| Tistel | # D8BFD8 | |
| Orkide | # DA70D6 | |
| Gullris | # DAA520 | |
| djupröd | # Dc143c | |
| Gainsboro | #DCDCDC | |
| Plommon | # DDA0DD | |
| Burlywood | # DEB887 | |
| Lightcyan | # E0FFFF | |
| Lavendel | # E6E6FA | |
| Mörk lax | # E9967A | |
| Violett | # EE82EE | |
| PaleGoldenRod | # EEE8AA | |
| LightCoral | # F08080 | |
| Kaki | # F0E68C | |
| Aliceblue | # F0F8FF | |
| HONUNGSDAGG | # F0FFF0 | |
| Azurblå | # F0FFFF | |
| Sandbrun | # F4A460 | |
| Vete | # F5DEB3 | |
| Beige | # F5F5DC | |
| Vit rök | # F5F5F5 | |
| Mintcream | # F5FFFA | |
| Ghostwhite | # F8F8FF | |
| Lax | # FA8072 | |
| Antiquewhite | # FAEBD7 | |
| Linné | # FAF0E6 | |
| LightGoldenRodYellow | # FAFAD2 | |
| Oldlace | # FDF5E6 | |
| Röd | # FF0000 | |
| Fuchsia | # FF00FF | |
| Magenta | # FF00FF | |
| Deeppin | # Ff1493 | |
| Orange röd | # Ff4500 | |
| Tomat | # FF6347 | |
| Skrikrosa | # FF69B4 | |
| Korall | # FF7F50 | |
| Darkorange | # FF8C00 | |
| Lätt lax | # FFA07A | |
| Orange | # FFA500 | |
| Ljusrosa | # FFB6C1 | |
| Rosa | # FFC0CB | |
| Guld | # FFD700 | |
| Peachpuff | # FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Mockasin | # FFE4B5 | |
| bisque | # FFE4C4 | |
| Mistyose | # FFE4E1 | |
| Blankerad mandel | #FFEBCD | |
| Papayawhip | # FFEFD5 | |
| Lavenderblush | # FFF0F5 | |
| Seahell | # FFF5EE | |
| Cornsilk | # FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | # FFFAF0 | |
| Snö | #FFFAFA | |
| Gul | # FFFF00 | |
| Ljusgul | # FFFFE0 | |
| Elfenben | # FFFFF0 | |
| Vit | #FFFFFF |
Hexnummer används för att ange färger. Det hexadecimala systemet, i motsats till decimalsystemet, baseras, 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. Siffrorna 10 till 15 ersätts av latinska bokstäver. Siffror större än 15 i det hexadecimala systemet bildas genom att kombinera två siffror till ett. Till exempel motsvarar siffran 255 i decimalsystemet antalet FF i det hexadecimala systemet. För att undvika förvirring i definitionen av nummersystemet föregås det hexadecimala talet av pundtecknet #, till exempel # 666999. Var och en av de tre färgerna - röd, grön och blå - kan variera från 00 till FF. Således är färgbeteckningen uppdelad i tre komponenter #rrggbb, där de två första tecknen markerar den röda komponenten i färgen, de två mitten anger de gröna och de sista två de blå. Det är tillåtet att använda en förkortad form av formen #rgb, där varje tecken ska fördubblas. Så 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 med deras namn. I bordet. Tabell 1 visar namn, hexadecimal kod, RGB, HSL-värden och beskrivning.
| namn | Färg | Koden | 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%) | Den svarta | |
| 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,0255) | hsl (240 100%, 50%) | Blå | |
| marin | #000080 | rgb (0,0128) | 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,0255) | hsl (300 100%, 50%) | Rosa | |
| lila | #800080 | rgb (128,0128) | hsl (300 100%, 25%) | Violett |
Med 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 bestämma färgen med värden på de röda, gröna och blå komponenterna 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 ställa in färgen i procent, med 100% motsvarande siffran 255. Först indikeras nyckelordet rgb, och sedan, inom parentes, anges färgkomponenterna, 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 syntax till RGB, men innehåller en alfakanal som anger elementets transparens. Ett värde på 0 motsvarar full transparens, 1 till opacitet och ett mellanvärde som 0,5 till translucens.
RGBA har lagts till i CSS3, så CSS-kodvalidering måste göras med den här versionen. Det bör noteras att CSS3-standarden fortfarande är under utveckling och att vissa funktioner i den kan förändras. Till exempel valideras en RGB-färg som har lagts till i bakgrundsfärgegenskapen, men bakgrunden som lagts till bakgrundsegenskapen är inte längre giltig. Samtidigt förstår webbläsare 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+ |
Namnet på HSL-formatet härstammar från en kombination av de första bokstäverna Nyans (nyans), mättnad (mättnad) och ljushet (ljushet). Nyans är färgvärdet på färghjulet (fig. 1) och ställs in i grader. 0 ° motsvarar rött, 120 ° till grönt och 240 ° till blått. Nuvärdet kan variera från 0 till 359.
Fikon. 1. Färghjulet
Mättnad kallas färgintensitet, mätt i procent från 0% till 100%. Ett värde på 0% indikerar frånvaron av färg och nyans av grått, 100% det maximala värdet av mättnad.
Ljusstyrka bestämmer hur ljus färgen är och indikeras i procent från 0% till 100%. Små värden gör färgen mörkare och höga värden ljusare, extrema värden 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 syntax som HSL, men innehåller en alfakanal som anger elementets transparens. Ett värde på 0 motsvarar full transparens, 1 till opacitet och ett mellanvärde som 0,5 till translucens.
Färgvärden i RGBA-, HSL- och HSLA-format läggs till i CSS3, så när du använder dessa format, kontrollera koden för giltighet baserat på versionen.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Varning
Alla lejonfiskmetoder som listas på webbplatsen är teoretiska och baseras på beräkningsmetoder. Författarna garanterar inte din säkerhet vid deras användning och fraskriver sig allt ansvar för resultatet. Kom ihåg att ett lejon är ett rovdjur och ett farligt djur!
Resultatet av detta exempel visas i fig. 2.
Fikon. 2. Färger på webbsidan
Den här sidan innehåller en tabell med nyckelord som kan användas för att beteckna färger på webbutvecklingsspråk som HTML, CSS, JavaScript, Flash och andra.
I de gamla WC3-specifikationerna stavades endast 16 nyckelord för att ställa in färger i HTML och CSS. Vidare, mer moderna specifikationer, 130 fler nyckelord lades till för att ange färgnamn. Följande tabell innehåller färgnamn, hexadecimala och RGB-koder som de motsvarar.
Enligt CSS-regler är färgnamn inte skiftlägeskänsliga. Färgposterna IndianRed och indianred är likvärdiga.
Det är också värt att notera att av 146 sökord i tabellen finns det faktiskt färre färger i den. Det beror på att vissa nyckelord indikerar samma färg. Så namnen Grå och Grå indikerar en 50 procent grå färg med koden # 808080, och ordet Magenta är en synonym för Fuchsia HTML-färg som motsvarar den hexadecimala koden # FF00FF. Dessutom är orden Aqua och Cyan, de motsvarar koden # 00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
CSS-färgmodulen beskriver i detalj värdena som gör det möjligt för författare att bestämma färger och opacitet för html-element, liksom värdena på färgegenskapen.
Färgegenskap
1. Prioritetsfärger: färgegenskap
Egenskapen ställer in teckensnittsfärgen med hjälp av olika färgåtergivningssystem. Egenskapen beskriver färgen på textinnehållet i elementet. Dessutom används det för att tillhandahålla ett potentiellt indirekt värde (currentColor) för alla andra egenskaper som accepterar färgvärden.
Fastigheten ärvs.
2. Färgvärden
2,1. Nyckelord
Listan med nyckelord innehåller följande betydelser:
| Titel | hex | RGB | Färg |
|---|---|---|---|
| svart | #000000 | 0,0,0 | |
| silver- | # C0C0C0 | 192,192,192 | |
| grå | #808080 | 128,128,128 | |
| vit | #FFFFFF | 255,255,255 | |
| rödbrun | #800000 | 128,0,0 | |
| röd | # FF0000 | 255,0,0 | |
| lila | #800080 | 128,0,128 | |
| fuchsia | # FF00FF | 255,0,255 | |
| grön | #008000 | 0,128,0 | |
| kalk | # 00FF00 | 0,255,0 | |
| oliv | #808000 | 128,128,0 | |
| gul | # FFFF00 | 255,255,0 | |
| Marin | #000080 | 0,0,128 | |
| blå | # 0000FF | 0,0,255 | |
| kricka | #008080 | 0,128,128 | |
| aqua | # 00FFFF | 0,255,255 |
Färgnamn är inte skiftlägeskänsliga.
Syntax
Färg: kricka;
2,2. Numeriska färgvärden
2.2.1. RGB-modellfärger
Hexvärdeformatet för RGB är # -tecknet, omedelbart följt av tre eller sex hexadecimala tecken. Den tresiffriga RGB-posten #rgb konverteras till den sexsiffriga formen #rrggbb genom att kopiera siffrorna, inte genom att lägga till nollor. Till exempel expanderar # fb0 till # ffbb00. Detta säkerställer att vit #ffffff kan anges i en kort #fff-post och tar bort eventuella beroenden på skärmens färgdjup.
Formatet för RGB-värdet i funktionell notation är rgb (följt av en kommaseparerad lista med tre numeriska värden (antingen tre heltal eller tre procentvärden), följt av ett tecken). Ett heltal på 255 motsvarar 100% och F eller FF i hexadecimal notation:
Rgb (255,255,255) \u003d rgb (100%, 100%, 100%) \u003d #FFF
Mellanslagstecken är tillåtna runt numeriska värden.
