Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5f5dc und Farbwert #008b8b

von Thomas Salvador.

Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.

Hintergrundfarbwert #f5f5dc

Schriftfarbwert #008b8b

DetailHintergrund #f5f5dc DetailSchrift #008b8b 
Farbwert :#f5f5dcFarbwert :#008b8b
Farbe :beigeFarbe :darkcyan
HTML:#f5f5dcHTML:#008b8b
HTML (Wert):#f5f5dcHTML (Wert):#008b8b
CSS:#f5f5dcCSS:#008b8b
CSS (Wert):#f5f5dcCSS (Wert):#008b8b
CSS (kürzest):#f5f5dcCSS (kürzest):#008b8b
CSS (RGB):rgb(245,245,220)CSS (RGB):rgb(0,139,139)
CSS (%RGB):rgb(96%,96%,86%)CSS (%RGB):rgb(0%,54%,54%)

Verlauf Hintergrundfarbwert #f5f5dc nach Schriftfarbwert #008b8b

#f5f5dc#d2e5d0#afd6c4#8cc7b9#69b8ad#46a9a2#239a96#008b8b
#f5f5dc#d2e5d0#afd6c4#8cc7b9#69b8ad#46a9a2#239a96#008b8b

Kombination von #f5f5dc und #008b8b

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.

Auf Hintergrund #f5f5dc ist #008b8b ungeeignet. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich.

Die Ähnlichkeit von #008b8b und #f5f5dc ergibt sich zu 82.16%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 17.84%.

Hintergrundfarbwert #f5f5dc

Schriftfarbwert #008b8b

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#f5f5dc#f5f5dc#f5f5dc#f5f5dc#008b8b#008b8b#008b8b#008b8b
#f6f6e1#f6f6e1#d2d2bc#d2d2bc#249b9b#249b9b#007777#007777
#f7f7e6#f7f7e6#afaf9d#afaf9d#48acac#48acac#006363#006363
#f9f9eb#f9f9eb#8c8c7d#8c8c7d#6dbcbc#6dbcbc#004f4f#004f4f
#fafaf0#fafaf0#69695e#69695e#91cdcd#91cdcd#003b3b#003b3b
#fcfcf5#fcfcf5#46463e#46463e#b6dddd#b6dddd#002727#002727
#fdfdfa#fdfdfa#23231f#23231f#daeeee#daeeee#001313#001313
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #f5f5dc und Farbwert #008b8b

Wechsel der Umrandung bei Hover mit HTML-Tag hr

Die Rahmenfarbe soll sich von Farbwert #f5f5dc auf Farbwert #008b8b ändern, wenn man mit der Maus auf <hr> zeigt. Wir bereiten zunächst eine Darstellung von <hr> in Farbwert #f5f5dc vor.

In diesem Beispiel umranden wir <hr> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbwert #f5f5dc.

<style type="text/css"><!--
  hr { 
    border-width: 3px; 
    border-style: ridge; 
    border-color: #f5f5dc;
  }
//-->
</style>
Nun stellen wir ein, dass bei Hover die Rahmenfarbe auf #008b8b geändert wird.
<style type="text/css"><!--
  hr:hover { 
    border-color:#008b8b;
  }
//-->
</style>

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum Tag hr ist in der HTML Referenz bei <hr> ausführlich gezeigt.

Hintergrund/Text-Kombination bei Tag a

Einen Link erzeugt man mit HTML-Tag <a>. Diesen kann man hervorheben und farblich gestalten.

Wir ändern für dieses Beispiel die Textfarbe von <a> auf Farbwert #008b8b und die Hintergrundfarbe von <a> auf Farbwert #f5f5dc. Die Schriftart setzen wir auf verdana und ändern die Schriftgröße auf 13px.

<style type="text/css"><!--
  a { 
    color: #008b8b; 
    font-size: 13px; 
    background-color: #f5f5dc; 
    font-family: verdana;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachsehen. Der hier verwendete HTML-Befehl a ist in der HTML Referenz unter <a> beschrieben.

Tabelle der 120 HTML Farbnamen

Hintergrund Farbwert Farbe undSchrift Farbwert Farbkombination
aliceblue #f0f8ff         +  aliceblue #f0f8ff aliceblue / #f5f5dc
antiquewhite #faebd7         +  antiquewhite #faebd7 antiquewhite / #f5f5dc
aquamarine #7fffd4         +  aquamarine #7fffd4 aquamarine / #f5f5dc
azure #f0ffff         +  azure #f0ffff azure / #f5f5dc
beige #f5f5dc         +  beige #f5f5dc beige / #f5f5dc
blueviolet #8a2be2         +  blueviolet #8a2be2 blueviolet / #f5f5dc
brown #a52a2a         +  brown #a52a2a brown / #f5f5dc
burlywood #deb887         +  burlywood #deb887 burlywood / #f5f5dc
cadetblue #5f9ea0         +  cadetblue #5f9ea0 cadetblue / #f5f5dc
chartreuse #7fff00         +  chartreuse #7fff00 chartreuse / #f5f5dc
chocolate #d2691e         +  chocolate #d2691e chocolate / #f5f5dc
coral #ff7f50         +  coral #ff7f50 coral / #f5f5dc
cornflowerblue #6495ed         +  cornflowerblue #6495ed cornflowerblue / #f5f5dc
cornsilk #fff8dc         +  cornsilk #fff8dc cornsilk / #f5f5dc
crimson #dc143c         +  crimson #dc143c crimson / #f5f5dc
darkblue #00008b         +  darkblue #00008b darkblue / #f5f5dc
darkcyan #008b8b         +  darkcyan #008b8b darkcyan / #f5f5dc
darkgoldenrod #b8860b         +  darkgoldenrod #b8860b darkgoldenrod / #f5f5dc
darkgray #a9a9a9         +  darkgray #a9a9a9 darkgray / #f5f5dc
darkgreen #006400         +  darkgreen #006400 darkgreen / #f5f5dc
darkkhaki #bdb76b         +  darkkhaki #bdb76b darkkhaki / #f5f5dc
darkmagenta #8b008b         +  darkmagenta #8b008b darkmagenta / #f5f5dc
darkolivegreen #556b2f         +  darkolivegreen #556b2f darkolivegreen / #f5f5dc
darkorange #ff8c00         +  darkorange #ff8c00 darkorange / #f5f5dc
darkorchid #9932cc         +  darkorchid #9932cc darkorchid / #f5f5dc
darkred #8b0000         +  darkred #8b0000 darkred / #f5f5dc
darksalmon #e9967a         +  darksalmon #e9967a darksalmon / #f5f5dc
darkseagreen #8fbc8f         +  darkseagreen #8fbc8f darkseagreen / #f5f5dc
darkslateblue #483d8b         +  darkslateblue #483d8b darkslateblue / #f5f5dc
darkslategray #2f4f4f         +  darkslategray #2f4f4f darkslategray / #f5f5dc
darkturquoise #00ced1         +  darkturquoise #00ced1 darkturquoise / #f5f5dc
darkviolet #9400d3         +  darkviolet #9400d3 darkviolet / #f5f5dc
deeppink #ff1493         +  deeppink #ff1493 deeppink / #f5f5dc
deepskyblue #00bfff         +  deepskyblue #00bfff deepskyblue / #f5f5dc
dimgray #696969         +  dimgray #696969 dimgray / #f5f5dc
dodgerblue #1e90ff         +  dodgerblue #1e90ff dodgerblue / #f5f5dc
firebrick #b22222         +  firebrick #b22222 firebrick / #f5f5dc
floralwhite #fffaf0         +  floralwhite #fffaf0 floralwhite / #f5f5dc
forestgreen #228b22         +  forestgreen #228b22 forestgreen / #f5f5dc
gainsboro #dcdcdc         +  gainsboro #dcdcdc gainsboro / #f5f5dc
ghostwhite #f8f8ff         +  ghostwhite #f8f8ff ghostwhite / #f5f5dc
gold #ffd700         +  gold #ffd700 gold / #f5f5dc
goldenrod #daa520         +  goldenrod #daa520 goldenrod / #f5f5dc
greenyellow #adff2f         +  greenyellow #adff2f greenyellow / #f5f5dc
honeydew #f0fff0         +  honeydew #f0fff0 honeydew / #f5f5dc
hotpink #ff69b4         +  hotpink #ff69b4 hotpink / #f5f5dc
indianred #cd5c5c         +  indianred #cd5c5c indianred / #f5f5dc
indigo #4b0082         +  indigo #4b0082 indigo / #f5f5dc
ivory #fffff0         +  ivory #fffff0 ivory / #f5f5dc
khaki #f0e68c         +  khaki #f0e68c khaki / #f5f5dc
lavender #e6e6fa         +  lavender #e6e6fa lavender / #f5f5dc
lavenderblush #fff0f5         +  lavenderblush #fff0f5 lavenderblush / #f5f5dc
lawngreen #7cfc00         +  lawngreen #7cfc00 lawngreen / #f5f5dc
lemonchiffon #fffacd         +  lemonchiffon #fffacd lemonchiffon / #f5f5dc
lightblue #add8e6         +  lightblue #add8e6 lightblue / #f5f5dc
lightcoral #f08080         +  lightcoral #f08080 lightcoral / #f5f5dc
lightcyan #e0ffff         +  lightcyan #e0ffff lightcyan / #f5f5dc
lightgoldenrodyellow #fafad2         +  lightgoldenrodyellow #fafad2 lightgoldenrodyellow / #f5f5dc
lightgreen #90ee90         +  lightgreen #90ee90 lightgreen / #f5f5dc
lightgrey #d3d3d3         +  lightgrey #d3d3d3 lightgrey / #f5f5dc
lightpink #ffb6c1         +  lightpink #ffb6c1 lightpink / #f5f5dc
lightsalmon #ffa07a         +  lightsalmon #ffa07a lightsalmon / #f5f5dc
lightseagreen #20b2aa         +  lightseagreen #20b2aa lightseagreen / #f5f5dc
lightskyblue #87cefa         +  lightskyblue #87cefa lightskyblue / #f5f5dc
lightslategray #778899         +  lightslategray #778899 lightslategray / #f5f5dc
lightsteelblue #b0c4de         +  lightsteelblue #b0c4de lightsteelblue / #f5f5dc
lightyellow #ffffe0         +  lightyellow #ffffe0 lightyellow / #f5f5dc
limegreen #32cd32         +  limegreen #32cd32 limegreen / #f5f5dc
linen #faf0e6         +  linen #faf0e6 linen / #f5f5dc
mediumaquamarine #66cdaa         +  mediumaquamarine #66cdaa mediumaquamarine / #f5f5dc
mediumblue #0000cd         +  mediumblue #0000cd mediumblue / #f5f5dc
mediumorchid #ba55d3         +  mediumorchid #ba55d3 mediumorchid / #f5f5dc
mediumpurple #9370db         +  mediumpurple #9370db mediumpurple / #f5f5dc
mediumseagreen #3cb371         +  mediumseagreen #3cb371 mediumseagreen / #f5f5dc
mediumslateblue #7b68ee         +  mediumslateblue #7b68ee mediumslateblue / #f5f5dc
mediumspringgreen #00fa9a         +  mediumspringgreen #00fa9a mediumspringgreen / #f5f5dc
mediumturquoise #48d1cc         +  mediumturquoise #48d1cc mediumturquoise / #f5f5dc
mediumvioletred #c71585         +  mediumvioletred #c71585 mediumvioletred / #f5f5dc
midnightblue #191970         +  midnightblue #191970 midnightblue / #f5f5dc
mintcream #f5fffa         +  mintcream #f5fffa mintcream / #f5f5dc
mistyrose #ffe4e1         +  mistyrose #ffe4e1 mistyrose / #f5f5dc
moccasin #ffe4b5         +  moccasin #ffe4b5 moccasin / #f5f5dc
navajowhite #ffdead         +  navajowhite #ffdead navajowhite / #f5f5dc
oldlace #fdf5e6         +  oldlace #fdf5e6 oldlace / #f5f5dc
olivedrab #6b8e23         +  olivedrab #6b8e23 olivedrab / #f5f5dc
orange #ffa500         +  orange #ffa500 orange / #f5f5dc
orangered #ff4500         +  orangered #ff4500 orangered / #f5f5dc
orchid #da70d6         +  orchid #da70d6 orchid / #f5f5dc
palegoldenrod #eee8aa         +  palegoldenrod #eee8aa palegoldenrod / #f5f5dc
palegreen #98fb98         +  palegreen #98fb98 palegreen / #f5f5dc
paleturquoise #afeeee         +  paleturquoise #afeeee paleturquoise / #f5f5dc
palevioletred #db7093         +  palevioletred #db7093 palevioletred / #f5f5dc
papayawhip #ffefd5         +  papayawhip #ffefd5 papayawhip / #f5f5dc
peachpuff #ffdab9         +  peachpuff #ffdab9 peachpuff / #f5f5dc
peru #cd853f         +  peru #cd853f peru / #f5f5dc
pink #ffc0cb         +  pink #ffc0cb pink / #f5f5dc
plum #dda0dd         +  plum #dda0dd plum / #f5f5dc
powderblue #b0e0e6         +  powderblue #b0e0e6 powderblue / #f5f5dc
rosybrown #bc8f8f         +  rosybrown #bc8f8f rosybrown / #f5f5dc
royalblue #4169e1         +  royalblue #4169e1 royalblue / #f5f5dc
saddlebrown #8b4513         +  saddlebrown #8b4513 saddlebrown / #f5f5dc
salmon #fa8072         +  salmon #fa8072 salmon / #f5f5dc
sandybrown #f4a460         +  sandybrown #f4a460 sandybrown / #f5f5dc
seagreen #2e8b57         +  seagreen #2e8b57 seagreen / #f5f5dc
seashell #fff5ee         +  seashell #fff5ee seashell / #f5f5dc
sienna #a0522d         +  sienna #a0522d sienna / #f5f5dc
skyblue #87ceeb         +  skyblue #87ceeb skyblue / #f5f5dc
slateblue #6a5acd         +  slateblue #6a5acd slateblue / #f5f5dc
slategray #708090         +  slategray #708090 slategray / #f5f5dc
snow #fffafa         +  snow #fffafa snow / #f5f5dc
springgreen #00ff7f         +  springgreen #00ff7f springgreen / #f5f5dc
steelblue #4682b4         +  steelblue #4682b4 steelblue / #f5f5dc
tan #d2b48c         +  tan #d2b48c tan / #f5f5dc
thistle #d8bfd8         +  thistle #d8bfd8 thistle / #f5f5dc
tomato #ff6347         +  tomato #ff6347 tomato / #f5f5dc
turquoise #40e0d0         +  turquoise #40e0d0 turquoise / #f5f5dc
violet #ee82ee         +  violet #ee82ee violet / #f5f5dc
wheat #f5deb3         +  wheat #f5deb3 wheat / #f5f5dc
whitesmoke #f5f5f5         +  whitesmoke #f5f5f5 whitesmoke / #f5f5dc
yellowgreen #9acd32         +  yellowgreen #9acd32 yellowgreen / #f5f5dc

Weitere Farbtabellen