Inleiding tot HTML-kleurnamen

De HTML-kleurnamen worden correct aangegeven in de alinea. Kleuren zijn belangrijk, niet alleen ze worden gebruikt om een ​​webpagina te versieren, maar in sommige gevallen wilt u misschien de tekstkleur wijzigen om een ​​beter contrast te bieden tegen de achtergrond van de pagina. Overwegend dat HTML in tekstvorm is geschreven, kun je de code niet alleen naar wens inkleuren en verwachten dat de webbrowser dezelfde kleur gebruikt bij het weergeven van de pagina. In plaats daarvan moet u gebruik maken van tags en attributen om de browser te vertellen welke kleur hij moet gebruiken.

Kleuren in HTML

In HTML-kleurnamen kunnen kleuren worden aangeduid met hun hex-waarde of de naam ervan. HTML heeft ondersteuning voor de meest voorkomende kleuren, in dit artikel zal ik 140 namen en hex-waarden van deze kleuren met u delen.

Een ding om in gedachten te houden is dat u zich niet tot deze kleuren hoeft te beperken, u kunt elke kleurkiezer gebruiken om de Hex-waarde van elke gewenste kleur te vinden en deze op uw webpagina te gebruiken.

HTML-kleurnamen gebruiken

Het implementeren van kleuren op uw webpagina is eenvoudig en kan zowel inline als via een afzonderlijke CSS-stylesheet worden gedaan.

Wanneer u meerdere HTML-kleurnamen op een pagina meerdere keren gaat gebruiken, is het een beter idee om CSS Sheet te gebruiken om kleuren te definiëren en in te stellen. Omgekeerd, als u slechts één of twee keer kleur moet gebruiken, wordt het gebruik van de inline-methode als beter beschouwd.

1. Gebruik 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. Implementeren in CSS

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

Verschillende HTML-kleurnamen

Nu je weet wat HTML-kleurnamen zijn en hoe je ze in je pagina's kunt gebruiken, is hier een link met kleurnamen die je kunt bookmarken en gebruiken in je projecten:

1. Grijze en zwarte HTML-kleurnamen

Grijze en zwarte kleuren zijn in de meeste gevallen perfect voor de tekstkleur van de pagina, tegen een witte achtergrond hebben deze kleuren de beste leesbaarheid. Een interessant ding om in gedachten te houden is dat moderne telefoons met OLED-beeldschermen batterijvermogen nodig hebben om zwarte kleur weer te geven als uw publiek mobiel is, het is een verstandig idee om zwart als achtergrondkleur en wit of ander licht te gebruiken kleuren als de voorgrondkleur.

CodeKleur
# 000000Zwart
# 0C090ANacht
# 2C3539Gunmetal
# 2B1B17Middernacht
# 34282CHoutskool
# 25383CDonker leigrijs
# 3B3131Olie
# 413839Zwarte kat
# 3D3C3Airidium
# 463E3FZwarte paling
# 4C4646Zwarte koe
# 504A4BGrijze wolf
# 565051Vampire Gray
# 5C5858Grijze dolfijn
# 625D5DCarbon grijs
# 666362Asgrijs
# 6D6968Bewolkt grijs
# 726E6DSmokey Gray
# 736F6EGrijs
# 837E7CGraniet
# 848482Slagschip grijs
# B6B6B4Grijze wolk
# D1D0CEgrijze gans
# E5E4E2Platina
# BCC6CCMetallisch zilver
# 98AFC7Blauw grijs
# 6D7B8DLicht leigrijs
# 657383Leisteengrijs
# 616D7EJet Gray

2. Blauwe HTML-kleurnamen

Blauw onderstreepte tekst wordt beschouwd als een koppeling, omdat dit de standaard koppelingsstijl is voor de meeste webbrowsers. Gebruik daarom niet alle blauwe tekst op een pagina, aangezien bezoekers deze kunnen verwarren met hyperlinks.

# 646D7EMist blauw
# 566D7EMarmer blauw
# 737CA1Slate Blue
# 4863A0Staal blauw
# 2B547EBlauwe Gaai
# 2B3856Donker leisteenblauw
# 151B54Middernacht blauw
# 000080Marineblauw
# 342D7EBlauwe vinvis
# 15317ELapis Blue
# 151B8DDenim donkerblauw
# 0000A0Earth Blue
# 0020C2Kobalt blauw
# 0041C2Blueberry Blue
# 2554C7Saffierblauw
# 1569C7Blauwe ogen
# 2B60DEKoningsblauw
# 1F45FCBlauwe Orchidee
# 6960ECBlauwe lotus
# 736AFFLicht leisteen blauw
# 357EC7Windows Blauw
# 368BC1IJzig Blauw Ijs
# 488AC7Zijden blauw
# 3090C7Blue Ivy
# 659EC7Blauwe Koi
# 87AFC7Columbia Blue
# 95B9C7Babyblauw
# 728FCELicht staalblauw
# 2B65ECOceaanblauw
# 306EFFBlauw lintje
# 157DECBlauwe jurk
# 1589FFDodger Blue
# 6495EDKorenblauw
# 6698FFHemelsblauw
# 38ACECVlinder blauw
# 56A5ECIjsberg
# 5CB3FFKristal blauw
# 3BB9FFDiep hemelsblauw
# 79BAECSpijkerbroekblauw
# 82CAFALicht hemelsblauw
# 82CAFFDag hemelsblauw
# A0CFECJeans blauw
# B7CEECBlauwe Engel
# B4CFECPastel Blauw
# C2DFFFZee blauw
# C6DEFFPoederblauw
#AFDCECCoral Blue
#ADDFFFLichtblauw
#BDEDFFRobin Egg Blue
#CFECECLichtblauwe lelie
# E0FFFFLichtcyaan
# EBF4FAWater
# F0F8FFAliceBlue
# F0FFFFazuur
#CCFFFFLichte leisteen
# 93FFE8Licht Aquamarijn
# 9AFEFFElektrisch blauw
# 7FFFD4Aquamarijn
# 00FFFFCyaan of Aqua
# 7DFDFETron Blue
# 57FEFFBlauwe Zirkoon
# 8EEBECBlue Lagoon
# 50EBECCeleste
# 4EE2ECBlauwe diamant
# 81D8D0Tiffany Blue
# 92C7C7Cyaan Opaque
# 77BFC7Blauwe Hosta
# 78C7C7Noorderlicht blauw
# 48CCCDMiddel Turquoise
# 43C6DBTurkoois
# 46C7C7kwal
# 7BCCB5Blauw groen

3. Groene HTML-kleuren

Op sites die verband houden met de natuur, geld, milieu, enz. Kan Groen een goede kleurkeuze zijn om als achtergrond te gebruiken.

# 43BFC7Ara Blauwgroen
# 3EA99FLicht zeegroen
# 3B9C9CDonker turkoois
# 438D80Groene zeeschildpad
# 348781Medium Aquamarijn
# 307D7EGroenachtig blauw
# 5E7D7EGrijsachtig turkoois
# 4C787EKever Groen
# 008080taling
# 4E8975Zee groen
# 78866BCamouflage groen
# 848b79Salie groen
# 617C58Hazel Green
# 728C00Vergif groen
# 667C26Fern Green
# 254117Donker bosgroen
# 306754Medium zeegroen
# 347235Medium bosgroen
# 437C17Groen zeewier
# 387C44Pine Green
# 347C2CJungle groen
# 347C17Shamrock Green
# 348017Medium lente groen
# 4E9258Bos Groen
# 6AA121Groene ui
# 4AA02CLente groen
# 41A317Limoen groen
# 3EA055Klaver groen
# 6CBB3CGroene Slang
# 6CC417Alien Green
# 4CC417Groene appel
# 52D017Geel groen
# 4CC552Kelly groen
# 54C571Zombie Green
# 99C68EKikker groen
# 89C35CDoperwten
# 85BB65Dollar Bill Green
# 8BB381Donker zeegroen
# 9CB071Leguaan groen
# B2C248Avocado groen
# 9DC209Pistache groen
# A1C935Salade groen
# 7FE817Kolibrie groen
# 59E817Nebula Green
# 57E964Stoplicht Go Green
# 64E986Algen groen
# 5EFB6EJade groen
# 00FF00Groen
# 5FFB17Smaragdgroen
# 87F717Gazon groen
# 8AFB17Chartreuse
# 6AFB92Dragon Green
# 98FF98muntgroen
# B5EAAAGroene Duim
# C3FDB8Lichte Jade
# CCFB5DThee groen
# B1FB17Groen Geel
# BCE954Slijm groen
# EDDA74Goldenrod
# EDE275Oogst goud
# FFE87CZonnegeel

4. Gele HTML-kleurnamen

Geel kan worden gebruikt om een ​​niet-serieuze stemming te creëren, creativiteit en optimisme op een pagina te tonen. Houd er rekening mee dat geel beter werkt als achtergrond dan als tekstkleur.

# FFFF00Geel
# FFF380Maïs Geel
# FFFFC2Perkament
#FFFFCCRoom
# FFF8C6Citroen Chiffon
# FFF8DCCornsilk
# F5F5DCBeige
# FBF6D9blond
# FAEBD7Antiek wit
# F7E7CEChampagne
#FFEBCDBlanchedAlmond
# F3E5ABVanille
# ECE5B6Tan bruin
# FFE5B4Perzik
# FFDB58Mosterd
# FFD801Rubber Ducky Geel
# FDD017Helder goud
# EAC117goudbruine
# F2BB66Macaroni en kaas
# FBB917Saffraan
# FBB117Bier
# FFA62Fkantaloepa
# E9AB17Bij Geel

5. Bruine HTML-kleuren

Bruine achtergrond kan het moeilijk maken om de witte of zwarte tekst te lezen, u kunt gebruik maken van andere kleuren die goed contrasteren met uw bruine tint.

# E2A76FBruine suiker
# deb887Knoestig hout
# FFCBA4Diepe perzik
# C9BE62Gember bruin
# E8A317Schoolbus Geel
# EE9A4DSandy Brown
# C8B560Herfstblad bruin
# D4A017Oranje goud
# C2B280Zand
# C7A317Cookie Brown
# C68E17Karamel
# B5A642Messing
# ADA96EKhaki
# C19A6BKameel bruin
# CD7F32Bronzen
# C88141Tiger Orange
# C58917Kaneel
# AF9B60Kogel huls
# AF7817Donkere guldenroede
# B87333Koper
# 966F33Hout
# 806517Eiken bruin
# 827839Mocassin
# 827B60Army Brown
# 786D5FZandsteen
# 493D26Mocha
# 483C32Taupe
# 6F4E37Koffie
# 835C3BBruine beer
# 7F5217Rood vuil
# 7F462CSepia

6. Oranje HTML-kleuren

Oranje werkt geweldig om een ​​punt te benadrukken wanneer kleur wordt gebruikt als achtergrond en het kan een gevoel van enthousiasme en warmte oproepen zonder te plakkerig te zijn.6. Oranje HTML-kleuren

# C47451Oranje Zalm
# C36241Roest
# C35817Rode vos
# C85A17Chocola
# CC6600Sedona
# E56717Papaya Orange
# E66C2CHalloween-sinaasappel
# F87217Pompoen Sinaasappel
# F87431Bouwkegel Oranje
# E67451Sunrise Orange
# FF8040Mango Sinaasappel
# F88017Donker oranje
# FF7F50Koraal
# F88158Basketbal oranje
# F9966BLichte zalm
# E78A61Mandarijn
# E18B6BDonkere Zalm
# E77471Licht koraal
# F75D59Boon rood
# E55451Valentijn rood
# E55B3CSchokkend oranje

7. Rode HTML-kleurcodes

Voor sommige browsers wordt rode onderstreepte tekst gebruikt als bezochte links, u moet deze niet gebruiken om de bezoekers niet te verwarren.

# FF0000Rood
# FF2400Scharlaken
# F62217Robijn rood
# F70D1AFerrari rood
# F62817Brandweerwagen Rood
# E42217Lava rood
# E41B17Hou van rood
# DC381FGrapefruit
# C34A2CKastanje Rood
# C24641Kersenrood
# C04000Mahonie
# C11B17Chili peper
# 9F000FVeenbes
# 990012Rode wijn
# 8C001ABurgundy
# 954535kastanje
# 7E3517Bloed rood
# 8A4117Sienna
# 7E3817sangria
# 800517Firebrick
# 810541Kastanjebruin
# 7D0541Pruimentaart
# 7E354DFluweel Maroon
# 7D0552Plum Velvet
# 7F4E52Rosy Finch
# 7F5A58puce
# 7F525DSaai paars
# B38481Rosy Brown
# C5908EKaki Rose

8. Roze HTML-kleurcodes

Volgens de kleurwetenschap kunnen Pink en zijn tinten worden gebruikt als u wilt dat de bezoeker een gevoel van vertrouwen, verfijning en warmte in zijn onderbewustzijn heeft.

# C48189Roze boog
# C48793Lippenstift Roze
# E8ADAARoos
# ECC5C0Rose goud
# EDC9AFWoestijnzand
# FDD7E4Varken roze
#FCDFFFSuikerspin
#FFDFDDRoze Kauwgom
# FBBBB9Misty Rose
#FAAFBERoze
#FAAFBALichtroze
# F9A7B0Flamingo roze
# E7A1B0Roze roos
# E799A3Roze Daisy
# E38AAECadillac Pink
# F778A1Anjer roze
# E56E94Bloos rood
# F660ABFelroze
# FC6C85Watermeloen Roze
# F6358AViolet rood
# F52887Donker roze
# E45E9DRoze Cupcake
# E4287CRoze limonade
# F535AANeon roze
# FF00FFMagenta
# E3319DDimorphotheca Magenta
# F433FFBright Neon Pink
# D16587Licht violet rood
# C25A7CTulp Roze
# CA226BMedium violet rood
# C12869Rogue Pink
# C12267Verbrand roze
# C25283Verlegen roze
# C12283Donkere Anjer Roze
# B93B8FPruim

9. Paarse en witte HTML-kleurcodes

Het gebruik van witte tekstkleur tegen een witte achtergrond maakt het onleesbaar voor de gebruikers en afgezien van het niet gebruiksvriendelijk zijn, kunt u een SEO-boete krijgen voor uw site, dus gebruik altijd witte en andere lichte kleuren tegen een donkere achtergrond.

# 7E587EAltviool paars
# 571B7EPaarse Iris
# 583759Pruim Paars
# 4B0082Indigo
# 461B7EPurple Monster
# 4E387EPaarse nevel
# 614051Aubergine
# 5E5A80Druif
# 6A287EPurple Jam
# 7D1B7EDonkere Orchidee
# A74AC7Paarse bloem
# B048B5Middelgrote Orchidee
# 6C2DC7Paarse Amethist
# 842DCEDark Violet
# 8D38C9paars
# 7A5DC7Paarse Salie Bush
# 7F38ECHeerlijk paars
# 8E35EFPurper
# 893BFFAztech Purple
# 8467D7Medium paars
# A23BECJasmine Purple
# B041FFPaarse Narcis
# C45AECTyrian Purple
# 9172ECCrocus paars
# 9E7BFFPaarse Mimosa
# D462FFHeliotroop paars
# E238ECkarmozijn
# C38EC7Paarse draak
# C8A2C8Lila
# E6A9ECBloos roze
# E0B0FFMauve
# C6AEC7Wisteria paars
# F9B7FFBloesem roze
# D2B9D3Distel
# E9CFECMaagdenpalm
# EBDDE2Lavendel Pinokkio
# E3E4FALavendel blauw
# FDEEF4Parel
# FFF5EEZeeschelp
#FEFCFFMelkwit
#FFFFFFWit

Enkele meest gebruikte HTML-kleurcodes

Dit zijn enkele van de populaire kleuren die op internet worden gebruikt, ik heb ze in een aparte tabel geplaatst zodat ze snel kunnen worden gevonden.

Rood# FF0000Wit#FFFFFF
Cyan# 00FFFFZilver# C0C0C0
Blauw# 0000FFGrijs of grijs# 808080
Donkerblauw# 0000A0Zwart# 000000
Lichtblauw# ADD8E6Oranje# FFA500
Purper# 800080Bruin# A52A2A
Geel# FFFF00Kastanjebruin# 800000
Limoen# 00FF00Groen# 008000
Magenta# FF00FFOlijf# 808000

Conclusie

Nu u snelle referentietabellen met algemene HTML-kleuren hebt, moet u elke gewenste kleur op uw pagina kunnen gebruiken. Vanuit een creatief oogpunt moet u voorkomen dat u harde kleuren gebruikt als u kunt en wanneer u met de voorkant van de site werkt, is het ook belangrijk om de achtergrondafbeeldingen of kleuren te behouden om een ​​goed contrast te garanderen.

Aanbevolen artikelen

Dit is een gids voor HTML-kleurnamen. Hier bespreken we hoe kleuren op een webpagina kunnen worden geïmplementeerd met behulp van verschillende HTML-kleuren met voorbeelden. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie–

  1. HTML-lettertypen Stijlen
  2. HTML-kenmerken
  3. HTML-stijlbladen
  4. Hoe HTML werkt
  5. Kleuren in Matlab | Hoe de stijl in Matlab te veranderen?

Categorie:

Web ontwikkelingstools