Kod röd blå vit. Färg i stilar kan specificeras på olika sätt: med hexadecimalt värde, med namn, i RGB-, RGBA-, HSL-, HSLA-format. Numerisk representation av färg

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.

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 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 röda nyansen. 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.

Tabell 6.3. Namn på några färger
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

Färger

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 .

Tyvärr är det ännu inte möjligt att visa smakupplevelser på hemsidan. Men detta kan kompenseras fullt ut med hjälp av färger. När allt kommer omkring låter html-färger dig visa vilken som helst av miljontals nyanser. Så" färgade pennor Det finns många fler än sju i hans uppsättning.

Färgschema i html

I html kan färg anges i flera format:

1. Som ett hexadecimalt värde – används koden som anges i det hexadecimala talsystemet. Sådana färgkoder i html består av tre par hexadecimala tal. Varje par är ansvarigt för färgens mättnad med sin primära färg:

  • Det första numeriska paret är ansvarigt för färgen röd;
  • Det andra paret är för innehållet i grön färg;
  • Det senare är för sitt blå innehåll.

En hash-markering placeras i början av koden (före siffrorna). Detta är den hexadecimala färgkoden. Förutom siffror från 1 till 9 använder detta nummersystem bokstäver i det latinska alfabetet (A, B, C, D, E, F).

Till exempel kommer den vita färgkoden i html att se ut som #FFFFFF:

2. Nyckelord - HTML stöder för närvarande cirka 147 nyckelord. Men alla dessa ord är inte unika. Vissa av dem hänvisar till samma färgnyans.

Färgen grå representeras av två nyckelord: grå och grå . Deras hexadecimala kod (HEX) ges av samma värde #808080.

Exempel:

#808080



3. I RGB-format - denna färgkodning i html är baserad på användningen av tre värden, inställda i intervallet från 0 till 255. Var och en av dem bestämmer färgens mättnad med en av de primära färgerna:

  • R – röd (röd);
  • G - grön (grön);
  • B – blå (blå).

Färgnumret i RGB-format skrivs i följande form: rgb(0, 210, 100).

bakgrundsfärg:rgb(100,186,43)

4. I RGBA-formatet - det är ett förbättrat RGB-format, där det fjärde värdet anger färgens genomskinlighet som ett decimaltal från 0 till 1.

Användningsexempel:

bakgrundsfärg:rgba(100,86,143,0.2)

bakgrundsfärg:rgba(100,86,143,0.5)

bakgrundsfärg:rgba(100,86,143,0.8)

bakgrundsfärg:rgba(100,86,143,1)

HTML-färgtabeller och färggeneratorer

Med ett så brett utbud av färginställningsformat är det lätt att bli förvirrad. Därför uppfanns ett speciellt färgbord. Den tillhandahåller 147 nyckelnamn på färgnyanser med överensstämmelsekoder i alla större färgstandarder. Dessutom är varje fält utrustat med en stapel för visuellt färgval. En av dessa tabeller presenteras på webbplatsen colorscheme.ru:

Men även med denna strukturering av matchning kan det vara svårt att välja rätt nyans. Och det är inte ett faktum att tabellen med färgkoder kommer att innehålla den du behöver.

För att komma runt detta hinder och göra det så enkelt som möjligt att välja rätt nyans har interaktiva webbtjänster utvecklats. Deras användargränssnitt kan skilja sig något från varandra.

På webbplatsen html-color-codes.info ser färggeneratorn ut så här:

Och inom tjänsten color-picker.appsmaster.co implementeras det här verktyget lite annorlunda:

Mättnaden för varje färg i generatorn ställs in med hjälp av speciella reglage. Visuellt visas nyansen av färgen på ramen och rektangeln på vänster sida. Längst ner visar 3 fält färgkoden i grundläggande format.

Men färggeneratorn är tillgänglig inte bara på specialiserade webbplatser. Nästan alla grafiska redaktörer är utrustade med ett liknande verktyg. Till exempel Photoshop:

Säkerhetsföreskrifter vid arbete med färg

Och det här var länge sedan, tillbaka i eran med grafikkort som endast stödde 256 färger. I dessa avlägsna tider kunde operativsystem bara visa ett visst antal åttabitars nyanser utan distorsion.

Sedan utvecklades ett fantastiskt bord med säkra färger. Den specificerade 216 nyanser som kunde visas utan förvrängning i någon av den tidens webbläsare. Och till denna dag denna " stort manuskript» är fortfarande tillgänglig på vissa resurser:

Nuförtiden har allt förändrats. Därför är alla säkerhetsregler vid arbete med färg i html helt upphävda. När allt kommer omkring stöder modern datorhårdvara mer än 16 miljoner olika nyanser. Och 216 säkra färger har sjunkit i glömska.

Dessa uppgifter bekräftas till fullo av statistik. Att döma av det, 2014, har endast 0,5% av användarna datorer som endast stöder 256 nyanser.

Grunderna för färgharmoni

Alla av oss är inte utrustade med ett naturligt harmoniskt smaksinne. Därför kan det vara en riktig utmaning att välja rätt färg. Men, beröm till vetenskapen, lyckades hon till och med beskriva färgharmoni i form av flera scheman. Alla är baserade på användningen av ett färghjul. Schema för harmoniskt urval av färger i html.

Den här sidan innehåller en tabell med nyckelord som kan användas för att beteckna färger på webbutvecklarspråk som: HTML, CSS, JavaScript, Flash, etc.

I de gamla specifikationerna för WC3-koncernen angavs endast 16 nyckelord, med hjälp av vilka färger sattes i HTML och CSS. I ytterligare modernare specifikationer lades ytterligare 130 nyckelord till för att indikera färgnamn. Följande tabell innehåller färgnamnen och hex- och RGB-koderna 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 de 146 sökorden i tabellen finns det faktiskt färre färger i den. Detta beror på att vissa sökord hänvisar till samma färg. Namnen Grå och Grå representerar alltså den 50 % grå färgkoden #808080, och ordet Magenta är en synonym för HTML-färgen Fuchsia, motsvarande den hexadecimala koden #FF00FF. Synonyma är också orden Aqua och Cyan, de motsvarar koden #00FFFF.

Färgnamn i HTML och CSS HEX RGB
Röda toner:
IndianRött#CD5C5C205, 92, 92
LightCoral#F08080240, 128, 128
Lax#FA8072250, 128, 114
Mörklax#E9967A233, 150, 122
Ljuslax#FFA07A255, 160, 122
djupröd#DC143C220, 20, 60
Röd#FF0000255, 0, 0
Eldfast tegel#B22222178, 34, 34
Mörkröd#8B0000139, 0, 0
Rosa toner:
Rosa#FFC0CB255, 192, 203
Ljusrosa#FFB6C1255, 182, 193
Skrikrosa#FF69B4255, 105, 180
Deep Pink#FF1493255, 20, 147
MediumVioletRöd#C71585199, 21, 133
Blekviolettröd#DB7093219, 112, 147
Orange toner:
Ljuslax#FFA07A255, 160, 122
Korall#FF7F50255, 127, 80
Tomat#FF6347255, 99, 71
Orange röd#FF4500255, 69, 0
Mörkorange#FF8C00255, 140, 0
Orange#FFA500255, 165, 0
Gula toner:
Guld#FFD700255, 215, 0
Gul#FFFF00255, 255, 0
Ljusgul#FFFFE0255, 255, 224
CitronChiffon#FFFACD255, 250, 205
LjusGoldenrodGul#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Mockasin#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
PaleGoldenrod#EEE8AA238, 232, 170
Kaki#F0E68C240, 230, 140
Mörk Khaki#BDB76B189, 183, 107
Violett toner:
Lavendel#E6E6FA230, 230, 250
Tistel#D8BFD8216, 191, 216
Plommon#DDA0DD221, 160, 221
Violett#EE82EE238, 130, 238
Orkide#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumLila#9370DB147, 112, 219
Blåviolett#8A2BE2138, 43, 226
Mörkviolett#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Lila#800080 128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
Mörkskifferblå#483D8B72, 61, 139
Bruna toner:
Majssilke#FFF8DC255, 248, 220
Blancherad mandel#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
Navajovit#FFDEAD255, 222, 173
Vete#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Solbränna#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Gullris#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Choklad#D2691E210, 105, 30
Sadelbrunt#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brun#A52A2A165, 42, 42
Rödbrun#800000 128, 0, 0
Primära färger:
Svart#000000 0, 0, 0
grå#808080 128, 128, 128
Silver#C0C0C0192, 192, 192
Vit#FFFFFF255, 255, 255
Fuchsia#FF00FF255, 0, 255
Lila#800080 128, 0, 128
Röd#FF0000255, 0, 0
Rödbrun#800000 128, 0, 0
Gul#FFFF00205, 92, 92
Oliv#808000 240, 128, 128
Kalk#00FF00250, 128, 114
Grön#008000 233, 150, 122
Aqua#00FFFF205, 92, 92
Kricka#008080 240, 128, 128
Blå#0000FF250, 128, 114
Marin#000080 233, 150, 122
Färgnamn i HTML och CSS HEX RGB
Gröna toner:
Grön gul#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
Gräsgrön#7CFC00124, 252, 0
Kalk#00FF000, 255, 0
Limegrön#32CD3250, 205, 50
Ljusgrön#98FB98152, 251, 152
Ljusgrön#90EE90144, 238, 144
MediumVårGrön#00FA9A0, 250, 154
Vårgrön#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
Havsgrön#2E8B5746, 139, 87
Skog grön#228B2234, 139, 34
Grön#008000 0, 128, 0
Mörkgrön#006400 0, 100, 0
Gulgrön#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Oliv#808000 128, 128, 0
MörkOlivgrön#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
Mörkhavsgrön#8FBC8F143, 188, 143
LjusSjögrön#20B2AA32, 178, 170
Mörkcyan#008B8B0, 139, 139
Kricka#008080 0, 128, 128
Blå toner:
Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
Ljuscyan#E0FFFF224, 255, 255
Blek turkos#AFEEEE175, 238, 238
Akvamarin#7FFFD4127, 255, 212
Turkos#40E0D064, 224, 208
MediumTurkos#48D1CC72, 209, 204
Mörkturkos#00CED10, 206, 209
Kadettblå#5F9EA095, 158, 160
Stålblå#4682B470, 130, 180
Ljusstålblå#B0C4DE176, 196, 222
Puderblå#B0E0E6176, 224, 230
Ljusblå#ADD8E6173, 216, 230
Himmelsblå#87CEEB135, 206, 235
LjusHimmelblå#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
Dodger Blue#1E90FF30, 144, 255
Blåklint Blå#6495ED100, 149, 237
MediumSlateBlå#7B68EE123, 104, 238
Kungsblå#4169E165, 105, 225
Blå#0000FF0, 0, 255
MediumBlå#0000CD0, 0, 205
Mörkblå#00008B0, 0, 139
Marin#000080 0, 0, 128
Midnattsblå#191970 25, 25, 112
Vita toner:
Vit#FFFFFF255, 255, 255
Snö#FFFAFA255, 250, 250
Honungsdagg#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Azurblå#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
Vit rök#F5F5F5245, 245, 245
Snäckskal#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
Gammal spets#FDF5E6253, 245, 230
Blommigt Vit#FFFFAF0255, 250, 240
Elfenben#FFFFFF0255, 255, 240
Antikvit#FAEBD7250, 235, 215
Linné#FAF0E6250, 240, 230
LavendelBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Grå toner:
Gainsboro#DCDCDC220, 220, 220
Ljusgrå#D3D3D3211, 211, 211
Ljusgrå#D3D3D3211, 211, 211
Silver#C0C0C0192, 192, 192
Mörkgrå#A9A9A9169, 169, 169
Mörkgrå#A9A9A9169, 169, 169
grå#808080 128, 128, 128
grå#808080 128, 128, 128
DimGrå#696969 105, 105, 105
DimGrå#696969 105, 105, 105
Ljusskiffergrå#778899 119, 136, 153
Ljusskiffergrå#778899 119, 136, 153
Skiffer grå#708090 112, 128, 144
Skiffer grå#708090 112, 128, 144
Mörkskiffergrå#2F4F4F47, 79, 79
Mörkskiffergrå#2F4F4F47, 79, 79
Svart#000000 0, 0, 0

HTML-färger indikeras med sex tecken efter snedstrecket - till exempel #000000. Dessa sex symboler representerar proportionerna mellan de olika färgerna (röd, grön, blå) i den slutliga färgen. På din datorskärm bildas bilden av ett stort antal punkter som kallas pixlar. Varje pixel är en liten ljuskälla, låt oss kalla det en "ficklampa", som i sin tur består av tre ficklampor - röda, gröna och blå. Genom att minska eller öka intensiteten på glöden hos individuella färgade ficklampor får vi den önskade färgen.

HTML färgkoder

Färger i HTML representeras av en hexadecimal (HEX) notation av rött, blått och grönt (RGB).

Det minsta färgvärdet är 0 (hexadecimalt 00). Det högsta färgvärdet är 255 (hex FF).

Det hexadecimala färgvärdet är tre siffror som börjar med tecknet #.

Färgkoder (betydelser)

Färg HEX-kod RGB-kod
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

16 miljoner nyanser

Att kombinera rött, blått och grönt med värden från 0 till 255 för procentandelen av varje färg resulterar i totalt över 16 miljoner nyanser (256 x 256 x 256).

De flesta moderna bildskärmar kan visa minst 16 384 olika nyanser (LCD-skärmar kan i allmänhet visa 262 tusen 16 miljoner (uppdaterad oktober 2013) färger och CRT-skärmar kan visa ett praktiskt taget obegränsat antal färger).

Färgtabellen nedan visar förändringen i andelen rött från 0 till 255 med nollvärden för blått och grönt:

Röd HEX-kod RGB-kod
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104;0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

Nyanser av grått

För att få nyanser av grått används lika delar av alla färger. För att göra det lättare för dig att välja rätt färg förser vi dig med grå nyanskoder

Nyanser av grått HEX-kod RGB-kod
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)

Cross-browser (alla webbläsare) HTML-färgnamn

En samling av 150 färgnamn i html, som stöds i alla webbläsare.

Standardiserade färgnamn

W3C listar 16 giltiga färgnamn för HTML och CSS: aqua, svart, blå, fuchsia, grå, grön, lime, rödbrun (kastanj), marin (ultramarin), oliv (oliv), lila (lila), röd (röd) , silver (silver), kricka (grå), vit (vit) och gul (gul).

När du använder färger som inte ingår i denna lista är det mer korrekt att använda deras hexadecimala (HEX) kod eller RGB-kod.

Säkra färger

För flera år sedan, när datorer kunde stödja maximalt 256 olika färger, föreslogs en lista med 216 "Web Safe Colors", med 40 färger reserverade för systemet.

Denna palett med 216 färger skapades för att korrekt visa färger i palettläget med 256 färger.

Nu spelar det ingen roll eftersom de flesta datorer runt om i världen har stöd för miljontals färgnyanser. Här är i alla fall en lista över dessa färger:

000000 000033 000066 000099 0000 CC 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 3300 CC 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 9900 CC 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

Färgkoder i CSS används för att specificera färger. Vanligtvis används färgkoder eller färgvärden för att ställa in färgen för antingen förgrundsfärgen för ett element (t.ex. textfärg, länkfärg) eller bakgrundsfärgen för ett element (bakgrundsfärg, blockfärg). De kan också användas för att ändra färgen på en knapp, kant, markör, svävare och andra dekorativa effekter.

Du kan ange dina färgvärden i olika format. Följande tabell listar alla möjliga format:

De listade formaten beskrivs mer i detalj nedan.

CSS-färger - Hexkoder

Hexadecimal färgkodär en sexsiffrig representation av färg. De två första siffrorna (RR) representerar det röda värdet, de nästa två representerar det gröna värdet (GG), och de två sista representerar det blå värdet (BB).

CSS-färger - Korta hex-koder

Kort hex-färgkodär en kortare form av sexteckennotation. I det här formatet upprepas varje siffra för att producera ett ekvivalent sexsiffrigt färgvärde. Till exempel: #0F0 blir #00FF00.

Det hexadecimala värdet kan hämtas från alla grafikprogram som Adobe Photoshop, Core Draw, etc.

Varje hexadecimal färgkod i CSS kommer att föregås av ett hash-tecken "#". Nedan finns exempel på användning av hexadecimala notationer.

CSS-färger - RGB-värden

RGB-värdeär en färgkod som ställs in med hjälp av egenskapen rgb(). Den här egenskapen har tre värden: ett vardera för rött, grönt och blått. Värdet kan vara ett heltal, från 0 till 255, eller en procentsats.

Notera: Alla webbläsare stöder inte egenskapen rgb() color, så det rekommenderas inte att använda den.

Nedan är ett exempel som visar flera färger med RGB-värden.

Färgkodsgenerator

Du kan skapa miljontals färgkoder med vår tjänst.

Webbläsarsäkra färger

Nedan finns en tabell med 216 färger som är de mest säkra och datoroberoende. Dessa färger i CSS sträcker sig från 000000 till FFFFFF hexadecimal kod. De är säkra att använda eftersom de säkerställer att alla datorer visar färg korrekt när de arbetar med 256 färgpaletten.

Tabell över "säkra" färger 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