Einführung in HTML-Farbnamen
Die HTML-Farbnamen werden im Absatz richtig bezeichnet. Farben sind wichtig und werden nicht nur zum Dekorieren einer Webseite verwendet. In einigen Fällen möchten Sie möglicherweise die Textfarbe ändern, um einen besseren Kontrast zum Seitenhintergrund zu erzielen. Da HTML in Textform geschrieben ist, können Sie den Code nicht einfach nach Ihren Wünschen einfärben und erwarten, dass der Webbrowser beim Rendern der Seite dieselbe Farbe verwendet. Stattdessen müssen Sie Tags und Attribute verwenden, um dem Browser mitzuteilen, welche Farbe verwendet werden soll.
Farben in HTML
In HTML-Farbnamen können Farben anhand ihres Hexadezimalwerts oder ihres Namens angegeben werden. HTML unterstützt die meisten gängigen Farben. In diesem Artikel werde ich Ihnen 140 Namen und hexadezimale Werte dieser Farben mitteilen.
Beachten Sie, dass Sie sich nicht auf diese Farben beschränken müssen. Sie können ein beliebiges Farbwahltool verwenden, um den Hexadezimalwert einer beliebigen Farbe zu ermitteln und auf Ihrer Webseite zu verwenden.
HTML-Farbnamen verwenden
Das Implementieren von Farben auf Ihrer Webseite ist einfach und kann sowohl inline als auch über ein separates CSS-Stylesheet erfolgen.
Wenn Sie auf einer Seite mehrere Male dieselben HTML-Farbnamen verwenden, ist es besser, die Farben mithilfe des CSS-Blatts zu definieren und festzulegen. Wenn Sie dagegen nur ein- oder zweimal Farbe verwenden müssen, wird die Inline-Methode als besser angesehen.
1. HTML Color Inline verwenden
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. Implementierung in CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Unterschiedliche HTML-Farbnamen
Nachdem Sie nun wissen, was HTML-Farbnamen sind und wie Sie sie auf Ihren Seiten verwenden können, finden Sie hier einen Link mit Farbnamen, die Sie als Lesezeichen speichern und in Ihren Projekten verwenden können:
1. Graue und schwarze HTML-Farbnamen
Graue und schwarze Farben sind in den meisten Fällen perfekt für die Textfarbe der Seite, da diese Farben vor einem weißen Hintergrund die beste Lesbarkeit aufweisen. Eine interessante Sache, die Sie beachten sollten, ist, dass moderne Telefone mit OLED-Displays keine Batterie benötigen, um die Farbe Schwarz anzuzeigen. Wenn Ihr Publikum mobil ist, ist es eine gute Idee, Schwarz als Hintergrundfarbe und Weiß oder anderes Licht zu verwenden Farben als Vordergrundfarbe.
Code | Farbe |
# 000000 | Schwarz |
# 0C090A | Nacht |
# 2C3539 | Rotguss |
# 2B1B17 | Mitternacht |
# 34282C | Holzkohle |
# 25383C | Dunkles Schiefergrau |
# 3B3131 | Öl |
# 413839 | Schwarze Katze |
# 3D3C3A | Iridium |
# 463E3F | Schwarzer Aal |
# 4C4646 | Schwarze Kuh |
# 504A4B | Grauer Wolf |
# 565051 | Vampirgrau |
# 5C5858 | Grauer Delphin |
# 625D5D | Carbon Grey |
# 666362 | Aschgrau |
# 6D6968 | Bewölktes Grau |
# 726E6D | Rauchgrau |
# 736F6E | Grau |
# 837E7C | Granit |
# 848482 | Schlachtschiff Grau |
# B6B6B4 | Graue Wolke |
# D1D0CE | graue Gans |
# Rotter4E2 | Platin |
# BCC6CC | Silbermetallic |
# 98AFC7 | Blau grau |
# 6D7B8D | Hellschiefergrau |
# 657383 | Schiefer grau |
# 616D7E | Jet Grey |
2. Blaue HTML-Farbnamen
Blau unterstrichener Text wird als Link angesehen, da dies der Standard-Link-Stil für die meisten Webbrowser ist. Sie sollten vermeiden, für den gesamten Text auf einer Seite Blau zu verwenden, da Besucher ihn für Hyperlinks halten können.
# 646D7E | Mist Blue |
# 566D7E | Marmorblau |
# 737CA1 | Schieferblau |
# 4863A0 | Stahlblau |
# 2B547E | Blue Jay |
# 2B3856 | Dunkles Schieferblau |
# 151B54 | Mitternachtsblau |
# 000080 | Navy blau |
# 342D7E | Blauwal |
# 15317E | Lapisblau |
# 151B8D | Denim Dunkelblau |
# 0000A0 | Erdblau |
# 0020C2 | Kobaltblau |
# 0041C2 | Blaubeerblau |
# 2554C7 | Saphirblau |
# 1569C7 | Blaue Augen |
# 2B60DE | Königsblau |
# 1F45FC | Blaue orchidee |
# 6960EC | Blauer Lotus |
# 736AFF | Helles Schieferblau |
# 357EC7 | Windows Blue |
# 368BC1 | Gletscherblaues Eis |
# 488AC7 | Seidenblau |
# 3090C7 | Blauer Efeu |
# 659EC7 | Blauer Koi |
# 87AFC7 | Columbia Blue |
# 95B9C7 | Baby blau |
# 728FCE | Helles Stahlblau |
# 2B65EC | Meerblau |
# 306EFF | Blaues Band |
# 157DEC | Blaues Kleid |
# 1589FF | Dodger Blue |
# 6495ED | Kornblumenblau |
# 6698FF | Himmelblau |
# 38ACEC | Schmetterlings-Blau |
# 56A5EC | Eisberg |
# 5CB3FF | Kristallblau |
# 3BB9FF | Deep Sky Blue |
# 79BAEC | Denim Blue |
# 82CAFA | Helles Himmelblau |
# 82CAFF | Tageshimmelblau |
# A0CFEC | Jeans blau |
# B7CEEC | Blauer Engel |
# B4CFEC | Pastellblau |
# C2DFFF | Meeresblau |
# C6DEFF | Pulverblau |
#AFDCEC | Korallenblau |
#ADDFFF | Hellblau |
#BDEDFF | Robin Egg Blue |
#CFECEC | Hellblaue Lilie |
# E0FFFF | Helles Cyan |
# EBF4FA | Wasser |
# F0F8FF | Alice blau |
# F0FFFF | Azurblau |
#CCFFFF | Leichter Schiefer |
# 93FFE8 | Leichter Aquamarin |
# 9AFEFF | Elektrisches Blau |
# 7FFFD4 | Aquamarin |
# 00FFFF | Cyan oder Aqua |
# 7DFDFE | Tron Blue |
# 57FEFF | Blauer Zirkon |
# 8EEBEC | Blaue Lagune |
# 50EBEC | Celeste |
# 4EE2EC | Blauer Diamant |
# 81D8D0 | Tiffany-Blau |
# 92C7C7 | Cyan Opak |
# 77BFC7 | Blaue Hosta |
# 78C7C7 | Nordlichter blau |
# 48CCCD | Mittlerer Türkis |
# 43C6DB | Türkis |
# 46C7C7 | Qualle |
# 7BCCB5 | Blau Grün |
3. Grüne HTML-Farben
Auf Standorten, die mit Natur, Geld, Umwelt usw. zu tun haben, kann Grün eine gute Wahl für die Hintergrundfarbe sein.
# 43BFC7 | Ara blau grün |
# 3EA99F | Helles Meergrün |
# 3B9C9C | Dunkler Türkis |
# 438D80 | Meeresschildkröte-Grün |
# 348781 | Mittlerer Aquamarin |
# 307D7E | Grünliches Blau |
# 5E7D7E | Grautürkis |
# 4C787E | Käfer grün |
# 008080 | Blaugrün |
# 4E8975 | Meeresgrün |
# 78866B | Tarnung-Grün |
# 848b79 | Salbeigrün |
# 617C58 | Hazel Green |
# 728C00 | Giftgrün |
# 667C26 | Farn-Grün |
# 254117 | Dunkles Waldgrün |
# 306754 | Mittleres Meergrün |
# 347235 | Mittleres Waldgrün |
# 437C17 | Algengrün |
# 387C44 | Kieferngrün |
# 347C2C | Dschungel-Grün |
# 347C17 | Kleeblattgrün |
# 348017 | Mittleres Frühlingsgrün |
# 4E9258 | Waldgrün |
# 6AA121 | Grüne Zwiebel |
# 4AA02C | Frühlingsgrün |
# 41A317 | Lindgrün |
# 3EA055 | Klee-Grün |
# 6CBB3C | Grüne Schlange |
# 6CC417 | Ausländisches Grün |
# 4CC417 | Grüner Apfel |
# 52D017 | Gelbgrün |
# 4CC552 | Kelly Green |
# 54C571 | Zombie-Grün |
# 99C68E | Frosch grün |
# 89C35C | Grüne Erbsen |
# 85BB65 | Dollarschein Grün |
# 8BB381 | Dunkles Meergrün |
# 9CB071 | Leguan-Grün |
# B2C248 | Avocado-Grün |
# 9DC209 | Pistaziengrün |
# A1C935 | Salatgrün |
# 7FE817 | Kolibri-Grün |
# 59E817 | Nebelgrün |
# 57E964 | Ampel geht grün |
# 64E986 | Algengrün |
# 5EFB6E | Jadegrün |
# 00FF00 | Grün |
# 5FFB17 | Smaragdgrün |
# 87F717 | Rasengrün |
# 8AFB17 | Chartreuse |
# 6AFB92 | Drachengrün |
# 98FF98 | minzgrün |
# B5EAAA | Grüner Daumen |
# C3FDB8 | Leichte Jade |
# CCFB5D | Tee grün |
# B1FB17 | Grün Gelb |
# BCE954 | Schleimgrün |
# EDDA74 | Goldrute |
# EDE275 | Ernte Gold |
# FFE87C | Sonnengelb |
4. Gelbe HTML-Farbnamen
Gelb kann verwendet werden, um eine nicht ernsthafte Stimmung einzustellen, Kreativität und Optimismus auf einer Seite zu zeigen. Denken Sie daran, dass Gelb als Hintergrund besser geeignet ist als eine Textfarbe.
# FFFF00 | Gelb |
# FFF380 | Maisgelb |
# FFFFC2 | Pergament |
#FFFFCC | Sahne |
# FFF8C6 | Zitronen-Chiffon |
# FFF8DC | Cornsilk |
# F5F5DC | Beige |
# FBF6D9 | Blond |
# FAEBD7 | Altweiß |
# F7E7CE | Champagner |
#FFEBCD | Blanchierte Mandel |
# F3E5AB | Vanille |
# ECE5B6 | Tan Brown |
# FFE5B4 | Pfirsich |
# FFDB58 | Senf |
# FFD801 | Gummi Ducky Gelb |
# FDD017 | Helles Gold |
# EAC117 | goldbraun |
# F2BB66 | Makaroni und Käse |
# FBB917 | Safran |
# FBB117 | Bier |
# FFA62F | Cantaloup-Melone |
# E9AB17 | Bienengelb |
5. Braune HTML-Farben
Ein brauner Hintergrund kann das Lesen von weißem oder schwarzem Text erschweren. Sie können auch andere Farben verwenden, die einen guten Kontrast zu Ihrem Braunton aufweisen.
# E2A76F | Brauner Zucker |
# DEB887 | Kräftiges Holz |
# FFCBA4 | Tiefer Pfirsich |
# C9BE62 | Ingwer Braun |
# E8A317 | Schulbus Gelb |
# EE9A4D | Sandy Brown |
# C8B560 | Herbstblatt Braun |
# D4A017 | Orange Gold |
# C2B280 | Sand |
# C7A317 | Plätzchen Brown |
# C68E17 | Karamell |
# B5A642 | Messing |
# ADA96E | Khaki |
# C19A6B | Kamelbraun |
# CD7F32 | Bronze |
# C88141 | Tiger Orange |
# C58917 | Zimt |
# AF9B60 | Bullet Shell |
# AF7817 | Dunkle Goldrute |
# B87333 | Kupfer |
# 966F33 | Holz |
# 806517 | Eiche Braun |
# 827839 | Mokassin |
# 827B60 | Army Brown |
# 786D5F | Sandstein |
# 493D26 | Mokka |
# 483C32 | Taupe |
# 6F4E37 | Kaffee |
# 835C3B | Braunbär |
# 7F5217 | Roter Schmutz |
# 7F462C | Sepia |
6. Orange HTML-Farben
Orange eignet sich hervorragend, um einen Punkt hervorzuheben, an dem die Farbe als Hintergrund verwendet wird, und kann ein Gefühl der Begeisterung und Wärme hervorrufen, ohne zu klebrig zu sein.6. Orange HTML-Farben
# C47451 | Orangenlachs |
# C36241 | Rost |
# C35817 | Roter Fuchs |
# C85A17 | Schokolade |
# CC6600 | Sedona |
# E56717 | Papaya Orange |
# E66C2C | Halloween-Orange |
# F87217 | Kürbis-Orange |
# F87431 | Baukegel Orange |
# E67451 | Sonnenaufgang Orange |
# FF8040 | Mango Orange |
# F88017 | Dunkelorange |
# FF7F50 | Koralle |
# F88158 | Korbkugel Orange |
# F9966B | Leichter Lachs |
# E78A61 | Mandarine |
# E18B6B | Dunkler Lachs |
# E77471 | Leichte Koralle |
# F75D59 | Bohnenrot |
# E55451 | Valentine Red |
# E55B3C | Schockierende Orange |
7. Rote HTML-Farbcodes
Bei einigen Browsern wird rot unterstrichener Text als besuchte Links verwendet. Sie sollten ihn nicht verwenden, um die Besucher nicht zu verwirren.
# FF0000 | rot |
# FF2400 | Scharlachrot |
# F62217 | Rubinrot |
# F70D1A | Ferrari Red |
# F62817 | Feuerwehrauto Rot |
# E42217 | Lava Red |
# E41B17 | Liebe rot |
# DC381F | Grapefruit |
# C34A2C | Kastanienrot |
# C24641 | Kirschrot |
# C04000 | Mahagoni |
# C11B17 | Chili-Pfeffer |
# 9F000F | Cranberry |
# 990012 | Rotwein |
# 8C001A | Burgund |
# 954535 | Kastanie |
# 7E3517 | Blutrot |
# 8A4117 | Sienna |
# 7E3817 | Sangria |
# 800517 | Schamottestein |
# 810541 | Kastanienbraun |
# 7D0541 | Plum Pie |
# 7E354D | Velvet Maroon |
# 7D0552 | Pflaumensamt |
# 7F4E52 | Rosiger Fink |
# 7F5A58 | Puce |
# 7F525D | Mattes Lila |
# B38481 | Rosy Brown |
# C5908E | Khaki Rose |
8. Rosa HTML-Farbcodes
Laut Farbwissenschaft können Pink und seine Farbtöne verwendet werden, wenn der Besucher ein Gefühl des Vertrauens, der Raffinesse und der Wärme in seinem Unterbewusstsein haben möchte.
# C48189 | Pinker Bogen |
# C48793 | Lippenstift Pink |
# E8ADAA | Rose |
# ECC5C0 | Rose Gold |
# EDC9AF | Wüstensand |
# FDD7E4 | Schwein rosa |
#FCDFFF | Zuckerwatte |
#FFDFDD | Rosa Kaugummi |
# FBBBB9 | Misty Rose |
#FAAFBE | Rosa |
#FAAFBA | Hell-Pink |
# F9A7B0 | Flamingo Pink |
# E7A1B0 | Pinke Rose |
# E799A3 | Rosa Gänseblümchen |
# E38AAE | Cadillac Pink |
# F778A1 | Nelkenrosa |
# E56E94 | Erröten Sie rot |
# F660AB | Pink |
# FC6C85 | Wassermelonen-Rosa |
# F6358A | Violettes Rot |
# F52887 | Dunkelrosa |
# E45E9D | Rosafarbener kleiner Kuchen |
# E4287C | Pinke Limonade |
# F535AA | Neon Pink |
# FF00FF | Magenta |
# E3319D | Dimorphotheca Magenta |
# F433FF | Helles Neonrosa |
# D16587 | Hellviolettes Rot |
# C25A7C | Tulpe Rosa |
# CA226B | Mittelviolettes Rot |
# C12869 | Rogue Pink |
# C12267 | Gebranntes Rosa |
# C25283 | Schüchternes Rosa |
# C12283 | Dunkles Gartennelken-Rosa |
# B93B8F | Pflaume |
9. Lila und weiße HTML-Farbcodes
Die Verwendung von weißer Textfarbe vor weißem Hintergrund macht es für die Benutzer unlesbar. Abgesehen davon, dass es nicht benutzerfreundlich ist, können Sie eine SEO-Strafe für Ihre Website erhalten. Verwenden Sie daher immer Weiß und andere helle Farben vor dunklem Hintergrund.
# 7E587E | Viola Lila |
# 571B7E | Lila Iris |
# 583759 | Pflaumen-Purpur |
# 4B0082 | Indigo |
# 461B7E | Lila Monster |
# 4E387E | Lila Nebel |
# 614051 | Aubergine |
# 5E5A80 | Traube |
# 6A287E | Lila Marmelade |
# 7D1B7E | Dunkle Orchidee |
# A74AC7 | Lila Blume |
# B048B5 | Mittlere Orchidee |
# 6C2DC7 | Lila Amethyst |
# 842DCE | Dunkelviolett |
# 8D38C9 | Violett |
# 7A5DC7 | Lila Salbei Bush |
# 7F38EC | Schönes Lila |
# 8E35EF | Lila |
# 893BFF | Aztech Lila |
# 8467D7 | Mittellila |
# A23BEC | Jasmine Purple |
# B041FF | Lila Narzisse |
# C45AEC | Tyrian Purple |
# 9172EC | Krokus Lila |
# 9E7BFF | Lila Mimose |
# D462FF | Heliotrop Lila |
# E238EC | Hochrot |
# C38EC7 | Lila Drache |
# C8A2C8 | Lila |
# E6A9EC | Erröten Rosa |
# E0B0FF | Mauve |
# C6AEC7 | Glyzinien Lila |
# F9B7FF | Blüten-Rosa |
# D2B9D3 | Distel |
# E9CFEC | Immergrün |
# EBDDE2 | Lavendel Pinocchio |
# E3E4FA | Lavendelblau |
# FDEEF4 | Perle |
# FFF5EE | Muschel |
#FEFCFF | Milchweiß |
#FFFFFF | Weiß |
Einige der am häufigsten verwendeten HTML-Farbcodes
Dies sind einige der populären Farben, die im Web verwendet werden. Ich habe sie in eine separate Tabelle gestellt, damit sie schnell gefunden werden können.
rot | # FF0000 | Weiß | #FFFFFF |
Cyan | # 00FFFF | Silber | # C0C0C0 |
Blau | # 0000FF | Grau oder Grau | # 808080 |
Dunkelblau | # 0000A0 | Schwarz | # 000000 |
Hellblau | # ADD8E6 | Orange | # FFA500 |
Lila | # 800080 | Braun | # A52A2A |
Gelb | # FFFF00 | Kastanienbraun | # 800000 |
Limette | # 00FF00 | Grün | # 008000 |
Magenta | # FF00FF | Olive | # 808000 |
Fazit
Nachdem Sie über Kurzreferenztabellen gängiger HTML-Farben verfügen, sollten Sie in der Lage sein, jede gewünschte Farbe auf Ihrer Seite zu verwenden. Unter kreativen Gesichtspunkten sollten Sie möglichst keine scharfen Farben verwenden, und wenn Sie mit dem Front-End der Site arbeiten, ist es auch wichtig, die Hintergrundgrafiken oder -farben beizubehalten, um den richtigen Kontrast zu gewährleisten.
Empfohlene Artikel
Dies ist eine Anleitung zu HTML-Farbnamen. Hier diskutieren wir anhand von Beispielen, wie Farben auf einer Webseite mit verschiedenen HTML-Farben implementiert werden. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren.
- HTML-Schriftarten
- HTML-Attribute
- HTML-Stylesheets
- Wie funktioniert HTML?
- Farben in Matlab | Wie ändere ich den Stil in Matlab?