Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #48d1cc und Farbwert #fffaf0

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 #48d1cc

Schriftfarbwert #fffaf0

DetailHintergrund #48d1cc DetailSchrift #fffaf0 
Farbwert :#48d1ccFarbwert :#fffaf0
Farbe :mediumturquoiseFarbe :floralwhite
HTML:#48d1ccHTML:#fffaf0
HTML (Wert):#48d1ccHTML (Wert):#fffaf0
CSS:#48d1ccCSS:#fffaf0
CSS (Wert):#48d1ccCSS (Wert):#fffaf0
CSS (kürzest):#48d1ccCSS (kürzest):#fffaf0
CSS (RGB):rgb(72,209,204)CSS (RGB):rgb(255,250,240)
CSS (%RGB):rgb(28%,81%,80%)CSS (%RGB):rgb(100%,98%,94%)

Verlauf Hintergrundfarbwert #48d1cc nach Schriftfarbwert #fffaf0

#48d1cc#62d6d1#7cdcd6#96e2db#b0e8e0#caeee5#e4f4ea#fffaf0
#48d1cc#62d6d1#7cdcd6#96e2db#b0e8e0#caeee5#e4f4ea#fffaf0

Kombination von #48d1cc und #fffaf0

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

Auf Hintergrund #48d1cc ist #fffaf0 ungeeignet. Die Helligkeit und Farben sind zu ähnlich.

Die Ähnlichkeit der Farben #fffaf0 und #48d1cc ergibt sich zu 91.47%. Die Lesbarkeit dieser Farbkombination liegt damit bei 8.53%.

Hintergrundfarbwert #48d1cc

Schriftfarbwert #fffaf0

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#48d1cc#48d1cc#48d1cc#48d1cc#fffaf0#fffaf0#fffaf0#fffaf0
#62d7d3#62d7d3#3db3ae#3db3ae#fffaf2#fffaf2#dad6cd#dad6cd
#7cdeda#7cdeda#339591#339591#fffbf4#fffbf4#b6b2ab#b6b2ab
#96e4e1#96e4e1#297774#297774#fffcf6#fffcf6#918e89#918e89
#b0ebe9#b0ebe9#1e5957#1e5957#fffcf8#fffcf8#6d6b66#6d6b66
#caf1f0#caf1f0#143b3a#143b3a#fffdfa#fffdfa#484744#484744
#e4f8f7#e4f8f7#0a1d1d#0a1d1d#fffefc#fffefc#242322#242322
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #48d1cc und Farbwert #fffaf0

Wechsel der Textfarbe bei Hover bei Befehl center

Die Textfarbe soll sich von Farbwert #48d1cc auf Farbwert #fffaf0 ändern, wenn man mit der Maus auf <center> zeigt. Wir bereiten zunächst die Darstellung von <center> in Farbwert #48d1cc vor.

Zum Beispiel legen wir die Textfarbe von <center> auf Farbwert #48d1cc fest. Zwar verändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  center { 
    color:#48d1cc; 
    font-family:monospace;
  }
//-->
</style>
Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe zu #fffaf0 ändert.
<style type="text/css"><!--
  center: hover { 
    color: #fffaf0;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung des hier verwendeten Tag center erfahren Sie in der HTML Referenz unter <center>.

Füllen und Umranden von HTML-Tag textarea

Für dieses Beispiel umranden wir <textarea> mit einem . Die Hintergrundfarbe für <textarea> setzen wir entsprechend auf Farbwert #48d1cc. Mit HTML ist dies nicht möglich. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  textarea { 
    border-style: inset; 
    background-color: #48d1cc; 
    border-color: #fffaf0; 
    border-width: 2px;
  }
//-->
</style>

Weiteres zum Thema textarea lesen Sie in Formulare in HTML. Mehr zum hier gezeigten Tag textarea ist in der HTML Referenz bei <textarea> genau zusammengestellt.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen