Zum Inhalt springen

HTML- und CSS-Farbnamen

Alle benannten Farben, die jeder Browser versteht, etwa tomato oder rebeccapurple, mit HEX-, RGB-, HSL- und OKLCH-Code zum Kopieren.

Kopieren als

Die 148 benannten Farben in CSS und HTML

Sie funktionieren in jedem Browser, indem du ihren Namen schreibst, zum Beispiel color: tomato;. Groß- und Kleinschreibung spielt keine Rolle.

Rote10

Details anzeigen

  • IndianRed

    #CD5C5C

  • LightCoral

    #F08080

  • Salmon

    #FA8072

  • DarkSalmon

    #E9967A

  • LightSalmon

    #FFA07A

  • Crimson

    #DC143C

  • Red

    #FF0000

  • FireBrick

    #B22222

  • DarkRed

    #8B0000

  • Maroon

    #800000

Orange5

Details anzeigen

  • Coral

    #FF7F50

  • Tomato

    #FF6347

  • OrangeRed

    #FF4500

  • DarkOrange

    #FF8C00

  • Orange

    #FFA500

Gelbe11

Details anzeigen

  • Gold

    #FFD700

  • Yellow

    #FFFF00

  • LightYellow

    #FFFFE0

  • LemonChiffon

    #FFFACD

  • LightGoldenrodYellow

    #FAFAD2

  • PapayaWhip

    #FFEFD5

  • Moccasin

    #FFE4B5

  • PeachPuff

    #FFDAB9

  • PaleGoldenrod

    #EEE8AA

  • Khaki

    #F0E68C

  • DarkKhaki

    #BDB76B

Grüne23

Details anzeigen

  • GreenYellow

    #ADFF2F

  • Chartreuse

    #7FFF00

  • LawnGreen

    #7CFC00

  • Lime

    #00FF00

  • LimeGreen

    #32CD32

  • PaleGreen

    #98FB98

  • LightGreen

    #90EE90

  • MediumSpringGreen

    #00FA9A

  • SpringGreen

    #00FF7F

  • MediumSeaGreen

    #3CB371

  • SeaGreen

    #2E8B57

  • ForestGreen

    #228B22

  • Green

    #008000

  • DarkGreen

    #006400

  • YellowGreen

    #9ACD32

  • OliveDrab

    #6B8E23

  • Olive

    #808000

  • DarkOliveGreen

    #556B2F

  • MediumAquamarine

    #66CDAA

  • DarkSeaGreen

    #8FBC8F

  • LightSeaGreen

    #20B2AA

  • DarkCyan

    #008B8B

  • Teal

    #008080

Cyane8

Details anzeigen

  • Aqua

    #00FFFF

  • Cyan

    #00FFFF

  • LightCyan

    #E0FFFF

  • PaleTurquoise

    #AFEEEE

  • Aquamarine

    #7FFFD4

  • Turquoise

    #40E0D0

  • MediumTurquoise

    #48D1CC

  • DarkTurquoise

    #00CED1

Blaue17

Details anzeigen

  • CadetBlue

    #5F9EA0

  • SteelBlue

    #4682B4

  • LightSteelBlue

    #B0C4DE

  • PowderBlue

    #B0E0E6

  • LightBlue

    #ADD8E6

  • SkyBlue

    #87CEEB

  • LightSkyBlue

    #87CEFA

  • DeepSkyBlue

    #00BFFF

  • DodgerBlue

    #1E90FF

  • CornflowerBlue

    #6495ED

  • MediumSlateBlue

    #7B68EE

  • RoyalBlue

    #4169E1

  • Blue

    #0000FF

  • MediumBlue

    #0000CD

  • DarkBlue

    #00008B

  • Navy

    #000080

  • MidnightBlue

    #191970

Violette18

Details anzeigen

  • Lavender

    #E6E6FA

  • Thistle

    #D8BFD8

  • Plum

    #DDA0DD

  • Violet

    #EE82EE

  • Orchid

    #DA70D6

  • Fuchsia

    #FF00FF

  • Magenta

    #FF00FF

  • MediumOrchid

    #BA55D3

  • MediumPurple

    #9370DB

  • RebeccaPurple

    #663399

  • BlueViolet

    #8A2BE2

  • DarkViolet

    #9400D3

  • DarkOrchid

    #9932CC

  • DarkMagenta

    #8B008B

  • Purple

    #800080

  • Indigo

    #4B0082

  • SlateBlue

    #6A5ACD

  • DarkSlateBlue

    #483D8B

Rosa6

Details anzeigen

  • Pink

    #FFC0CB

  • LightPink

    #FFB6C1

  • HotPink

    #FF69B4

  • DeepPink

    #FF1493

  • MediumVioletRed

    #C71585

  • PaleVioletRed

    #DB7093

Braune16

Details anzeigen

  • Cornsilk

    #FFF8DC

  • BlanchedAlmond

    #FFEBCD

  • Bisque

    #FFE4C4

  • NavajoWhite

    #FFDEAD

  • Wheat

    #F5DEB3

  • BurlyWood

    #DEB887

  • Tan

    #D2B48C

  • RosyBrown

    #BC8F8F

  • SandyBrown

    #F4A460

  • Goldenrod

    #DAA520

  • DarkGoldenrod

    #B8860B

  • Peru

    #CD853F

  • Chocolate

    #D2691E

  • SaddleBrown

    #8B4513

  • Sienna

    #A0522D

  • Brown

    #A52A2A

Weiße17

Details anzeigen

  • White

    #FFFFFF

  • Snow

    #FFFAFA

  • HoneyDew

    #F0FFF0

  • MintCream

    #F5FFFA

  • Azure

    #F0FFFF

  • AliceBlue

    #F0F8FF

  • GhostWhite

    #F8F8FF

  • WhiteSmoke

    #F5F5F5

  • Seashell

    #FFF5EE

  • Beige

    #F5F5DC

  • OldLace

    #FDF5E6

  • FloralWhite

    #FFFAF0

  • Ivory

    #FFFFF0

  • AntiqueWhite

    #FAEBD7

  • Linen

    #FAF0E6

  • LavenderBlush

    #FFF0F5

  • MistyRose

    #FFE4E1

Graue17

Details anzeigen

  • Gainsboro

    #DCDCDC

  • LightGray

    #D3D3D3

  • LightGrey

    #D3D3D3

  • Silver

    #C0C0C0

  • DarkGray

    #A9A9A9

  • DarkGrey

    #A9A9A9

  • Gray

    #808080

  • Grey

    #808080

  • DimGray

    #696969

  • DimGrey

    #696969

  • LightSlateGray

    #778899

  • LightSlateGrey

    #778899

  • SlateGray

    #708090

  • SlateGrey

    #708090

  • DarkSlateGray

    #2F4F4F

  • DarkSlateGrey

    #2F4F4F

  • Black

    #000000

Was sind CSS-Farbnamen

CSS kennt 148 Farbnamen, etwa tomato, cornflowerblue oder rebeccapurple. Jeder entspricht einem festen HEX-Code und funktioniert in allen Browsern gleich, ohne dass man etwas definieren muss.

Sie sind praktisch für Prototypen, Beispiele und einzelne Farben, weil sie sich besser lesen als ein Code. Für ein Designsystem mit exakten, einheitlichen Tönen arbeitest du besser mit HEX, RGB oder OKLCH.

Wissenswertes über CSS-Farbnamen

Hinter der Liste steckt etwas Geschichte und ein paar Eigenheiten, die man kennen sollte.

  • Anfangs waren es 16

    HTML 4 definierte nur 16 Namen, etwa navy, teal oder olive. Der Rest kam später, übernommen aus den Farben des Grafiksystems X11.

  • 148 Namen, 139 Farben

    Neun Paare sind dieselbe Farbe: gray und grey (und ihre Varianten), aqua und cyan sowie fuchsia und magenta.

  • darkgray ist heller als gray

    Wegen dieses X11-Erbes ist darkgray (#A9A9A9) heller als gray (#808080). Suchst du ein dunkles Grau, nimm dimgray.

  • rebeccapurple hat eine Geschichte

    Die Farbe wurde 2014 zum Gedenken an Rebecca Meyer hinzugefügt, die Tochter von Eric Meyer, einer der prägenden Figuren von CSS. Es ist der einzige Name, der in den letzten Jahren dazukam.

  • Groß- und Kleinschreibung egal

    tomato, Tomato und TOMATO sind dieselbe Farbe. Üblich ist die Kleinschreibung.

  • transparent und currentColor

    Sie gehören nicht zur Liste, sind aber ebenfalls Farb-Schlüsselwörter: transparent ist völlig durchsichtig und currentColor übernimmt die Textfarbe des Elements.

Häufige Fragen

148 Namen, die 139 verschiedenen Farben entsprechen, weil es neun Alias-Paare gibt (etwa gray und grey). Sie reichen von Grundfarben wie red oder blue bis zu Namen wie mediumseagreen oder rebeccapurple.

Ja, du kannst sie direkt in jede Farbeigenschaft schreiben, zum Beispiel color: tomato;, ohne sie vorher in HEX oder RGB umzuwandeln.

Ja. CSS akzeptiert beide Schreibweisen für alle Grautöne (gray/grey, darkgray/darkgrey …), und sie ergeben exakt dieselbe Farbe.

Weil die Namen aus unterschiedlichen Quellen stammen: gray (#808080) kommt aus der ursprünglichen HTML-Liste, darkgray (#A9A9A9) wurde aus den X11-Farben übernommen, wo „gray“ heller war. Für ein dunkles Grau nimm dimgray (#696969).

Die Farbe #663399, 2014 zum Gedenken an Rebecca Meyer in CSS aufgenommen, die Tochter von Eric Meyer, einer der prägenden Figuren der CSS-Community.

Nein. Tomato, tomato und TOMATO funktionieren gleich, üblich ist aber die Kleinschreibung.

Ja, sie sind Teil des CSS-Standards und werden von allen aktuellen Browsern unterstützt.

Verwandte Tools