X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Farben

Die beste Möglichkeit, die Farbe Ihres Textes zu ändern, ist die Verwendung von CSS. Es gibt drei Möglichkeiten, wie Sie das machen können: mit Hex-Farbcodes, HTML-Farbnamen oder RGB-Werten.

Hex-Farbcodes

CSS-Farben werden mit einer hexadezimalen (hex) Notation für die Kombination von roten, grünen und blauen Farbwerten (RGB) definiert. Der niedrigste Wert, der einer der Lichtquellen gegeben werden kann, ist 0 (hex 00). Der höchste Wert ist 255 (hex FF).

Die Hex-Werte werden als 6-stellige Zahlen geschrieben und fangen mit dem Zeichen # an. In einer Hexadezimalziffer verwendeten Buchstaben können Groß- oder Kleinbuchstaben sein. Um zum Beispiel eine weiße Farbe anzugeben, können Sie #FFFFFF oder #ffffff schreiben.

Um dem Textelement eine Farbe hinzuzufügen, verwenden Sie das Attribut style oder entsprechende CSS-Eigenschaft, wo die Farbeigenschaft Ihr Hex-Code ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
        background-color: #1c87c9;
        color: #d5dce8;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Das ist ein Text in grau, und der Hintergrund ist blau.</p>
    </div>
    <p style="color:#8ebf42;">Dieser Text ist grün</p>
  </body>
</html>

Ergebnis

In der Tabelle unten sehen Sie die Hex-Werte der Web-Farben. Sie können auch unser Tool Farbwähler verwenden, um Millionen von Farben mit Hex-Farbcodes durchzusuchen.

HTML-Farbnamen

Um das Textelement mit einem HTML-Farbnamen einzufärben, geben Sie den Namen der Farbe (z. B. blau) anstelle des Hex-Codes aus dem vorigen Schritt ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>    
      div {
        background-color: blue;
        color: #d5dce8;
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Das ist ein Text in grau und der Hintergrund ist blau</p>
    </div>
    <p style="color:blue;"> Das ist ein Text in blau</p>
  </body>
</html>

Ergebnis

RGB-Farbwerte

Um dem Textelement eine Farbe hinzuzufügen, sollen Sie das Attribut style verwenden, wobei die Farbeigenschaft Ihr RGB-Wert oder entsprechende CSS-Eigenschaft ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
        background-color:rgb(25,25,112);
        color: rgb(169,169,169);
        padding: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Das ist ein Text in grau, und der Hintergrund ist blau</p>
    </div>
    <p style="color:rgb(25,25,112);"> Das ist ein Text in blau</p>
  </body>
</html>

Ergebnis

Hier finden Sie 216 Cross-Browser-Farbpalette, die für die Erstellung von Seiten von Websites verwendet wird.

Farbe HEX Farbe Farbe RGB
#000000 rgb(0,0,0)
#FFFFFF rgb(255,255,255)
#FF0000 rgb(255,0,0)
#00FFFF rgb(0,255,255)
#0000FF rgb(0,0,255)
#C0C0C0 rgb(192,192,192)
#FF00FF rgb(255,0,255)

Color HEX Color Color RGB
#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)

Farbe HEX Farbe Farbe RGB
#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)

Unten sind 216 Cross-Browser-Farbpaletten dargestellt, die zur Erstellung von Seiten von Websites verwendet werden.

Web-Farben
#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 v99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 v99FF99 #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



Finden Sie das nützlich?

Ähnliche Artikel