Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5f5f5 und Farbe dimgray

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 #f5f5f5

Schriftfarbe dimgray

DetailHintergrund #f5f5f5 DetailSchrift dimgray 
Farbwert :#f5f5f5Farbe :dimgray
Farbe :whitesmokeFarbwert :#696969
HTML:#f5f5f5HTML:dimgray
HTML (Wert):#f5f5f5HTML (Wert):#696969
CSS:#f5f5f5CSS:dimgray
CSS (Wert):#f5f5f5CSS (Wert):#696969
CSS (kürzest):#f5f5f5CSS (kürzest):#696969
CSS (RGB):rgb(245,245,245)CSS (RGB):rgb(105,105,105)
CSS (%RGB):rgb(96%,96%,96%)CSS (%RGB):rgb(41%,41%,41%)

Verlauf Hintergrundfarbwert #f5f5f5 nach Schriftfarbe dimgray

#f5f5f5#e1e1e1#cdcdcd#b9b9b9#a5a5a5#919191#7d7d7d#696969
#f5f5f5#e1e1e1#cdcdcd#b9b9b9#a5a5a5#919191#7d7d7d#696969

Kombination von #f5f5f5 und dimgray

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

dimgray eignet sich nicht als Schriftfarbe auf Hintergrund #f5f5f5. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich.

Die Ähnlichkeit der Farben dimgray und #f5f5f5 beträgt 76.02%. Die Lesbarkeit dieser Farbkombination liegt damit bei 23.98%.

Hintergrundfarbwert #f5f5f5

Schriftfarbe dimgray

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#f5f5f5#f5f5f5#f5f5f5#f5f5f5#696969#696969#696969#696969
#f6f6f6#f6f6f6#d2d2d2#d2d2d2#7e7e7e#7e7e7e#5a5a5a#5a5a5a
#f7f7f7#f7f7f7#afafaf#afafaf#939393#939393#4b4b4b#4b4b4b
#f9f9f9#f9f9f9#8c8c8c#8c8c8c#a9a9a9#a9a9a9#3c3c3c#3c3c3c
#fafafa#fafafa#696969#696969#bebebe#bebebe#2d2d2d#2d2d2d
#fcfcfc#fcfcfc#464646#464646#d4d4d4#d4d4d4#1e1e1e#1e1e1e
#fdfdfd#fdfdfd#232323#232323#e9e9e9#e9e9e9#0f0f0f#0f0f0f
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #f5f5f5 und Farbe dimgray

Füllen und Umranden von Tag a

Ein Verweis wird mit HTML-Befehl <a> erzeugt. Dieser kann hervorgehoben und farblich gestaltet werden.

Für dieses Beispiel umranden wir <a> mit einem gefurchten, 2 Punkte dicken Rahmen in Farbe dimgray . Den Hintergrund von <a> färben wir entsprechend mit Farbwert #f5f5f5. Dies geht in HTML kaum. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  a { 
    border-style:groove; 
    border-color:dimgray; 
    border-width:2pt; 
    background-color:#f5f5f5;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachlesen. Mehr zum hier verwendeten HTML-Befehl <a>.

Wechsel der Umrandung bei Hover von Tag img

Die Rahmenfarbe soll sich von Farbwert #f5f5f5 auf Farbe dimgray ändern, wenn man mit der Maus auf <img> zeigt. Wir bereiten zunächst eine Formatierung von <img> in Farbwert #f5f5f5 vor.

In diesem Beispiel umranden wir <img> mit einem 1 Pixel dicken, doppelten Rahmen in Farbwert #f5f5f5.

<style type="text/css"><!--
  img { border:1px double #f5f5f5; }
//-->
</style>
Jetzt fordern wir, dass bei Mausberührung die Rahmenfarbe auf dimgray geändert wird.
<style type="text/css"><!--
  img: hover { 
    border-color: dimgray;
  }
//-->
</style>

Mehr zum Thema erfahren Sie in Grafik in HTML. Der Befehl img ist in der HTML Referenz unter <img> genau zusammengestellt.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen