Det finns flera sätt att representera färg i webbdesign.
HEX är ett hexadecimalt färgrepresentationssystem för bas 16. För detta system används arabiska decimaler från 0 till 9 och latinska bokstäver från A till F för att komplettera det digitala talet till 16. För webbdesign tas 16 grundläggande (nyckelfärger). , den så kallade hexadecimala färgkoden #RRGGBB, där varje par ansvarar för sin andel av färgen: RR - röd, GG - grön och BB - blå. Varje färgfraktion sträcker sig från 00 till FF.
Två andra färgåtergivningar i webbdesign är: i form av RGB ( *, *, *), där varje " *" del av en färg representeras av decimaler från 0 till 255 och, med färgnamn, engelska språket.
När du skapar en färgbild är huvudproblemet korrekt återgivning av färger på olika typer datorer, bildskärmar och webbläsare. Om webbläsaren inte kan visa en färg korrekt, tar den upp en liknande eller blandar flera färger. Och ibland kan den ersättas med någon helt annan färg.
tabell 16 huvudfärger som används i alla webbläsare
| namn | Färg | Hex | (RGB) |
| Aqua (havsvåg) | # 00FFFF | (000,255,255) | |
| Svart (svart) | #000000 | (000,000,000) | |
| Blå | # 0000FF | (000,000,255) | |
| Fuchsia (fuchsin) | # FF00FF | (255,000,255) | |
| Grå (grå) | #808080 | (128,128,128) | |
| Grön (grön) | #008000 | (000,128,000) | |
| Kalk (ljusgrön) | # 00FF00 | (000,255,000) | |
| Maroon (rödbrun) | #800000 | (128,000,000) | |
| Marinblå (marinblå) | #000080 | (000,000,128) | |
| Oliv (oliv) | #808000 | (128,128,000) | |
| Lila | #800080 | (128,000,128) | |
| Röd (röd) | # FF0000 | (255,000,000) | |
| Silver (silver) | # C0C0C0 | (192,192,192) | |
| Blågrön (grågrön) | #008080 | (000,128,128) | |
| Vit (vit) | #FFFFFF | (255,255,255) | |
| Gul | # FFFF00 | (255,255,000) |
tabell lila färger och nyanser
| namn | 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 (en nyans av magenta) | # DE3163 | (153,149,140) | |
| Aubergine aubergine (aubergine) | #990066 | (153,000,132) | |
| Lavendelblush (rosa lavendel) | & nbsp # FFF0F5 | (255,240,245) | |
| Lila (lila) | # C8A2C8 | (200,162,200) | |
| Magenta (magenta) | # FF008F | (255,000,143) | |
| Orkidé (orkidé) | # DA70D6 | (218,112,214) | |
| Rödviolett | # C71585 | (199,021,133) | |
| Sanguine (sanguine) | # 92000A | (146,000,010) | |
| Tistel (nyans av magenta) | # D8BFD8 | (185,211,238) | |
| Violett aubergine (nyans av lila) | #991199 | (153,017,153) | |
| Rosa vivo (djuprosa) | # FF007F | (255,000,127) | |
| Lavendel-ros (nyans av lila) | # FBA0E3 | (108,123,139) | |
| Mountbatten rosa | # 997ABD | (153,122,141) |
tabell grå färger och nyanser
| namn | 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) | # 99958с | (153,149,140) | |
| (Ljusgrått) | #bbbbbb | (187,187,187) | |
| (Silver) | # c0c0c0 | (192,192,192) | |
| (Gråvit) | # f0f0f0 | (240,240,240) | |
| (Skägg av Abdel-Kerim) | # e0e0e0 | (224,224,224) | |
| LightGray (Ljusgrå) | # d3d3d3 | (211,211,211) | |
| LightStateGray () | #778899 | (119,136,153) | |
| StateGray-1 (Pale cornflower blue1) | # c6e2ff | (198,226,255) | |
| StateGray-2 (Pale cornflower blue2) | # b9d3ee | (185,211,238) | |
| StateGray3 () | # 9fb6cd | (159,182,205) | |
| StateGray4 () | # 6c7b8b | (108,123,139) |
Bord (palett) html färger ger dig möjlighet att självständigt välja den ton du behöver. Färgvärdet visas i tre format: Hex, RGB och HSV.
- Hex består av tre två teckenvärden i hexadecimal notation. Till exempel: # ff00b3, där det första paret är rött, det andra är grönt och det tredje är blått.
- RGB (RedGreenBlue) har formen "200,100,255" som anger mängden motsvarande ton (röd, grön, blå) i den resulterande färgen.
- HSV (Nyans, mättnad, värde - nyans, mättnad, värde) - färgmodell, där koordinaterna är:
- Nyans - nyans, kan variera från 0 ° till 360 °.
- Mättnad-mättnad, varierar från 0-100 eller 0-1. Ju större denna parameter, desto renare är färgen, varför denna parameter ibland kallas 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 över färger med namn
Tabellen listar de engelska färgnamnen (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 att de visas samma i alla webbläsare.
| Färgnamn | HEX | Färg |
|---|---|---|
| Svart | #000000 | |
| Marin | #000080 | |
| Mörkblå | # 00008B | |
| MediumBlå | # 0000CD | |
| Blå | # 0000FF | |
| Mörkgrön | #006400 | |
| Grön | #008000 | |
| Kricka | #008080 | |
| DarkCyan | # 008B8B | |
| DeepSkyBlue | # 00BFFF | |
| Darkturquise | # 00CED1 | |
| MediumVårGrön | # 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 | |
| Kadettblå | # 5F9EA0 | |
| Blåklint Blå | # 6495ED | |
| MediumAquaMarine | # 66CDAA | |
| DimGray | #696969 | |
| Skifferblå | # 6A5ACD | |
| OliveDrab | # 6B8E23 | |
| Skiffer grå | #708090 | |
| LightSlateGray | #778899 | |
| MediumSateSblå | # 7B68EE | |
| GräsmattaGrön | # 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 | |
| Sadelbrun | # 8B4513 | |
| DarkSeaGreen | # 8FBC8F | |
| Ljusgrön | # 90EE90 | |
| MediumLila | # 9370D8 | |
| Mörkviolett | # 9400D3 | |
| Ljusgrön | # 98FB98 | |
| DarkOrchid | # 9932CC | |
| Gulgrön | # 9ACD32 | |
| Sienna | # A0522D | |
| Brun | # A52A2A | |
| Mörkgrå | # A9A9A9 | |
| Ljusblå | # ADD8E6 | |
| Grön gul | # ADFF2F | |
| Paleturkos | #AFEEEE | |
| LightSteelBlue | # B0C4DE | |
| Puderblå | # B0E0E6 | |
| Eldfast tegel | # B22222 | |
| DarkGoldenRod | # B8860B | |
| MediumOrkidé | # BA55D3 | |
| RosyBrown | # BC8F8F | |
| Mörkhaki | # BDB76B | |
| Silver | # C0C0C0 | |
| MediumViolettRöd | # C71585 | |
| IndianRed | # CD5C5C | |
| Peru | # CD853F | |
| Choklad | # D2691E | |
| Solbränna | # D2B48C | |
| Ljusgrått | # D3D3D3 | |
| PaleVioletRed | # D87093 | |
| Tistel | # D8BFD8 | |
| Orkide | # DA70D6 | |
| Gullris | # DAA520 | |
| djupröd | # DC143C | |
| Gainsboro | #DCDCDC | |
| Plommon | # DDA0DD | |
| BurlyWood | # DEB887 | |
| LightCyan | # E0FFFF | |
| Lavendel | # E6E6FA | |
| Darksalmon | # E9967A | |
| Violett | # EE82EE | |
| PaleGoldenRod | # EEE8AA | |
| LightCoral | # F08080 | |
| Kaki | # F0E68C | |
| AliceBlue | # F0F8FF | |
| HoneyDew | # F0FFF0 | |
| Azurblå | # F0FFFF | |
| Sandbrun | # F4A460 | |
| Vete | # F5DEB3 | |
| Beige | # F5F5DC | |
| Vit rök | # F5F5F5 | |
| MintCream | # F5FFFA | |
| GhostWhite | # F8F8FF | |
| Lax | # FA8072 | |
| AntiktVitt | # FAEBD7 | |
| Linné | # FAF0E6 | |
| LightGoldenRodGul | # FAFAD2 | |
| OldSpets | # FDF5E6 | |
| Röd | # FF0000 | |
| Fuchsia | # FF00FF | |
| Magenta | # FF00FF | |
| DeepPink | # FF1493 | |
| Orange röd | # FF4500 | |
| Tomat | # FF6347 | |
| Skrikrosa | # FF69B4 | |
| Korall | # FF7F50 | |
| Mörkorange | # FF8C00 | |
| LightSalmon | # FFA07A | |
| Orange | # FFA500 | |
| Ljusrosa | # FFB6C1 | |
| Rosa | # FFC0CB | |
| Guld | # FFD700 | |
| PeachPuff | # FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Mockasin | # FFE4B5 | |
| Bisque | # FFE4C4 | |
| MistyRose | # FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | # FFEFD5 | |
| LavendelBlush | # FFF0F5 | |
| Snäckskal | # FFF5EE | |
| Cornsilk | # FFF8DC | |
| CitronChiffong | #FFFACD | |
| BlommigVit | # FFFAF0 | |
| Snö | #FFFAFA | |
| Gul | # FFFF00 | |
| Ljusgul | # FFFFE0 | |
| Elfenben | # FFFFF0 | |
| Vit | #FFFFFF |
Hexadecimala tal används för att ställa in färger. Hexadecimalsystemet, till skillnad från 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. Tal från 10 till 15 ersätts med latinska bokstäver. Tal som är större än 15 i hexadecimal bildas genom att kombinera två tal till ett. Till exempel talet 255 tum decimalsystem motsvarar talet FF i hexadecimala. För att undvika förvirring i definitionen av nummersystemet placeras hashtecknet # framför hexadecimaltalet, till exempel # 666999. Var och en av de tre färgerna - rött, grönt och blått - 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 färgens röda komponent, de två mellersta - gröna och de två sista - blå. Det är tillåtet att använda en förkortad form som #rgb, där varje tecken ska fördubblas. Så, # fe0 -posten bör behandlas 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 namn. Tabell 1 visar namnen, hexadecimalkoden, RGB, HSL -värden och en 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,0255) | hsl (240,100%, 50%) | Blå | |
| Marin | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | marinblå | |
| 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 |
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 hjälp av decimalvärdena för de röda, gröna och blå komponenterna. Var och en av de tre färgkomponenterna tar ett värde från 0 till 255. Det är också tillåtet att ställa in färgen som en procentsats, medan 100% kommer att motsvara talet 255. Först anges rgb -nyckelordet och sedan inom parentes, färgkomponenter anges, 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 är i syntax liknande RGB, men innehåller en alfakanal som styr elementets transparens. Värdet 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halv ogenomskinligt.
RGBA har lagts till i CSS3, så valideringen av CSS -koden bör göras med denna version. Det bör noteras att CSS3 -standarden fortfarande är under utveckling och vissa funktioner i den kan förändras. Till exempel valideras en RGB-färg som läggs till i egenskapen bakgrundsfärg, men färgen som läggs till i bakgrundsegenskapen inte längre. 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 Nyans (nyans), mättad (mättnad) och lätthet (ljushet). Nyans är värdet på färgen på färghjulet (bild 1) och anges i grader. 0 ° är rött, 120 ° är grönt och 240 ° är blått. Nyansvärdet kan variera från 0 till 359.
Ris. 1. Färghjul
Mättnad är intensiteten hos en färg, mätt i procent från 0% till 100%. Ett värde på 0% anger ingen färg och en grå nyans, 100% är det maximala mättnadsvärdet.
Ljushet anger 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 på 0% och 100% motsvarar svartvitt.
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 i syntax HSL, men innehåller en alfakanal som anger elementets transparens. Värdet 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halv ogenomskinligt.
Färgvärden i RGBA-, HSL- och HSLA -format har lagts till i CSS3, så var noga med att kontrollera om versionen är giltig när du använder dessa format.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
En varning
Alla metoder för att fånga ett lejon som anges på webbplatsen är teoretiska och baserade på beräkningsmetoder. Författarna garanterar inte din säkerhet när de använder dem och frånsäger sig något ansvar för resultatet. Kom ihåg att lejonet är ett rovdjur och ett farligt djur!
Resultat detta exempel visas i fig. 2.
Ris. 2. Färger på webbsidan
Denna sida innehåller en tabell med nyckelord som kan användas för att representera färger i webbutvecklingsspråk som HTML, CSS, JavaScript, Flash och mer.
I de gamla specifikationerna för WC3 -koncernen stavades bara 16 nyckelord används för att ställa in färger i HTML och CSS. I senare, nyare specifikationer, har ytterligare 130 nyckelord lagts till för att beteckna färgnamn. I följande tabell visas de färgnamn, hexadecimala och RGB -koder som de motsvarar.
Enligt CSS -regler är färgnamn inte skiftlägeskänsliga. IndianRed och indianred färgposter är likvärdiga.
Det är också värt att notera att av de 146 sökorden i tabellen finns det faktiskt färre färger i den. Detta beror på att vissa sökord betyder samma färg. Så namnen Gray och Gray står för 50% grå med koden # 808080, och ordet Magenta är en synonym för HTML -färgen Fuchsia, motsvarande hex -koden # FF00FF. Också synonymer är orden Aqua och Cyan, de motsvarar koden # 00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
CSS -färgmodulen beskriver de värden som gör det möjligt för författare att definiera färger och opacitet för HTML -element, liksom värdena för färgegenskapen.
Färg egenskap
1. Prioriterade färger: färgegenskapen
Egenskapen anger teckensnittsfärgen med olika system färgåtergivning. Egenskapen beskriver färgen på textinnehållet i elementet. Det används också för att tillhandahålla ett potentiellt indirekt värde (currentColor) för alla andra egenskaper som tar färgvärden.
Fastigheten ärvs.
2. Färgvärden
2.1. Huvudord
Listan över huvudord innehåller följande betydelser:
| namn | 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: blågrön;
2.2. Numeriska färgvärden
2.2.1. RGB -färger
RGB -hexadecimalt värdeformat är # -tecknet omedelbart följt av tre eller sex hexadecimala tecken. Tresiffrigt RGB #rgb konverteras till sexsiffrigt #rrggbb genom att kopiera siffror istället för att lägga till nollor. Till exempel expanderar # fb0 till # ffbb00. Detta säkerställer att vit #ffffff kan specificeras i den korta #fff och tar bort alla beroenden på skärmens färgdjup.
RGB-värdeformatet 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). Heltalet 255 motsvarar 100% och F eller FF i hexadecimal notation:
Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF
Mellanrumstecken är tillåtna runt numeriska värden.
