WordPress missachtet W3C-Standards


Inhaltsverzeichnis

  1. Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“
  2. Die Normung von HTML5 und CSS3 sind große Erleichterungen
  3. WordPress und die Ehrlichkeit
  4. Noch Open Source Software oder doch nicht mehr zu empfehlen
  5. Beispiel der Deklarationen „outline“ und „border“

Immer wieder werden von „WordPress“ bewährte Standards missachtet. Hier im Theme „Twenty Sixteen“ von WordPress.org.


Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“

Das CSS, Cascading Style Sheets, gibt dem Inhalt das Aussehen. Diese Trennung ist vom W3C, World Wide Web Consortium, auch genauso gewollt. Das CSS gibt es mittlerweile in der 3. Version und deckt für die meisten Webdesigner auch gefühlte 99% der gewünschten Funktionen ab.


Die Normung von HTML5 und CSS3 sind große Erleichterungen

Wird ein Link gesetzt, so wird dieser sofort ohne weitere Layout-Einstellungen in der Farbe Blau und mit Unterstrich dargestellt. Außerdem bekommt der Mauszeiger die Form des Pointers zugewiesen. Das sind die 3 Standards die in jedem HTML-Dokument für Hyperlinks schon vordefiniert sind. Der Unterstrich wird dabei von der Deklaration „text-decoration“ mit dem Wert „underline“ dargestellt.
Dieser Standard soll gewährleisten, das nachfolgende Arbeiten an der Webseite und seinem CSS, ohne weiteren Aufwand und von jedem anderem Bearbeiter fortgesetzt werden können. Denn das schlussendliche Werk, für das ein Webdesigner bezahlt wird, gehört dem Kunden.


WordPress und die Ehrlichkeit

Jetzt das Aber, aber warum versuchen Webdesigner diese Standards mit nicht konformen Winkelzügen auszuhebeln? Das bleibt wohl deren Geheimnis. Das es getan wird, das ist zweifellos Tatsache. Doch das es bei den empfohlenen und von der eigenen Plattform verbreitete Themes von WordPress sind, das ist ärgerlich und widerspricht auch dem Gedanken von Open Source Software, nämlich der Nichtdiskriminierung, und dem wichtigstem Designprinzip, dem KISS-Prinzip.

In verschieden Themes, die von WordPress vertrieben werden, sind mir solche nicht standardkonformen Deklarationen von Elementen vorgekommen und sie ärgern mich so sehr das ich nun einen Beitrag zum WordPress Standart-Theme „Twenty Sixteen“ schreibe. Denn hier wird der Unterstrich von Links erstellt mit „box-shadow: 0 1px 0 0 currentColor;“.

Versucht nun jemand diesen Unterstrich zu ändern oder zu entfernen wird er nicht fündig mit der Suche nach „text-decoration“. Bei einem anderem Theme von WordPress wird der Unterstrich mit „border-bottom“ erstellt, das zu dem selbem Ärger beim Webdesigner führt.


Noch Open Source Software oder doch nicht mehr zu empfehlen

Jetzt stellt sich mir die Frage, sind diese Themes denn dann überhaupt noch Open Source Software und wenn nicht, dann sind diese auch nicht mehr zu empfehlen!

Beispiele
standardkonformer Hyperlink der W3C-Empfehlung
Hyperlink mit „border-bottom“
Hyperlink mit „box-shadow“
Es sind keine Unterschiede zu erkennen, genau das ist die fatale Situation, vor dem der Webdesigner steht. Zudem sind in dem Theme „Twenty Sixteen“ 6(sechs) CSS-Dateien mit 53kB, das entspricht etwa 9000 Wörter, da ist die Suche nach der entsprechenden Deklarationen schon sehr schwer.


Beispiel der Deklarationen „outline“ und „border“

Hier liegt kein Fehler vor, nur scheint „outline“ doch sehr redundant zu sein. Die Deklaration „outline“ ist ohne sie zu kennen nicht gleich von „border“ zu unterscheiden. Der Unterschied liegt darin, „border“ legt sich zuerst um den Inhalt und „outline“ beinhaltet „border“ und den Content. Aber einzeln gesetzt, ist „outline“ nicht von „border“ zu unterscheiden.

Hyperlink mit „border“
Hyperlink mit „outline“
Hyperlink mit blauer gepunkteter Linie für „outline“ und roter Linie für „border“

Standard-Hyperlink mit text-decoration: underline;

Hyperlink mit border-bottom: 1px solid #3A78E0;

Hyperlink mit box-shadow: 0 1px 0 #3A78E0;

outline : 0;

Webdesign – Trennung von Content und Layout

Tatsache ist, die strikte Trennung vom „Text“-Inhalt und „Schön“-Aussehen, ist die Grundlage jedes Webdesigns und der ISO-Standard, sowie W3C-Standard, für die Sprachen HTML, CSS, SVG und XHTML. Außerdem ist barrierefreies Web eine Forderung aller Behinderten-Organisationen, anderer Benachteiligten und zum Teil schon als Gesetz verabschiedet.


Problem:
Webdesignern wird die Arbeit oft mit untaugliches Material erschwert.
• Mail hat keine Anhang, sonden die Bilder werden zum Quelltext der Mail per „Drag and Drop“ hinzugefügt und nicht als separate Dateien, das vollkommenste Desaster
• Texte werden in Bilder integriert
• Photoshop*-Dateien, Word-Dateien, Excel-Dateien
• keine Rohdaten
Kein Webbrowser beinhaltet Photoshop, Word, Excel und so weiter, sondern nur Webtechniken!
Es werden in jedem Fall Rohdaten als Originalbild und Text oder CSV-Datei benötigt mit den Endungen *.txt und *.csv. Nein, Word ist kein Text-Editor, sondern eine proprietäre Textverarbeitung.

Wie wirkt sich das aus?
Ein Photoshop-Bild ist Super für Flyer, Plakete und ähnliche Printmedien, dort kann der Content nur Schaden am Ersteller-Computer oder dem Computer des Verarbeitenden anrichten. Aber um Bilder durch das Internet zu schleusen ist eine gewaltige Internet-Technik zu bedienen, da die Bilder von Photoshop sehr groß sind und unnötige Sachen transportieren, macht es die Sache noch schwerer und könnte bei Computer-Sabotage sogar rechtliche Konsequenzen nach sich ziehen. Außerdem wird der zu lesende Content unleserlich.

Ergebnis:
Riesige Datenmengen, riesiges Defizit beim Vermitteln von Content, Bilder mit schlechtester Qualität und nach 2 Sekunden weißem Bildschirm ist der User schon fort auf der Konkurenz-Website. Ein rießiger Schaden für alle.
Schranke


Im Einzelenen
1. Wie groß sind die Bilder
2. Darstellungsfehler


1. Wie groß sind Bilder
a) Größe bei Übertragung von der Website auf den Computer, also den Desktop
Das angezeigte Bild mit Schranke, unbearbeitet als Screenshot in der Größe 510×403 Pixel aufgenommen ergibt:
• 1.201.750 Bytes – Photoshop-Dateiformat, ohne HSV, ohne Adope-Zusatz-Content
• 616.326 – Gimp-Dateiformat
• 429.348 – PNG-Format
• 81.828 – JPG-Format
Schranke-Datei

b) Größe der übertragenen Datei im Arbeitsspeicher
Jetzt die tatsächliche Größe im Arbeitsspeicher (RAM):
510x403x24RGB = 4.932.720 Bytes

Für direkt von Photoshop erstellte Dateien gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + unbekannter Content von Adobe.
Der mir unbekannte Content macht mir am meisten Sorgen, da er möglicherweise unerwünschten Content noch nachladen könnte, Adobe ist eine USA-Firma.

2. Darstellungsfehler
Gerade die Trennung von Content und Layout kann die geforderte barrierefreie Darstellung ermöglichen.
• Suchmaschinen die den Inhalt lesen, können keinen Text aus einem Bild auslesen
• textbasierte Browser sehen auch nichts
• was ist mit RSS und so weiter
• Blinde die mit mit ihrer Darstellungstechnik arbeiten, fühlen ebenfalls nichts
• die Tastenkombination „Strg++“ kann in allen Webbrowsern die Schrift mit ihren Vektoren klar und größer darstellen. Bei Text im Bild verschwimmt dieser, siehe meinen Beitrag https://ro-kom.de/mediendesign/.
• eigene Desktop-Einstellungen, wie zum Beispiel Kontrast, werden torpediert.

Ergebnis:
Derzeitige Gesetze und weltweit anerkannte Industrie-Normen werden missachtet und der User wird mit dem vom Photoshop-Macher erstelltem Kunstwerk terrorisiert, da dem User die Kontrolle über den Content verloren geht.


Lösung:
Respekt vor dem Webmaster und dazu lernen, so bekommt die gewünschte Website ein rechtskonformes Aussehen und ein Top-Ranking bei den Suchmaschinen.
Eine weitere Lösung ist Gimp, da diese Programm OpenSourceSoftware ist und somit saubere Dateien erstellt ohne Müll-Content.


*Photoshop ist eine Marke von Adobe, Kalifornien und eine proprietäre Software mit 58% Schwarzkopien, das heißt jeder 2. Anwender ist kriminell!
Quellen:
https://de.wikipedia.org/wiki/Photoshop
http://www.photoshoplady.com/infographics/photoshop-evolution.html

CSS-Zeichnen Dreiecke

 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #c00; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 4em solid yellowgreen; border-bottom: 4em solid transparent; border-right: 4em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: url(rose.jpg) #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid royalblue; border-left: 2em solid transparent; border-right: 2em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid mediumvioletred; border-left: 22em solid transparent; border-right: 2em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: auto; height: 2em; border-top: 2em solid transparent; border-bottom: 2em solid transparend; border-right: 2em solid black;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid goldenrod; border-bottom: 2em solid royalblue;border-left: 2em solid yellowgreen; border-right: 2em solid mediumvioletred;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-width: 1em; height: 2em; border-color:goldenrod royalblue yellowgreen mediumvioletred; border-style:solid;">
</div>
</div>

box-shadow

Es gibt noch viel fantastischere Möglichkeiten für box-shadow, hier einige Anregungen.

Weicher Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>

• 1.1em = horizontale Verschiebung
• 1.2em = vertikale Verschiebung
• 1.3em = Unschärfe-Radius [Blur]
• royalblue = Schattenfarbe


Harter Schattten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>


4 Farben-Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>


Innerer weicher Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>


Innerer harter Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>


Innerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>


Äußerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>


Äußerer weicher Schatten auf 1 Seite


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>


Transparenter Schatten


<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>


Schattiger Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>

text-shadow

Beispieltext mit text-shadow


<div style="text-shadow: .1em .2em .3em #666; font-size: 2em; color: mediumvioletred;">Beispieltext mit <em>text-shadow</em>
</div>

• 0.1em = horizontale Verschiebung
• 0.2em = vertikale Verschiebung
• 0.3em = Blur [Unschärfe-Radius]
• #666 = Schattenfarbe
• mediumvioletred = Schriftfarbe


Beispieltext mit 2x Textschatten


<div style="text-shadow: 0 0 .5em red,.1em .1em .1em gold; color: white; font-size: 2em;">Beispieltext mit 2x Textschatten
</div>


Beispieltext im Vordergrund


<div style="text-shadow: .1em .1em .1em black; color: white; font-size: 2em;">Beispieltext im Vordergrund
</div>


Beispieltext mit Kontur


<div style="text-shadow: 0 -1px black,1px 0 black,0 1px black,-1px 0 black; color: white; font-size: 2em;">Beispieltext mit Kontur
</div>


Beispieltext im Inset


<div style="text-shadow: 0 -1px 1px black,0 1px 1px white; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Inset
</div>


Beispieltext im Outset


<div style="text-shadow: 0 -1px 1px white,0 1px 1px black; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Outset
</div>


Weitere Informationen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

border-radius


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 2em 4em 6em;"></div>

border-top-left-radius: 0;
border-top-right-radius: 2em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 6em;


Border-Radius mit 1 Wert alle Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em;"></div>


Border-Radius mit 1 Ecke


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 4em 0;"></div>


Border-Radius mit 2 Ecken unten


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 6em 6em;"></div>


Border-Radius mit 2 diagonale Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em 0;"></div>


Border-Radius mit 2 unterschiedliche Werten in 2 Ecken


<div style="width: 24em; height: 4em; background: silver; border-bottom-left-radius: 6em 1em; border-bottom-right-radius: 2em 1em;"></div>


Border-Radius als Kreis


<div style="border-radius: 10em; height: 10em; width: 10em; background: silver;"></div>

X11 Farbnamen

VGA-Farben
VGA-Farben
Farbe Farbname # rgb
Farbe Farbname # rgb
black #000000 0,0,0
navy #000080 0,0,128
blue #0000ff 0,0,255
green #008000 0,128,0
teal #008080 0,128,128
lime #00ff00 0,255,0
aqua #00ffff 0,255,255
maroon #800000 128,0,0
purple #800080 128,0,128
olive #808000 128,128,0
gray #808080 128,128,128
silver #c0c0c0 208,208,208
red #ff0000 255,0,0
fuchsia #ff00ff 255,0,255
yellow #ffff00 255,255,0
white #ffffff 255,255,255

Grau-Variationen
Grau-Variationen
Farbe Farbname # rgb
Farbe Farbname # rgb
DarkSlateGray #2f4f4f 47,79,79
DarkSlateGray1 #97ffff 151,255,255
DarkSlateGray2 #8deeee 141,238,238
DarkSlateGray3 #79cdcd 121,205,205
DarkSlateGray4 #528b8b 82,139,139
DarkSlateGrey #2f4f4f 47,79,79
DimGray #696969 105,105,105
DimGrey #696969 105,105,105
LightGray #d3d3d3 211,211,211
LightGrey #d3d3d3 211,211,211
LightSlateGray #778899 119,136,153
LightSlateGrey #778899 119,136,153
SlateGray #708090 112,128,144
SlateGray1 #c6e2ff 198,226,255
SlateGray2 #b9d3ee 185,211,238
SlateGray3 #9fb6cd 159,182,205
SlateGray4 #6c7b8b 108,123,139
SlateGrey #708090 112,128,144
gray #bebebe 190,190,190
gray0 #000000 0,0,0
gray1 #030303 3,3,3
gray2 #050505 5,5,5
gray3 #080808 8,8,8
gray4 #0a0a0a 10,10,10
gray5 #0d0d0d 13,13,13
gray6 #0f0f0f 15,15,15
gray7 #121212 18,18,18
gray8 #141414 20,20,20
gray9 #171717 23,23,23
gray10 #1a1a1a 26,26,26
gray11 #1c1c1c 28,28,28
gray12 #1f1f1f 31,31,31
gray13 #212121 33,33,33
gray14 #242424 36,36,36
gray15 #262626 38,38,38
gray16 #292929 41,41,41
gray17 #2b2b2b 43,43,43
gray18 #2e2e2e 46,46,46
gray19 #303030 48,48,48
gray20 #333333 51,51,51
gray21 #363636 54,54,54
gray22 #383838 56,56,56
gray23 #3b3b3b 59,59,59
gray24 #3d3d3d 61,61,61
gray25 #404040 64,64,64
gray26 #424242 66,66,66
gray27 #454545 69,69,69
gray28 #474747 71,71,71
gray29 #4a4a4a 74,74,74
gray30 #4d4d4d 77,77,77
gray31 #4f4f4f 79,79,79
gray32 #525252 82,82,82
gray33 #545454 84,84,84
gray34 #575757 87,87,87
gray35 #595959 89,89,89
gray36 #5c5c5c 92,92,92
gray37 #5e5e5e 94,94,94
gray38 #616161 97,97,97
gray39 #636363 99,99,99
gray40 #666666 102,102,102
gray41 #696969 105,105,105
gray42 #6b6b6b 107,107,107
gray43 #6e6e6e 110,110,110
gray44 #707070 112,112,112
gray45 #737373 115,115,115
gray46 #757575 117,117,117
gray47 #787878 120,120,120
gray48 #7a7a7a 122,122,122
gray49 #7d7d7d 125,125,125
gray50 #7f7f7f 127,127,127
gray51 #828282 130,130,130
gray52 #858585 133,133,133
gray53 #878787 135,135,135
gray54 #8a8a8a 138,138,138
gray55 #8c8c8c 140,140,140
gray56 #8f8f8f 143,143,143
gray57 #919191 145,145,145
gray58 #949494 148,148,148
gray59 #969696 150,150,150
gray60 #999999 153,153,153
gray61 #9c9c9c 156,156,156
gray62 #9e9e9e 158,158,158
gray63 #a1a1a1 161,161,161
gray64 #a3a3a3 163,163,163
gray65 #a6a6a6 166,166,166
gray66 #a8a8a8 168,168,168
gray67 #ababab 171,171,171
gray68 #adadad 173,173,173
gray69 #b0b0b0 176,176,176
gray70 #b3b3b3 179,179,179
gray71 #b5b5b5 181,181,181
gray72 #b8b8b8 184,184,184
gray73 #bababa 186,186,186
gray74 #bdbdbd 189,189,189
gray75 #bfbfbf 191,191,191
gray76 #c2c2c2 194,194,194
gray77 #c4c4c4 196,196,196
gray78 #c7c7c7 199,199,199
gray79 #c9c9c9 201,201,201
gray80 #cccccc 204,204,204
gray81 #cfcfcf 207,207,207
gray82 #d1d1d1 209,209,209
gray83 #d4d4d4 212,212,212
gray84 #d6d6d6 214,214,214
gray85 #d9d9d9 217,217,217
gray86 #dbdbdb 219,219,219
gray87 #dedede 222,222,222
gray88 #e0e0e0 224,224,224
gray89 #e3e3e3 227,227,227
gray90 #e5e5e5 229,229,229
gray91 #e8e8e8 232,232,232
gray92 #ebebeb 235,235,235
gray93 #ededed 237,237,237
gray94 #f0f0f0 240,240,240
gray95 #f2f2f2 242,242,242
gray96 #f5f5f5 245,245,245
gray97 #f7f7f7 247,247,247
gray98 #fafafa 250,250,250
gray99 #fcfcfc 252,252,252
gray100 #ffffff 255,255,255
grey #bebebe 190,190,190
grey0 #000000 0,0,0
grey1 #030303 3,3,3
grey2 #050505 5,5,5
grey3 #080808 8,8,8
grey4 #0a0a0a 10,10,10
grey5 #0d0d0d 13,13,13
grey6 #0f0f0f 15,15,15
grey7 #121212 18,18,18
grey8 #141414 20,20,20
grey9 #171717 23,23,23
grey10 #1a1a1a 26,26,26
grey11 #1c1c1c 28,28,28
grey12 #1f1f1f 31,31,31
grey13 #212121 33,33,33
grey14 #242424 36,36,36
grey15 #262626 38,38,38
grey16 #292929 41,41,41
grey17 #2b2b2b 43,43,43
grey18 #2e2e2e 46,46,46
grey19 #303030 48,48,48
grey20 #333333 51,51,51
grey21 #363636 54,54,54
grey22 #383838 56,56,56
grey23 #3b3b3b 59,59,59
grey24 #3d3d3d 61,61,61
grey25 #404040 64,64,64
grey26 #424242 66,66,66
grey27 #454545 69,69,69
grey28 #474747 71,71,71
grey29 #4a4a4a 74,74,74
grey30 #4d4d4d 77,77,77
grey31 #4f4f4f 79,79,79
grey32 #525252 82,82,82
grey33 #545454 84,84,84
grey34 #575757 87,87,87
grey35 #595959 89,89,89
grey36 #5c5c5c 92,92,92
grey37 #5e5e5e 94,94,94
grey38 #616161 97,97,97
grey39 #636363 99,99,99
grey40 #666666 102,102,102
grey41 #696969 105,105,105
grey42 #6b6b6b 107,107,107
grey43 #6e6e6e 110,110,110
grey44 #707070 112,112,112
grey45 #737373 115,115,115
grey46 #757575 117,117,117
grey47 #787878 120,120,120
grey48 #7a7a7a 122,122,122
grey49 #7d7d7d 125,125,125
grey50 #7f7f7f 127,127,127
grey51 #828282 130,130,130
grey52 #858585 133,133,133
grey53 #878787 135,135,135
grey54 #8a8a8a 138,138,138
grey55 #8c8c8c 140,140,140
grey56 #8f8f8f 143,143,143
grey57 #919191 145,145,145
grey58 #949494 148,148,148
grey59 #969696 150,150,150
grey60 #999999 153,153,153
grey61 #9c9c9c 156,156,156
grey62 #9e9e9e 158,158,158
grey63 #a1a1a1 161,161,161
grey64 #a3a3a3 163,163,163
grey65 #a6a6a6 166,166,166
grey66 #a8a8a8 168,168,168
grey67 #ababab 171,171,171
grey68 #adadad 173,173,173
grey69 #b0b0b0 176,176,176
grey70 #b3b3b3 179,179,179
grey71 #b5b5b5 181,181,181
grey72 #b8b8b8 184,184,184
grey73 #bababa 186,186,186
grey74 #bdbdbd 189,189,189
grey75 #bfbfbf 191,191,191
grey76 #c2c2c2 194,194,194
grey77 #c4c4c4 196,196,196
grey78 #c7c7c7 199,199,199
grey79 #c9c9c9 201,201,201
grey80 #cccccc 204,204,204
grey81 #cfcfcf 207,207,207
grey82 #d1d1d1 209,209,209
grey83 #d4d4d4 212,212,212
grey84 #d6d6d6 214,214,214
grey85 #d9d9d9 217,217,217
grey86 #dbdbdb 219,219,219
grey87 #dedede 222,222,222
grey88 #e0e0e0 224,224,224
grey89 #e3e3e3 227,227,227
grey90 #e5e5e5 229,229,229
grey91 #e8e8e8 232,232,232
grey92 #ebebeb 235,235,235
grey93 #ededed 237,237,237
grey94 #f0f0f0 240,240,240
grey95 #f2f2f2 242,242,242
grey96 #f5f5f5 245,245,245
grey97 #f7f7f7 247,247,247
grey98 #fafafa 250,250,250
grey99 #fcfcfc 252,252,252
grey100 #ffffff 255,255,255

Weiss-Variationen
Weiss-Variationen
Farbe Farbname # rgb
AntiqueWhite #faebd7 250,235,215
AntiqueWhite1 #ffefdb 255,239,219
AntiqueWhite2 #eedfcc 238,223,204
AntiqueWhite3 #cdc0b0 205,192,176
AntiqueWhite4 #8b8378 139,131,120
FloralWhite #fffaf0 255,250,240
GhostWhite #f8f8ff 248,248,255
NavajoWhite #ffdead 255,222,173
NavajoWhite1 #ffdead 255,222,173
NavajoWhite2 #eecfa1 238,207,161
NavajoWhite3 #cdb38b 205,179,139
NavajoWhite4 #8b795e 139,121,94
OldLace #fdf5e6 253,245,230
WhiteSmoke #f5f5f5 245,245,245
gainsboro #dcdcdc 220,220,220
ivory #fffff0 255,255,240
ivory1 #fffff0 255,255,240
ivory2 #eeeee0 238,238,224
ivory3 #cdcdc1 205,205,193
ivory4 #8b8b83 139,139,131
linen #faf0e6 250,240,230
seashell #fff5ee 255,245,238
seashell1 #fff5ee 255,245,238
seashell2 #eee5de 238,229,222
seashell3 #cdc5bf 205,197,191
seashell4 #8b8682 139,134,130
snow #fffafa 255,250,250
snow1 #fffafa 255,250,250
snow2 #eee9e9 238,233,233
snow3 #cdc9c9 205,201,201
snow4 #8b8989 139,137,137
wheat #f5deb3 245,222,179
wheat1 #ffe7ba 255,231,186
wheat2 #eed8ae 238,216,174
wheat3 #cdba96 205,186,150
wheat4 #8b7e66 139,126,102
white #ffffff 255,255,255

Blau-Variationen
Blau-Variationen
Farbe Farbname # rgb
aliceblue #f0f8ff 240,248,255
blueviolet #8a2be2 138,43,226
cadetblue #5f9ea0 95,158,160
cadetblue1 #98f5ff 152,245,255
cadetblue2 #8ee5ee 142,229,238
cadetblue3 #7ac5cd 122,197,205
cadetblue4 #53868b 83,134,139
cornflowerblue #6495ed 100,149,237
darkblue #00008b 0,0,139
darkcyan #008b8b 0,139,139
darkslateblue #483d8b 72,61,139
darkturquoise #00ced1 0,206,209
deepskyblue #00bfff 0,191,255
deepskyblue1 #00bfff 0,191,255
deepskyblue2 #00b2ee 0,178,238
deepskyblue3 #009acd 0,154,205
deepskyblue4 #00688b 0,104,139
dodgerblue #1e90ff 30,144,255
dodgerblue1 #1e90ff 30,144,255
dodgerblue2 #1c86ee 28,134,238
dodgerblue3 #1874cd 24,116,205
dodgerblue4 #104e8b 16,78,139
lightblue #add8e6 173,216,230
lightblue1 #bfefff 191,239,255
lightblue2 #b2dfee 178,223,238
lightblue3 #9ac0cd 154,192,205
lightblue4 #68838b 104,131,139
lightcyan #e0ffff 224,255,255
lightcyan1 #e0ffff 224,255,255
lightcyan2 #d1eeee 209,238,238
lightcyan3 #b4cdcd 180,205,205
lightcyan4 #7a8b8b 122,139,139
lightskyblue #87cefa 135,206,250
lightskyblue1 #b0e2ff 176,226,255
lightskyblue2 #a4d3ee 164,211,238
lightskyblue3 #8db6cd 141,182,205
lightskyblue4 #607b8b 96,123,139
lightslateblue #8470ff 132,112,255
lightsteelblue #b0c4de 176,196,222
lightsteelblue1 #cae1ff 202,225,255
lightsteelblue2 #bcd2ee 188,210,238
lightsteelblue3 #a2b5cd 162,181,205
lightsteelblue4 #6e7b8b 110,123,139
mediumaquamarine #66cdaa 102,205,170
mediumblue #0000cd 0,0,205
mediumslateblue #7b68ee 123,104,238
mediumturquoise #48d1cc 72,209,204
midnightblue #191970 25,25,112
navyblue #000080 0,0,128
paleturquoise #afeeee 175,238,238
paleturquoise1 #bbffff 187,255,255
paleturquoise2 #aeeeee 174,238,238
paleturquoise3 #96cdcd 150,205,205
paleturquoise4 #668b8b 102,139,139
powderblue #b0e0e6 176,224,230
royalblue #4169e1 65,105,225
royalblue1 #4876ff 72,118,255
royalblue2 #436eee 67,110,238
royalblue3 #3a5fcd 58,95,205
royalblue4 #27408b 39,64,139
skyblue #87ceeb 135,206,235
skyblue1 #87ceff 135,206,255
skyblue2 #7ec0ee 126,192,238
skyblue3 #6ca6cd 108,166,205
skyblue4 #4a708b 74,112,139
slateblue #6a5acd 106,90,205
slateblue1 #836fff 131,111,255
slateblue2 #7a67ee 122,103,238
slateblue3 #6959cd 105,89,205
slateblue4 #473c8b 71,60,139
steelblue #4682b4 70,130,180
steelblue1 #63b8ff 99,184,255
steelblue2 #5cacee 92,172,238
steelblue3 #4f94cd 79,148,205
steelblue4 #36648b 54,100,139
aquamarine #7fffd4 127,255,212
aquamarine1 #7fffd4 127,255,212
aquamarine2 #76eec6 118,238,198
aquamarine3 #66cdaa 102,205,170
aquamarine4 #458b74 69,139,116
azure #f0ffff 240,255,255
azure1 #f0ffff 240,255,255
azure2 #e0eeee 224,238,238
azure3 #c1cdcd 193,205,205
azure4 #838b8b 131,139,139
blue #0000ff 0,0,255
blue1 #0000ff 0,0,255
blue2 #0000ee 0,0,238
blue3 #0000cd 0,0,205
blue4 #00008b 0,0,139
cyan #00ffff 0,255,255
cyan1 #00ffff 0,255,255
cyan2 #00eeee 0,238,238
cyan3 #00cdcd 0,205,205
cyan4 #008b8b 0,139,139
navy #000080 0,0,128
turquoise #40e0d0 64,224,208
turquoise1 #00f5ff 0,245,255
turquoise2 #00e5ee 0,229,238
turquoise3 #00c5cd 0,197,205
turquoise4 #00868b 0,134,139

Braun-Variationen
Braun-Variationen
Farbe Farbname # rgb
RosyBrown #bc8f8f 188,143,143
RosyBrown1 #ffc1c1 255,193,193
RosyBrown2 #eeb4b4 238,180,180
RosyBrown3 #cd9b9b 205,155,155
RosyBrown4 #8b6969 139,105,105
SaddleBrown #8b4513 139,69,19
SandyBrown #f4a460 244,164,96
beige #f5f5dc 245,245,220
brown #a52a2a 165,42,42
brown1 #ff4040 255,64,64
brown2 #ee3b3b 238,59,59
brown3 #cd3333 205,51,51
brown4 #8b2323 139,35,35
burlywood #deb887 222,184,135
burlywood1 #ffd39b 255,211,155
burlywood2 #eec591 238,197,145
burlywood3 #cdaa7d 205,170,125
burlywood4 #8b7355 139,115,85
chocolate #d2691e 210,105,30
chocolate1 #ff7f24 255,127,36
chocolate2 #ee7621 238,118,33
chocolate3 #cd661d 205,102,29
chocolate4 #8b4513 139,69,19
peru #cd853f 205,133,63
tan #d2b48c 210,180,140
tan1 #ffa54f 255,165,79
tan2 #ee9a49 238,154,73
tan3 #cd853f 205,133,63
tan4 #8b5a2b 139,90,43

Gelb-Variationen
Gelb-Variationen
Farbe Farbname # rgb
BlanchedAlmond #ffebcd 255,235,205
DarkGoldenrod #b8860b 184,134,11
DarkGoldenrod1 #ffb90f 255,185,15
DarkGoldenrod2 #eead0e 238,173,14
DarkGoldenrod3 #cd950c 205,149,12
DarkGoldenrod4 #8b6508 139,101,8
LemonChiffon #fffacd 255,250,205
LemonChiffon1 #fffacd 255,250,205
LemonChiffon2 #eee9bf 238,233,191
LemonChiffon3 #cdc9a5 205,201,165
LemonChiffon4 #8b8970 139,137,112
LightGoldenrod #eedd82 238,221,130
LightGoldenrod1 #ffec8b 255,236,139
LightGoldenrod2 #eedc82 238,220,130
LightGoldenrod3 #cdbe70 205,190,112
LightGoldenrod4 #8b814c 139,129,76
LightGoldenrodYellow #fafad2 250,250,210
LightYellow #ffffe0 255,255,224
LightYellow1 #ffffe0 255,255,224
LightYellow2 #eeeed1 238,238,209
LightYellow3 #cdcdb4 205,205,180
LightYellow4 #8b8b7a 139,139,122
PaleGoldenrod #eee8aa 238,232,170
PapayaWhip #ffefd5 255,239,213
cornsilk #fff8dc 255,248,220
cornsilk1 #fff8dc 255,248,220
cornsilk2 #eee8cd 238,232,205
cornsilk3 #cdc8b1 205,200,177
cornsilk4 #8b8878 139,136,120
gold #ffd700 255,215,0
gold1 #ffd700 255,215,0
gold2 #eec900 238,201,0
gold3 #cdad00 205,173,0
gold4 #8b7500 139,117,0
goldenrod #daa520 218,165,32
goldenrod1 #ffc125 255,193,37
goldenrod2 #eeb422 238,180,34
goldenrod3 #cd9b1d 205,155,29
goldenrod4 #8b6914 139,105,20
moccasin #ffe4b5 255,228,181
yellow #ffff00 255,255,0
yellow1 #ffff00 255,255,0
yellow2 #eeee00 238,238,0
yellow3 #cdcd00 205,205,0
yellow4 #8b8b00 139,139,0


Grün-Variationen
Grün-Variationen
Farbe Farbname # rgb
Farbe Farbname # rgb
DarkGreen #006400 0,100,0
DarkKhaki #bdb76b 189,183,107
DarkOliveGreen #556b2f 85,107,47
DarkOliveGreen1 #caff70 202,255,112
DarkOliveGreen2 #bcee68 188,238,104
DarkOliveGreen3 #a2cd5a 162,205,90
DarkOliveGreen4 #6e8b3d 110,139,61
DarkSeaGreen #8fbc8f 143,188,143
DarkSeaGreen1 #c1ffc1 193,255,193
DarkSeaGreen2 #b4eeb4 180,238,180
DarkSeaGreen3 #9bcd9b 155,205,155
DarkSeaGreen4 #698b69 105,139,105
ForestGreen #228b22 34,139,34
GreenYellow #adff2f 173,255,47
LawnGreen #7cfc00 124,252,0
LightGreen #90ee90 144,238,144
LightSeaGreen #20b2aa 32,178,170
LimeGreen #32cd32 50,205,50
MediumSeaGreen #3cb371 60,179,113
MediumSpringGreen #00fa9a 0,250,154
MintCream #f5fffa 245,255,250
OliveDrab #6b8e23 107,142,35
OliveDrab1 #c0ff3e 192,255,62
OliveDrab2 #b3ee3a 179,238,58
OliveDrab3 #9acd32 154,205,50
OliveDrab4 #698b22 105,139,34
PaleGreen #98fb98 152,251,152
PaleGreen1 #9aff9a 154,255,154
PaleGreen2 #90ee90 144,238,144
PaleGreen3 #7ccd7c 124,205,124
PaleGreen4 #548b54 84,139,84
SeaGreen #2e8b57 46,139,87
SeaGreen1 #54ff9f 84,255,159
SeaGreen2 #4eee94 78,238,148
SeaGreen3 #43cd80 67,205,128
SeaGreen4 #2e8b57 46,139,87
SpringGreen #00ff7f 0,255,127
SpringGreen1 #00ff7f 0,255,127
SpringGreen2 #00ee76 0,238,118
SpringGreen3 #00cd66 0,205,102
SpringGreen4 #008b45 0,139,69
YellowGreen #9acd32 154,205,50
chartreuse #7fff00 127,255,0
chartreuse1 #7fff00 127,255,0
chartreuse2 #76ee00 118,238,0
chartreuse3 #66cd00 102,205,0
chartreuse4 #458b00 69,139,0
green #00ff00 0,255,0
green1 #00ff00 0,255,0
green2 #00ee00 0,238,0
green3 #00cd00 0,205,0
green4 #008b00 0,139,0
khaki #f0e68c 240,230,140
khaki1 #fff68f 255,246,143
khaki2 #eee685 238,230,133
khaki3 #cdc673 205,198,115
khaki4 #8b864e 139,134,78

Orange-Variationen
Orange-Variationen
Farbe Farbname # rgb
Farbe Farbname # rgb
DarkOrange #ff8c00 255,140,0
DarkOrange1 #ff7f00 255,127,0
DarkOrange2 #ee7600 238,118,0
DarkOrange3 #cd6600 205,102,0
DarkOrange4 #8b4500 139,69,0
DarkSalmon #e9967a 233,150,122
LightCoral #f08080 240,128,128
LightSalmon #ffa07a 255,160,122
LightSalmon1 #ffa07a 255,160,122
LightSalmon2 #ee9572 238,149,114
LightSalmon3 #cd8162 205,129,98
LightSalmon4 #8b5742 139,87,66
PeachPuff #ffdab9 255,218,185
PeachPuff1 #ffdab9 255,218,185
PeachPuff2 #eecbad 238,203,173
PeachPuff3 #cdaf95 205,175,149
PeachPuff4 #8b7765 139,119,101
bisque #ffe4c4 255,228,196
bisque1 #ffe4c4 255,228,196
bisque2 #eed5b7 238,213,183
bisque3 #cdb79e 205,183,158
bisque4 #8b7d6b 139,125,107
coral #ff7f50 255,127,80
coral1 #ff7256 255,114,86
coral2 #ee6a50 238,106,80
coral3 #cd5b45 205,91,69
coral4 #8b3e2f 139,62,47
honeydew #f0fff0 240,255,240
honeydew1 #f0fff0 240,255,240
honeydew2 #e0eee0 224,238,224
honeydew3 #c1cdc1 193,205,193
honeydew4 #838b83 131,139,131
orange #ffa500 255,165,0
orange1 #ffa500 255,165,0
orange2 #ee9a00 238,154,0
orange3 #cd8500 205,133,0
orange4 #8b5a00 139,90,0
salmon #fa8072 250,128,114
salmon1 #ff8c69 255,140,105
salmon2 #ee8262 238,130,98
salmon3 #cd7054 205,112,84
salmon4 #8b4c39 139,76,57
sienna #a0522d 160,82,45
sienna1 #ff8247 255,130,71
sienna2 #ee7942 238,121,66
sienna3 #cd6839 205,104,57
sienna4 #8b4726 139,71,38


Rot-Variationen
Rot-Variationen
Farbe Farbname # rgb
Farbe Farbname # rgb
DarkRed #8b0000 139,0,0
DeepPink #ff1493 255,20,147
DeepPink1 #ff1493 255,20,147
DeepPink2 #ee1289 238,18,137
DeepPink3 #cd1076 205,16,118
DeepPink4 #8b0a50 139,10,80
HotPink #ff69b4 255,105,180
HotPink1 #ff6eb4 255,110,180
HotPink2 #ee6aa7 238,106,167
HotPink3 #cd6090 205,96,144
HotPink4 #8b3a62 139,58,98
IndianRed #cd5c5c 205,92,92
IndianRed1 #ff6a6a 255,106,106
IndianRed2 #ee6363 238,99,99
IndianRed3 #cd5555 205,85,85
IndianRed4 #8b3a3a 139,58,58
LightPink #ffb6c1 255,182,193
LightPink1 #ffaeb9 255,174,185
LightPink2 #eea2ad 238,162,173
LightPink3 #cd8c95 205,140,149
LightPink4 #8b5f65 139,95,101
MediumVioletRed #c71585 199,21,133
MistyRose #ffe4e1 255,228,225
MistyRose1 #ffe4e1 255,228,225
MistyRose2 #eed5d2 238,213,210
MistyRose3 #cdb7b5 205,183,181
MistyRose4 #8b7d7b 139,125,123
OrangeRed #ff4500 255,69,0
OrangeRed1 #ff4500 255,69,0
OrangeRed2 #ee4000 238,64,0
OrangeRed3 #cd3700 205,55,0
OrangeRed4 #8b2500 139,37,0
PaleVioletRed #db7093 219,112,147
PaleVioletRed1 #ff82ab 255,130,171
PaleVioletRed2 #ee799f 238,121,159
PaleVioletRed3 #cd6889 205,104,137
PaleVioletRed4 #8b475d 139,71,93
VioletRed #d02090 208,32,144
VioletRed1 #ff3e96 255,62,150
VioletRed2 #ee3a8c 238,58,140
VioletRed3 #cd3278 205,50,120
VioletRed4 #8b2252 139,34,82
firebrick #b22222 178,34,34
firebrick1 #ff3030 255,48,48
firebrick2 #ee2c2c 238,44,44
firebrick3 #cd2626 205,38,38
firebrick4 #8b1a1a 139,26,26
pink #ffc0cb 255,192,203
pink1 #ffb5c5 255,181,197
pink2 #eea9b8 238,169,184
pink3 #cd919e 205,145,158
pink4 #8b636c 139,99,108
red #ff0000 255,0,0
red1 #ff0000 255,0,0
red2 #ee0000 238,0,0
red3 #cd0000 205,0,0
red4 #8b0000 139,0,0
tomato #ff6347 255,99,71
tomato1 #ff6347 255,99,71
tomato2 #ee5c42 238,92,66
tomato3 #cd4f39 205,79,57
tomato4 #8b3626 139,54,38

Violett-Variationen
Violett-Variationen
Farbe Farbname # rgb
Farbe Farbname # rgb
DarkMagenta #8b008b 139,0,139
DarkOrchid #9932cc 153,50,204
DarkOrchid1 #bf3eff 191,62,255
DarkOrchid2 #b23aee 178,58,238
DarkOrchid3 #9a32cd 154,50,205
DarkOrchid4 #68228b 104,34,139
DarkViolet #9400d3 148,0,211
LavenderBlush #fff0f5 255,240,245
LavenderBlush1 #fff0f5 255,240,245
LavenderBlush2 #eee0e5 238,224,229
LavenderBlush3 #cdc1c5 205,193,197
LavenderBlush4 #8b8386 139,131,134
MediumOrchid #ba55d3 186,85,211
MediumOrchid1 #e066ff 224,102,255
MediumOrchid2 #d15fee 209,95,238
MediumOrchid3 #b452cd 180,82,205
MediumOrchid4 #7a378b 122,55,139
MediumPurple #9370db 147,112,219
MediumPurple1 #ab82ff 171,130,255
MediumPurple2 #9f79ee 159,121,238
MediumPurple3 #8968cd 137,104,205
MediumPurple4 #5d478b 93,71,139
lavender #e6e6fa 230,230,250
magenta #ff00ff 255,0,255
magenta1 #ff00ff 255,0,255
magenta2 #ee00ee 238,0,238
magenta3 #cd00cd 205,0,205
magenta4 #8b008b 139,0,139
maroon #b03060 176,48,96
maroon1 #ff34b3 255,52,179
maroon2 #ee30a7 238,48,167
maroon3 #cd2990 205,41,144
maroon4 #8b1c62 139,28,98
orchid #da70d6 218,112,214
orchid1 #ff83fa 255,131,250
orchid2 #ee7ae9 238,122,233
orchid3 #cd69c9 205,105,201
orchid4 #8b4789 139,71,137
plum #dda0dd 221,160,221
plum1 #ffbbff 255,187,255
plum2 #eeaeee 238,174,238
plum3 #cd96cd 205,150,205
plum4 #8b668b 139,102,139
purple #a020f0 160,32,240
purple1 #9b30ff 155,48,255
purple2 #912cee 145,44,238
purple3 #7d26cd 125,38,205
purple4 #551a8b 85,26,139
thistle #d8bfd8 216,191,216
thistle1 #ffe1ff 255,225,255
thistle2 #eed2ee 238,210,238
thistle3 #cdb5cd 205,181,205
thistle4 #8b7b8b 139,123,139
violet #ee82ee 238,130,238

Inspiration von http://www.farb-tabelle.de