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
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.
| Code | Kleur |
| # 000000 | Zwart |
| # 0C090A | Nacht |
| # 2C3539 | Gunmetal |
| # 2B1B17 | Middernacht |
| # 34282C | Houtskool |
| # 25383C | Donker leigrijs |
| # 3B3131 | Olie |
| # 413839 | Zwarte kat |
| # 3D3C3A | iridium |
| # 463E3F | Zwarte paling |
| # 4C4646 | Zwarte koe |
| # 504A4B | Grijze wolf |
| # 565051 | Vampire Gray |
| # 5C5858 | Grijze dolfijn |
| # 625D5D | Carbon grijs |
| # 666362 | Asgrijs |
| # 6D6968 | Bewolkt grijs |
| # 726E6D | Smokey Gray |
| # 736F6E | Grijs |
| # 837E7C | Graniet |
| # 848482 | Slagschip grijs |
| # B6B6B4 | Grijze wolk |
| # D1D0CE | grijze gans |
| # E5E4E2 | Platina |
| # BCC6CC | Metallisch zilver |
| # 98AFC7 | Blauw grijs |
| # 6D7B8D | Licht leigrijs |
| # 657383 | Leisteengrijs |
| # 616D7E | Jet 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.
| # 646D7E | Mist blauw |
| # 566D7E | Marmer blauw |
| # 737CA1 | Slate Blue |
| # 4863A0 | Staal blauw |
| # 2B547E | Blauwe Gaai |
| # 2B3856 | Donker leisteenblauw |
| # 151B54 | Middernacht blauw |
| # 000080 | Marineblauw |
| # 342D7E | Blauwe vinvis |
| # 15317E | Lapis Blue |
| # 151B8D | Denim donkerblauw |
| # 0000A0 | Earth Blue |
| # 0020C2 | Kobalt blauw |
| # 0041C2 | Blueberry Blue |
| # 2554C7 | Saffierblauw |
| # 1569C7 | Blauwe ogen |
| # 2B60DE | Koningsblauw |
| # 1F45FC | Blauwe Orchidee |
| # 6960EC | Blauwe lotus |
| # 736AFF | Licht leisteen blauw |
| # 357EC7 | Windows Blauw |
| # 368BC1 | IJzig Blauw Ijs |
| # 488AC7 | Zijden blauw |
| # 3090C7 | Blue Ivy |
| # 659EC7 | Blauwe Koi |
| # 87AFC7 | Columbia Blue |
| # 95B9C7 | Babyblauw |
| # 728FCE | Licht staalblauw |
| # 2B65EC | Oceaanblauw |
| # 306EFF | Blauw lintje |
| # 157DEC | Blauwe jurk |
| # 1589FF | Dodger Blue |
| # 6495ED | Korenblauw |
| # 6698FF | Hemelsblauw |
| # 38ACEC | Vlinder blauw |
| # 56A5EC | Ijsberg |
| # 5CB3FF | Kristal blauw |
| # 3BB9FF | Diep hemelsblauw |
| # 79BAEC | Spijkerbroekblauw |
| # 82CAFA | Licht hemelsblauw |
| # 82CAFF | Dag hemelsblauw |
| # A0CFEC | Jeans blauw |
| # B7CEEC | Blauwe Engel |
| # B4CFEC | Pastel Blauw |
| # C2DFFF | Zee blauw |
| # C6DEFF | Poederblauw |
| #AFDCEC | Coral Blue |
| #ADDFFF | Lichtblauw |
| #BDEDFF | Robin Egg Blue |
| #CFECEC | Lichtblauwe lelie |
| # E0FFFF | Lichtcyaan |
| # EBF4FA | Water |
| # F0F8FF | AliceBlue |
| # F0FFFF | azuur |
| #CCFFFF | Lichte leisteen |
| # 93FFE8 | Licht Aquamarijn |
| # 9AFEFF | Elektrisch blauw |
| # 7FFFD4 | Aquamarijn |
| # 00FFFF | Cyaan of Aqua |
| # 7DFDFE | Tron Blue |
| # 57FEFF | Blauwe Zirkoon |
| # 8EEBEC | Blue Lagoon |
| # 50EBEC | Celeste |
| # 4EE2EC | Blauwe diamant |
| # 81D8D0 | Tiffany Blue |
| # 92C7C7 | Cyaan Opaque |
| # 77BFC7 | Blauwe Hosta |
| # 78C7C7 | Noorderlicht blauw |
| # 48CCCD | Middel Turquoise |
| # 43C6DB | Turkoois |
| # 46C7C7 | kwal |
| # 7BCCB5 | Blauw 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.
| # 43BFC7 | Ara Blauwgroen |
| # 3EA99F | Licht zeegroen |
| # 3B9C9C | Donker turkoois |
| # 438D80 | Groene zeeschildpad |
| # 348781 | Medium Aquamarijn |
| # 307D7E | Groenachtig blauw |
| # 5E7D7E | Grijsachtig turkoois |
| # 4C787E | Kever Groen |
| # 008080 | taling |
| # 4E8975 | Zee groen |
| # 78866B | Camouflage groen |
| # 848b79 | Salie groen |
| # 617C58 | Hazel Green |
| # 728C00 | Vergif groen |
| # 667C26 | Fern Green |
| # 254117 | Donker bosgroen |
| # 306754 | Medium zeegroen |
| # 347235 | Medium bosgroen |
| # 437C17 | Groen zeewier |
| # 387C44 | Pine Green |
| # 347C2C | Jungle groen |
| # 347C17 | Shamrock Green |
| # 348017 | Medium lente groen |
| # 4E9258 | Bos Groen |
| # 6AA121 | Groene ui |
| # 4AA02C | Lente groen |
| # 41A317 | Limoen groen |
| # 3EA055 | Klaver groen |
| # 6CBB3C | Groene Slang |
| # 6CC417 | Alien Green |
| # 4CC417 | Groene appel |
| # 52D017 | Geel groen |
| # 4CC552 | Kelly groen |
| # 54C571 | Zombie Green |
| # 99C68E | Kikker groen |
| # 89C35C | Doperwten |
| # 85BB65 | Dollar Bill Green |
| # 8BB381 | Donker zeegroen |
| # 9CB071 | Leguaan groen |
| # B2C248 | Avocado groen |
| # 9DC209 | Pistache groen |
| # A1C935 | Salade groen |
| # 7FE817 | Kolibrie groen |
| # 59E817 | Nebula Green |
| # 57E964 | Stoplicht Go Green |
| # 64E986 | Algen groen |
| # 5EFB6E | Jade groen |
| # 00FF00 | Groen |
| # 5FFB17 | Smaragdgroen |
| # 87F717 | Gazon groen |
| # 8AFB17 | Chartreuse |
| # 6AFB92 | Dragon Green |
| # 98FF98 | muntgroen |
| # B5EAAA | Groene Duim |
| # C3FDB8 | Lichte Jade |
| # CCFB5D | Thee groen |
| # B1FB17 | Groen Geel |
| # BCE954 | Slijm groen |
| # EDDA74 | Goldenrod |
| # EDE275 | Oogst goud |
| # FFE87C | Zonnegeel |
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.
| # FFFF00 | Geel |
| # FFF380 | Maïs Geel |
| # FFFFC2 | Perkament |
| #FFFFCC | Room |
| # FFF8C6 | Citroen Chiffon |
| # FFF8DC | Cornsilk |
| # F5F5DC | Beige |
| # FBF6D9 | blond |
| # FAEBD7 | Antiek wit |
| # F7E7CE | Champagne |
| #FFEBCD | BlanchedAlmond |
| # F3E5AB | Vanille |
| # ECE5B6 | Tan bruin |
| # FFE5B4 | Perzik |
| # FFDB58 | Mosterd |
| # FFD801 | Rubber Ducky Geel |
| # FDD017 | Helder goud |
| # EAC117 | goudbruine |
| # F2BB66 | Macaroni en kaas |
| # FBB917 | Saffraan |
| # FBB117 | Bier |
| # FFA62F | kantaloepa |
| # E9AB17 | Bij 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.
| # E2A76F | Bruine suiker |
| # deb887 | Knoestig hout |
| # FFCBA4 | Diepe perzik |
| # C9BE62 | Gember bruin |
| # E8A317 | Schoolbus Geel |
| # EE9A4D | Sandy Brown |
| # C8B560 | Herfstblad bruin |
| # D4A017 | Oranje goud |
| # C2B280 | Zand |
| # C7A317 | Cookie Brown |
| # C68E17 | Karamel |
| # B5A642 | Messing |
| # ADA96E | Khaki |
| # C19A6B | Kameel bruin |
| # CD7F32 | Bronzen |
| # C88141 | Tiger Orange |
| # C58917 | Kaneel |
| # AF9B60 | Kogel huls |
| # AF7817 | Donkere guldenroede |
| # B87333 | Koper |
| # 966F33 | Hout |
| # 806517 | Eiken bruin |
| # 827839 | Mocassin |
| # 827B60 | Army Brown |
| # 786D5F | Zandsteen |
| # 493D26 | Mocha |
| # 483C32 | Taupe |
| # 6F4E37 | Koffie |
| # 835C3B | Bruine beer |
| # 7F5217 | Rood vuil |
| # 7F462C | Sepia |
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
| # C47451 | Oranje Zalm |
| # C36241 | Roest |
| # C35817 | Rode vos |
| # C85A17 | Chocola |
| # CC6600 | Sedona |
| # E56717 | Papaya Orange |
| # E66C2C | Halloween-sinaasappel |
| # F87217 | Pompoen Sinaasappel |
| # F87431 | Bouwkegel Oranje |
| # E67451 | Sunrise Orange |
| # FF8040 | Mango Sinaasappel |
| # F88017 | Donker oranje |
| # FF7F50 | Koraal |
| # F88158 | Basketbal oranje |
| # F9966B | Lichte zalm |
| # E78A61 | Mandarijn |
| # E18B6B | Donkere Zalm |
| # E77471 | Licht koraal |
| # F75D59 | Boon rood |
| # E55451 | Valentijn rood |
| # E55B3C | Schokkend 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.
| # FF0000 | Rood |
| # FF2400 | Scharlaken |
| # F62217 | Robijn rood |
| # F70D1A | Ferrari rood |
| # F62817 | Brandweerwagen Rood |
| # E42217 | Lava rood |
| # E41B17 | Hou van rood |
| # DC381F | Grapefruit |
| # C34A2C | Kastanje Rood |
| # C24641 | Kersenrood |
| # C04000 | Mahonie |
| # C11B17 | Chili peper |
| # 9F000F | Veenbes |
| # 990012 | Rode wijn |
| # 8C001A | Burgundy |
| # 954535 | kastanje |
| # 7E3517 | Bloed rood |
| # 8A4117 | Sienna |
| # 7E3817 | sangria |
| # 800517 | Firebrick |
| # 810541 | Kastanjebruin |
| # 7D0541 | Pruimentaart |
| # 7E354D | Fluweel Maroon |
| # 7D0552 | Plum Velvet |
| # 7F4E52 | Rosy Finch |
| # 7F5A58 | puce |
| # 7F525D | Saai paars |
| # B38481 | Rosy Brown |
| # C5908E | Kaki 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.
| # C48189 | Roze boog |
| # C48793 | Lippenstift Roze |
| # E8ADAA | Roos |
| # ECC5C0 | Rose goud |
| # EDC9AF | Woestijnzand |
| # FDD7E4 | Varken roze |
| #FCDFFF | Suikerspin |
| #FFDFDD | Roze Kauwgom |
| # FBBBB9 | Misty Rose |
| #FAAFBE | Roze |
| #FAAFBA | Lichtroze |
| # F9A7B0 | Flamingo roze |
| # E7A1B0 | Roze roos |
| # E799A3 | Roze Daisy |
| # E38AAE | Cadillac Pink |
| # F778A1 | Anjer roze |
| # E56E94 | Bloos rood |
| # F660AB | Felroze |
| # FC6C85 | Watermeloen Roze |
| # F6358A | Violet rood |
| # F52887 | Donker roze |
| # E45E9D | Roze Cupcake |
| # E4287C | Roze limonade |
| # F535AA | Neon roze |
| # FF00FF | Magenta |
| # E3319D | Dimorphotheca Magenta |
| # F433FF | Bright Neon Pink |
| # D16587 | Licht violet rood |
| # C25A7C | Tulp Roze |
| # CA226B | Medium violet rood |
| # C12869 | Rogue Pink |
| # C12267 | Verbrand roze |
| # C25283 | Verlegen roze |
| # C12283 | Donkere Anjer Roze |
| # B93B8F | Pruim |
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.
| # 7E587E | Altviool paars |
| # 571B7E | Paarse Iris |
| # 583759 | Pruim Paars |
| # 4B0082 | Indigo |
| # 461B7E | Purple Monster |
| # 4E387E | Paarse nevel |
| # 614051 | Aubergine |
| # 5E5A80 | Druif |
| # 6A287E | Purple Jam |
| # 7D1B7E | Donkere Orchidee |
| # A74AC7 | Paarse bloem |
| # B048B5 | Middelgrote Orchidee |
| # 6C2DC7 | Paarse Amethist |
| # 842DCE | Dark Violet |
| # 8D38C9 | paars |
| # 7A5DC7 | Paarse Salie Bush |
| # 7F38EC | Heerlijk paars |
| # 8E35EF | Purper |
| # 893BFF | Aztech Purple |
| # 8467D7 | Medium paars |
| # A23BEC | Jasmine Purple |
| # B041FF | Paarse Narcis |
| # C45AEC | Tyrian Purple |
| # 9172EC | Crocus paars |
| # 9E7BFF | Paarse Mimosa |
| # D462FF | Heliotroop paars |
| # E238EC | karmozijn |
| # C38EC7 | Paarse draak |
| # C8A2C8 | Lila |
| # E6A9EC | Bloos roze |
| # E0B0FF | Mauve |
| # C6AEC7 | Wisteria paars |
| # F9B7FF | Bloesem roze |
| # D2B9D3 | Distel |
| # E9CFEC | Maagdenpalm |
| # EBDDE2 | Lavendel Pinokkio |
| # E3E4FA | Lavendel blauw |
| # FDEEF4 | Parel |
| # FFF5EE | Zeeschelp |
| #FEFCFF | Melkwit |
| #FFFFFF | Wit |
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 | # FF0000 | Wit | #FFFFFF |
| Cyan | # 00FFFF | Zilver | # C0C0C0 |
| Blauw | # 0000FF | Grijs of grijs | # 808080 |
| Donkerblauw | # 0000A0 | Zwart | # 000000 |
| Lichtblauw | # ADD8E6 | Oranje | # FFA500 |
| Purper | # 800080 | Bruin | # A52A2A |
| Geel | # FFFF00 | Kastanjebruin | # 800000 |
| Limoen | # 00FF00 | Groen | # 008000 |
| Magenta | # FF00FF | Olijf | # 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–
- HTML-lettertypen Stijlen
- HTML-kenmerken
- HTML-stijlbladen
- Hoe HTML werkt
- Kleuren in Matlab | Hoe de stijl in Matlab te veranderen?