HTML färgnamn - Hur man implementerar färger på webbsidan (exempel)

• Introduktion till HTML-färgnamn

Introduktion till HTML-färgnamn

HTML-färgnamnen är korrekt betecknade i para. Färger är viktiga, inte bara de används för att dekorera en webbsida, men i vissa fall kanske du vill ändra textfärgen för att ge en bättre kontrast mot sidobakgrunden. Med tanke på HTML är en skriven i textform kan du inte bara färga koden som du vill och förvänta dig att webbläsaren ska använda samma färg när du återger sidan. Istället måste du använda dig av att använda taggar och attribut för att berätta för webbläsaren vilken färg du vill använda.

Färger i HTML

I HTML-färgnamn kan färger betecknas med hjälp av hex-värdet eller dess namn. HTML har stöd för de vanligaste färgerna. I den här artikeln kommer jag att dela med dig 140 namn och hexvärden för dessa färger.

En sak att tänka på är att du inte behöver begränsa dig till dessa färger, du kan använda valfritt verktyg för att välja Hex för att hitta Hex-värdet på vilken färg du vill och använda den på din webbsida.

Använda HTML-färgnamn

Att implementera färger på din webbsida är enkelt och kan göras både inline och via ett separat CSS-formatmall.

När du ska använda samma HTML-färgnamn på en sida flera gånger är det en bättre idé att använda CSS-ark för att definiera och ställa in färger. Omvänt, om du bara behöver använda färg en eller två gånger, anses inline-metoden vara bättre.

1. Använda HTML Color Inline


Brown H3 Heading
Gainsboro colored paragraph text



Brown H3 Heading
Gainsboro colored paragraph text



Brown H3 Heading
Gainsboro colored paragraph text



Brown H3 Heading
Gainsboro colored paragraph text



Brown H3 Heading
Gainsboro colored paragraph text


2. Implementering i CSS

h1 ( color: Brown; )
p ( color: Gainsboro; )

Olika HTML-färgnamn

Nu när du vet vad HTML-färgnamn är och hur du kan använda dem på dina sidor, här är en länk med färgnamn som du kan bokmärka och använda i dina projekt:

1. Grå och svart HTML-färgnamn

Gråa och svarta färger är i de flesta fall perfekta för textens färg på sidan eftersom dessa färger har en vit bakgrund med bästa läsbarhet. En intressant sak att komma ihåg är att moderna telefoner med OLED-skärmar som krävs behöver någon batterikraft för att visa svart färg om din publik kommer att vara på mobil, det är en klok idé att använda svart som bakgrundsfärg och vitt eller annat ljus färger som förgrundsfärg.

Koda	Färg
# 000000	Svart
# 0C090A	Natt
# 2C3539	Gunmetal
# 2B1B17	Midnatt
# 34282C	Träkol
# 25383C	Mörk skiffergrå
# 3B3131	Olja
# 413.839	Svart katt
# 3D3C3A	Iridium
# 463E3F	Svart ål
# 4C4646	Svart ko
# 504A4B	Gråvarg
# 565.051	Vampyrgrå
# 5C5858	Grå delfin
# 625D5D	Kolgrå
# 666.362	Ash Grey
# 6D6968	Molnigt grått
# 726E6D	Smokey Grey
# 736F6E	grå
# 837E7C	Granit
# 848.482	Battleship Grey
# B6B6B4	Grått moln
# D1D0CE	Grå gås
# E5E4E2	Platina
# BCC6CC	Metalliskt silver
# 98AFC7	Blå grå
# 6D7B8D	Ljus skiffergrå
# 657.383	Skiffer grå
# 616D7E	Jet Grey

2. Blå HTML-färgnamn

Blå understrukad text betraktas som en länk eftersom den är standardlänkstil för de flesta webbläsare. Du bör undvika att använda blått för all text på en sida eftersom besökare kan misstagas för hyperlänkar.

# 646D7E	Mist Blue
# 566D7E	Marmorblått
# 737CA1	Skifferblått
# 4863A0	Stålblå
# 2B547E	Blåskrika
# 2B3856	Mörk skifferblå
# 151B54	Midnattsblå
# 000080	Marinblå
# 342D7E	Blåval
# 15317E	Lapis Blue
# 151B8D	Denim mörkblå
# 0000A0	Jorden blå
# 0020C2	Koboltblå
# 0041C2	Blåbärblått
# 2554C7	Safirblå
# 1569C7	Blåa ögon
# 2B60DE	Kungsblått
# 1F45FC	Blå orkidé
# 6960EC	Blue Lotus
# 736AFF	Ljus skifferblå
# 357EC7	Windows Blue
# 368BC1	Glacial Blue Ice
# 488AC7	Silkeblått
# 3090C7	Blue Ivy
# 659EC7	Blue Koi
# 87AFC7	Columbia Blue
# 95B9C7	Baby blå
# 728FCE	Ljus stålblå
# 2B65EC	Havsblå
# 306EFF	Blått band
# 157DEC	Blå klänning
# 1589FF	Dodger Blue
# 6495ED	Blåklintblått
# 6698FF	Himmelsblå
# 38ACEC	Butterfly Blue
# 56A5EC	Isberg
# 5CB3FF	Crystal Blue
# 3BB9FF	Deep Sky Blue
# 79BAEC	Denim blå
# 82CAFA	Ljus himmelblå
# 82CAFF	Day Sky Blue
# A0CFEC	Jeansblå
# B7CEEC	Blå ängel
# B4CFEC	Pastellblå
# C2DFFF	Havsblått
# C6DEFF	Puderblå
#AFDCEC	Korallblått
#ADDFFF	Ljusblå
#BDEDFF	Robin Egg Blue
#CFECEC	Blekblå lilja
# E0FFFF	Lätt Cyan
# EBF4FA	Vatten
# F0F8FF	AliceBlue
# F0FFFF	Azurblå
#CCFFFF	Lätt skiffer
# 93FFE8	Lätt akvamarin
# 9AFEFF	Elektriskt blå
# 7FFFD4	Akvamarin
# 00FFFF	Cyan eller Aqua
# 7DFDFE	Tron Blue
# 57FEFF	Blå zirkon
# 8EEBEC	Blå lagun
# 50EBEC	Celeste
# 4EE2EC	Blå diamant
# 81D8D0	Tiffany Blue
# 92C7C7	Cyan Opaque
# 77BFC7	Blue Hosta
# 78C7C7	Norrsken Blå
# 48CCCD	Medium turkos
# 43C6DB	Turkos
# 46C7C7	Manet
# 7BCCB5	Blå grön

3. Gröna HTML-färger

På webbplatser relaterade till natur, pengar, miljö etc kan Green vara ett bra val av färg att använda som bakgrund.

# 43BFC7	Macaw Blue Green
# 3EA99F	Ljus havgrön
# 3B9C9C	Mörkt turkos
# 438D80	Sea Turtle Green
# 348.781	Medium akvarin
# 307D7E	Grönaktig blå
# 5E7D7E	Gråaktig turkos
# 4C787E	Beetle Green
# 008.080	Kricka
# 4E8975	Havsgrön
# 78866B	Camouflage Green
# 848b79	Salviagrön
# 617C58	Hazel Green
# 728C00	Venom Green
# 667C26	Fern Green
# 254.117	Dark Forest Green
# 306.754	Medium Sea Green
# 347.235	Medium Forest Green
# 437C17	Tånggrön
# 387C44	Pine Green
# 347C2C	Jungle Green
# 347C17	Shamrock Green
# 348.017	Medium vårgrön
# 4E9258	Skog grön
# 6AA121	Grönlök
# 4AA02C	Spring Green
# 41A317	Limegrön
# 3EA055	Clover Green
# 6CBB3C	Grön orm
# 6CC417	Främmande grön
# 4CC417	Grönt äpple
# 52D017	Gulgrön
# 4CC552	Kelly Green
# 54C571	Zombie Green
# 99C68E	Groda grön
# 89C35C	Gröna ärtor
# 85BB65	Dollar Bill Green
# 8BB381	Dark Sea Green
# 9CB071	Iguana Green
# B2C248	Avokado Green
# 9DC209	Pistaschgrön
# A1C935	Salladgrön
# 7FE817	Kolibri Green
# 59E817	Nebula Green
# 57E964	Stoplight Go Green
# 64E986	Alger gröna
# 5EFB6E	Jade grön
# 00FF00	Grön
# 5FFB17	Smaragdgrön
# 87F717	Lawn Green
# 8AFB17	Chartreuse
# 6AFB92	Dragon Green
# 98FF98	mintgrön
# B5EAAA	Grön tumme
# C3FDB8	Lätt Jade
# CCFB5D	Te grönt
# B1FB17	Grön gul
# BCE954	Slime Green
# EDDA74	Gullris
# EDE275	Skörda guld
# FFE87C	Solgul

4. Gula HTML-färgnamn

Gult kan användas för att skapa en icke-allvarlig stämning, visa kreativitet och optimism på en sida. Tänk på att gult fungerar bättre som bakgrund än en textfärg.

# FFFF00	Gul
# FFF380	Majsgult
# FFFFC2	Pergament
#FFFFCC	Grädde
# FFF8C6	Citronchiffon
# FFF8DC	Cornsilk
# F5F5DC	Beige
# FBF6D9	Blond
# FAEBD7	AntiqueWhite
# F7E7CE	Champagne
#FFEBCD	BlanchedAlmond
# F3E5AB	Vanilj
# ECE5B6	Tan Brown
# FFE5B4	Persika
# FFDB58	Senap
# FFD801	Gummi Ducky Yellow
# FDD017	Ljus guld
# EAC117	gyllenbrun
# F2BB66	Makaroner och ost
# FBB917	Saffran
# FBB117	Öl
# FFA62F	Cantaloupmelon
# E9AB17	Bi gul

5. Bruna HTML-färger

Brun bakgrund kan göra det svårt att läsa den vita eller svarta texten, du kan använda andra färger som har god kontrast mot din brunbrun.

# E2A76F	Brunt socker
# DEB887	Burlywood
# FFCBA4	Deep Peach
# C9BE62	Ginger Brown
# E8A317	Skolbuss gul
# EE9A4D	Sandy Brown
# C8B560	Fall Leaf Brown
# D4A017	Orange guld
# C2B280	Sand
# C7A317	Cookie Brown
# C68E17	Kola
# B5A642	Mässing
# ADA96E	Kaki
# C19A6B	Kamelbrun
# CD7F32	Brons
# C88141	Tiger Orange
# C58917	Kanel
# AF9B60	Bullet Shell
# AF7817	Dark Goldenrod
# B87333	Koppar
# 966F33	Trä
# 806.517	Oak Brown
# 827.839	Mockasin
# 827B60	Army Brown
# 786D5F	Sandsten
# 493D26	Mocka
# 483C32	Taupe
# 6F4E37	Kaffe
# 835C3B	Brun björn
# 7F5217	Red Dirt
# 7F462C	sepia

6. Orange HTML-färger

Orange fungerar bra för att markera en punkt när färgen används som bakgrund och det kan väcka känsla av entusiasm och värme utan att vara för klibbig.6. Orange HTML-färger

# C47451	Orange lax
# C36241	Rost
# C35817	Röd räv
# C85A17	Choklad
# CC6600	Sedona
# E56717	Papaya Orange
# E66C2C	Halloween orange
# F87217	Pumpa Orange
# F87431	Konstruktion kotte orange
# E67451	Soluppgång orange
# FF8040	Mango Orange
# F88017	Mörk orange
# FF7F50	Korall
# F88158	Korgboll Orange
# F9966B	Lätt lax
# E78A61	Mandarin
# E18B6B	Mörk lax
# E77471	Lätt korall
# F75D59	Bean Red
# E55451	Valentine Red
# E55B3C	Chockerande orange

7. Röda HTML-färgkoder

För vissa webbläsare används röd understrukad text som besökta länkar, du bör undvika att använda den för att inte förvirra besökarna.

# FF0000	Röd
# FF2400	Scharlakansrött
# F62217	Rubinröd
# F70D1A	Ferrari Red
# F62817	Fire Engine Red
# E42217	Lava Red
# E41B17	Love Red
# DC381F	Grapefrukt
# C34A2C	Kastanjröd
# C24641	Körsbärsröd
# C04000	Mahogny
# C11B17	Chilipeppar
# 9F000F	Tranbär
# 990.012	Rödvin
# 8C001A	Burgundy
# 954.535	kastanj
# 7E3517	Blodröd
# 8A4117	Sienna
# 7E3817	sangria
# 800.517	Eldfast tegel
# 810.541	Rödbrun
# 7D0541	Plum Pie
# 7E354D	Sammetrödbrun
# 7D0552	Plommon sammet
# 7F4E52	Rosy Finch
# 7F5A58	Puce
# 7F525D	Dull Purple
# B38481	Rosy Brown
# C5908E	Khaki Rose

8. Rosa HTML-färgkoder

Enligt färgvetenskap kan Pink och dess nyanser användas om du vill att besökaren ska ha en känsla av förtroende, sofistikering och värme i sitt undermedvetna.

# C48189	Pink Bow
# C48793	Läppstift rosa
# E8ADAA	Reste sig
# ECC5C0	Rose Gold
# EDC9AF	Ökensand
# FDD7E4	Grisrosa
#FCDFFF	Sockervadd
#FFDFDD	Pink Bubble Gum
# FBBBB9	Dimmig ros
#FAAFBE	Rosa
#FAAFBA	Ljusrosa
# F9A7B0	Flamingo Pink
# E7A1B0	Rosa ros
# E799A3	Pink Daisy
# E38AAE	Cadillac Pink
# F778A1	Nejlika rosa
# E56E94	Blush Red
# F660AB	Skrikrosa
# FC6C85	Vattenmelon Pink
# F6358A	Violett röd
# F52887	Djup rosa
# E45E9D	Rosa muffin
# E4287C	Rosa lemonad
# F535AA	Neon rosa
# FF00FF	Magenta
# E3319D	Dimorphotheca Magenta
# F433FF	Ljus neonrosa
# D16587	Blekfiolett röd
# C25A7C	Tulpan rosa
# CA226B	Medium Violet Red
# C12869	Rogue Pink
# C12267	Bränd rosa
# C25283	Bashful Pink
# C12283	Dark Carnation Pink
# B93B8F	Plommon

9. Lila och vita HTML-färgkoder

Att använda vit textfärg mot vit bakgrund gör det oläsligt för användarna och bortsett från att inte vara användarvänligt kan du få en SEO-straff för din webbplats, använd alltid vita och andra ljusa färger mot mörk bakgrund.

# 7E587E	Viola Purple
# 571B7E	Lila Iris
# 583.759	Plommon lila
# 4B0082	Indigo
# 461B7E	Lila monster
# 4E387E	Purple Haze
# 614.051	Äggplanta
# 5E5A80	Druva
# 6A287E	Purple Jam
# 7D1B7E	Dark Orchid
# A74AC7	Lila blomma
# B048B5	Medium Orchid
# 6C2DC7	Lila ametist
# 842DCE	Dark Violet
# 8D38C9	Violett
# 7A5DC7	Purple Sage Bush
# 7F38EC	Härlig lila
# 8E35EF	Lila
# 893BFF	Aztech Purple
# 8467D7	Medium lila
# A23BEC	Jasmine Purple
# B041FF	Lila påsklilja
# C45AEC	Tyrian Purple
# 9172EC	Crocus Purple
# 9E7BFF	Lila Mimosa
# D462FF	Heliotrope Purple
# E238EC	djupröd
# C38EC7	Purple Dragon
# C8A2C8	Lila
# E6A9EC	Blush Pink
# E0B0FF	mauve
# C6AEC7	Wisteria Purple
# F9B7FF	Blossom Pink
# D2B9D3	Tistel
# E9CFEC	Snäcka
# EBDDE2	Lavendel Pinocchio
# E3E4FA	Lavendelblått
# FDEEF4	Pärla
# FFF5EE	Snäckskal
#FEFCFF	Mjölkvit
#FFFFFF	Vit

Vissa mest använda HTML-färgkoder

Det här är några av de populära färgerna som används på webben, jag har lagt dem i en separat tabell så att dessa kan hittas snabbt.

Röd	# FF0000	Vit	#FFFFFF
cyan	# 00FFFF	Silver	# C0C0C0
Blå	# 0000FF	Grå eller grå	# 808080
Mörkblå	# 0000A0	Svart	# 000000
Ljusblå	# ADD8E6	Orange	# FFA500
Lila	# 800080	Brun	# A52A2A
Gul	# FFFF00	Rödbrun	# 800000
Kalk	# 00FF00	Grön	# 008000
Magenta	# FF00FF	Oliv	# 808 tusen

Slutsats

Nu när du har snabba referenstabeller för vanliga HTML-färger bör du kunna använda vilken färg du vill ha på din sida. Ur kreativ synvinkel bör du undvika att använda hårda färger om du kan och när du arbetar med framsidan av webbplatsen, är det också viktigt att hålla bakgrundsgrafiken eller färgerna för att säkerställa korrekt kontrast.

Rekommenderade artiklar

Detta är en guide till HTML-färgnamn. Här diskuterar vi hur man implementerar färger på en webbsida med hjälp av olika HTML-färger med exempel. Du kan också gå igenom våra andra artiklar som föreslås för att lära dig mer–

1. HTML-typsnitt
2. HTML-attribut
3. HTML-stilark
4. Hur HTML fungerar
5. Färger i Matlab | Hur man ändrar stil i Matlab?