Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #d3d3d3 und Farbwert #d2b48c

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

Schriftfarbwert #d2b48c

DetailHintergrund #d3d3d3 DetailSchrift #d2b48c 
Farbwert :#d3d3d3Farbwert :#d2b48c
Farbe :lightgreyFarbe :tan
HTML:#d3d3d3HTML:#d2b48c
HTML (Wert):#d3d3d3HTML (Wert):#d2b48c
CSS:#d3d3d3CSS:#d2b48c
CSS (Wert):#d3d3d3CSS (Wert):#d2b48c
CSS (kürzest):#d3d3d3CSS (kürzest):#d2b48c
CSS (RGB):rgb(211,211,211)CSS (RGB):rgb(210,180,140)
CSS (%RGB):rgb(82%,82%,82%)CSS (%RGB):rgb(82%,70%,54%)

Verlauf Hintergrundfarbwert #d3d3d3 nach Schriftfarbwert #d2b48c

#d3d3d3#d2cec8#d2cabe#d2c5b4#d2c1aa#d2bca0#d2b896#d2b48c
#d3d3d3#d2cec8#d2cabe#d2c5b4#d2c1aa#d2bca0#d2b896#d2b48c

Kombination von #d3d3d3 und #d2b48c

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

#d2b48c ist nicht als Schriftfarbe auf Hintergrund #d3d3d3 geeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Die Ähnlichkeit von #d2b48c und #d3d3d3 ergibt sich zu 93.73%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.27%.

Hintergrundfarbwert #d3d3d3

Schriftfarbwert #d2b48c

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#d3d3d3#d3d3d3#d3d3d3#d3d3d3#d2b48c#d2b48c#d2b48c#d2b48c
#d9d9d9#d9d9d9#b4b4b4#b4b4b4#d8be9c#d8be9c#b49a78#b49a78
#dfdfdf#dfdfdf#969696#969696#dec9ac#dec9ac#968064#968064
#e5e5e5#e5e5e5#787878#787878#e5d4bd#e5d4bd#786650#786650
#ececec#ececec#5a5a5a#5a5a5a#ebdecd#ebdecd#5a4d3c#5a4d3c
#f2f2f2#f2f2f2#3c3c3c#3c3c3c#f2e9de#f2e9de#3c3328#3c3328
#f8f8f8#f8f8f8#1e1e1e#1e1e1e#f8f4ee#f8f4ee#1e1914#1e1914
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #d3d3d3 und Farbwert #d2b48c

Hintergrund/Text-Kombination mit Tag h3

Eine Überschrift wird mit Befehl <h3> erzeugt. Diese kann hervorgehoben und farblich gestaltet werden.

Bei diesem Beispiel ändern wir die Textfarbe von <h3> auf Farbwert #d2b48c und die Hintergrundfarbe von <h3> auf Farbwert #d3d3d3. Die Schriftart setzen wir auf arial. Als Schriftgröße setzen wir 118%.

<style type="text/css"><!--
  h3 { 
    font-size:118%; 
    color:#d2b48c; 
    background-color:#d3d3d3; 
    font-family:arial;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Der HTML-Tag h3 ist in der HTML Referenz unter <h3> ausführlich gezeigt.

Wechsel der Umrandung bei Hover von Befehl a

Mit Tag <a> erzeugen Sie einen Hyperlink. Diesen können Sie farblich gestalten und hervorheben.

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

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, gestrichelten Rahmen in Farbwert #d3d3d3.

<style type="text/css"><!--
  a { border:2px dashed #d3d3d3; }
//-->
</style>
Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #d2b48c ändert.
<style type="text/css"><!--
  a: hover { 
    border-color: #d2b48c;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten vom Befehl a erfahren Sie in der HTML Referenz unter <a>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen