Ressourcen: 137 HTML Farbnamen - Kombination von Farbe green und Farbe skyblue

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, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbe green

Schriftfarbe skyblue

DetailHintergrund green DetailSchrift skyblue 
Farbe :greenFarbe :skyblue
Farbwert :#008000Farbwert :#87ceeb
HTML:greenHTML:skyblue
HTML (Wert):#008000HTML (Wert):#87ceeb
CSS:greenCSS:skyblue
CSS (Wert):#008000CSS (Wert):#87ceeb
CSS (kürzest):#008000CSS (kürzest):#87ceeb
CSS (RGB):rgb(0,128,0)CSS (RGB):rgb(135,206,235)
CSS (%RGB):rgb(0%,50%,0%)CSS (%RGB):rgb(52%,80%,92%)

Verlauf Hintergrundfarbe green nach Schriftfarbe skyblue

#008000#138b21#269643#39a164#4dac86#60b7a7#73c2c9#87ceeb
#008000#138b21#269643#39a164#4dac86#60b7a7#73c2c9#87ceeb

Kombination von green und skyblue

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.

Die Ähnlichkeit von skyblue und green beträgt 85.95%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 14.05%.

Auf Hintergrund green ist skyblue ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbe green

Schriftfarbe skyblue

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#008000#008000#008000#008000#87ceeb#87ceeb#87ceeb#87ceeb
#249224#249224#006d00#006d00#98d5ed#98d5ed#73b0c9#73b0c9
#48a448#48a448#005b00#005b00#a9dcf0#a9dcf0#6093a7#6093a7
#6db66d#6db66d#004900#004900#bae3f3#bae3f3#4d7586#4d7586
#91c891#91c891#003600#003600#cbeaf6#cbeaf6#395864#395864
#b6dab6#b6dab6#002400#002400#dcf1f9#dcf1f9#263a43#263a43
#daecda#daecda#001200#001200#edf8fc#edf8fc#131d21#131d21
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbe green und Farbe skyblue

Füllen und Umranden mit Tag img

Hier umranden wir <img> mit einem doppelten, 2 Pixel dicken Rahmen in Farbe skyblue . Den Hintergrund von <img> setzen wir auf Farbe green. Dies ist in HTML so kaum möglich. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  img { 
    background-color:green; 
    border-width:2px; 
    border-color:skyblue; 
    border-style:double;
  }
//-->
</style>

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

Wechsel der Unterstreichung bei Hover von Tag label

Die Unterstreichungsfarbe soll sich von Farbe green auf Farbe skyblue ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <label> in Farbe green vor.

Beispielsweise unterstreichen wir <label> mit Hilfe eines gezahnten Rahmens mit 5 Pixel Dicke in Farbe green.

<style type="text/css"><!--
  label { border-bottom:5px ridge green; }
//-->
</style>
Jetzt stellen wir ein, dass bei Hover die Farbe der Unterstreichung auf skyblue geändert wird.
<style type="text/css"><!--
  label:hover { 
    border-bottom-color:skyblue;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man dies bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Das ist aber keine normale Unterstreichung, der Text hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zu label erfahren Sie in Formulare in HTML. Einzelheiten des hier gezeigten HTML-Befehl label sind in der HTML Referenz unter <label> genau beschrieben.

Tabelle der 137 HTML Farbnamen

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

Weitere Farbtabellen