CODE–Knacker

Lexikon der Codes - Symbole - Kurzzeichen


HTML-CODIERUNG

HTML5-LogoHTML = Hypertext Markup Language ist die Abkürzung für die Seitenbeschreibungssprache auf der alle im World Wide Web des Internets aufrufbaren Webseiten aufbauen.

Falls Ihnen eine besonders gelungene Homepage zusagt, so schauen Sie sich doch einfach einmal den Quelltext so einer Seite an. Rechte Maustaste betätigen und mit der linken Maustaste "Quelltext anzeigen" anklicken. Gehen Sie anschließend im nunmehr geöffneten Editor auf "Suchen" und geben den zu suchenden Begriff im neu geöffneten Fenster ein.

Falls Sie bisher auf bequeme Weise Ihre Homepage mit einem HTML-Editor (spezielles Hilfsprogramm zur Erstellung von Homepages) erstellt haben, dieser jedoch bestimmte nachträgliche Änderungen nicht zulässt, so versuchen Sie es doch einmal manuell in der zuvor beschriebenen Weise.

An dieser Stelle eine Auswahl der bedeutendsten Tags (das sind Zeichenketten, die Anweisungen enthalten, den nachfolgenden Text in einer bestimmten Weise darzustellen), die von den meisten Browsern (Software die HTML-Seiten korrekt darstellen kann) verstanden werden, mit der Sie Ihre Homepage aufpeppen oder aktualisieren können:

 

Seitenbeschreibungs-Tags für HTML5-Seiten
< Tags stehen immer in eckigen Klammern >
(Quelle der Tags: https://www.w3.org/TR/html5/)
HTML5-Seitenstrukturierung

<!doctype html>
<html>
<head> <meta charset="UTF-8">
<title>Seitentitel</title>
</head>
<body>
<header>
<img src="logo.png" loading="lazy" alt="Logo"> <nav>
<h1>Navigation</h1>
</nav>
</header>
<main>
<article>
<h1> Hauptüberschrift 1.Ordnung </h1>
<section>
<h2> Unterüberschrift 2.Ordnung </h2>
</section>
<section>
<h2> Unterüberschrift 2. Ordnung </h2>
<p> 1. Absatz</p>
<p> 2. Absatz</p>
</section> </main>
<footer>
<p>Impressum</p>
</footer>
</article>
</body>
</html>
<!doctype html> Dokumenttyp-Deklarationen für HTML5-Seiten. Diese Auszeichnung muss zwingend an erster Stelle stehen.
Sie stellt sicher, dass der Browser die richtige Interpretation entsprechend der Spezifikation vornimmt und somit eine Seite richtig darstellen kann.
<html> … </html> Diese Tags am Anfang und Ende eines Dokuments teilen dem Browser mit, dass es sich um ein HTML-Dokument handelt.
HTML = Hypertext Markup Language (engl. für: Hypertext-Auszeichnungssprache)
<head> … </head> Im "head" (Kopfdaten) stehen die Metadaten/Dokumentinformationen für die betreffende Seite.
z. B. der zugrunde liegende Zeichencodierung wie <META CHARSET="UTF-8"> für den derzeitigen Website-Standard Unicode UTF-8.
Weitere Standard-Metadatennamen:
autor (Name des Seitenautors), description (Beschreibung des Seiteninhalts. 60 bis 170 Zeichen. Wichtig für Suchmaschinen!),
keywords (etwa 5, durch Kommas getrennte Schlüsselwörter angeben, die den Seitentext widerspiegeln.)
Im "head" stehen außerdem die Links zu externen Seiten wie das Stylesheet (CSS)
<link rel="stylesheet" href="styles.css" media="screen" />.
In Stylesheets werden zentral Angaben zum Bildschirm- und Druckdesign vorgenommen.
Hierzu gehören Formatierungen von Farben, Schriftarten, Schriftgrößen, das Aussehen und die Positionierung von Boxen, Rahmen oder Tabellen oder das Browserverhalten bei unterschiedlichen Monitorgrößen (Desktop, Tablets, Smartphones).
Letztendlich steht hier auch der Seitentitel mit bis zu 70 Zeichen <title> … </title>.
<body> … </body> Definiert werden Anfang und Ende des Inhaltsbereiches, der im Browser zu sehen ist.
<header> … </header> Mit dem <header>-Element werden einleitende Elemente wie das Firmenlogo ausgezeichnet.
Hier kann auch die Seitennavigation <nav> eingefügt werden.
<article> … </article> Das <article> -Element kennzeichnet einen vollständig oder in sich geschlossene Zusammensetzung in eine Webseite.
<section> … </section> Das <article> - Element wird in verschiedene <section>-Abschnitte unterteilt.
Die thematische Gruppierung wird üblicherweise mit h1 bis h6-Überschriften vorgenommen.
<nav> … </nav> Mit <nav> wird über Links die Seitennavigation vorgenommen.
<aside> … </aside> Im <aside>-Bereich werden ergänzende bzw. unwichtigere Angaben wie Archiv, Kategorien oder Werbebanner untergebracht.
Bei einer responsive aufgebauten Website wird unter Umständen auf Smartphones dieser Auszeichnungsbereich ausgeblendet.
Beispiel für die Browseranweisung: @media only screen and (min-width: 400px) and (max-width: 800px)
<footer> … </footer> Die Fußzeile gilt als Informationsbereich z. B. für das Impressum, Kontaktinfos, Nutzungsbedingungen oder der Copyrightvermerk.
<address> … </address> Adress-Element für Kontaktinformationen.
Gruppierung von Inhalten
<p> … </p> Textabsatz (paragraph). Mit <p> beginnt ein Absatz, mit </p> endet ein Absatz.
<hr>  Kein End-Tag! Trennlinie (horizontal ruler) die einen Themenwechsel anzeigt.
<pre> … </pre> Mit <pre> wird Text vorformatiert (preformated) dargestellt. Der vom Autor zwischen <pre> … </p> eingegebene Text wird einschließlich aller Leerzeichen, Zeilenumbrüche vom Browser in einer Festbreitenschrift angezeigt.
Beispiel: Siehe erste Tabellenzelle oben.
<blockquote> … </blockquote> Inhalt/Zitat einer fremden Quelle, die vom Browser meistens als eingerückter Absatz (block), manchmal auch mit Anführungszeichen (quote) an „Anfang an Ende“ dargestellt werden.
<ol> … </ol> Mit dem <ol>-Element (ordered list) wird eine sortierte, nummerierte Liste mit den Elementen <li> (list item) ausgezeichnet.
<ol>
 <li>1. … </li>
 <li>2. … </li>
 <li>3. … </li>
</ol>
<ul> … </ul> Mit dem <ul>-Element (unordered list) wird eine unsortierte Liste mit den Elementen <li> (list item) ausgezeichnet.
<ul>
 <li>• … </li>
 <li>• … </li>
 <li>• … </li>
</ul>
<dl> … </dl>

  <dt> … </dt>

  <dd> … </dd>
Eine Definitionsliste <dl> (definition list) wird z. B.  für lexikalische Aufzählungen oder Glossare <dt> (description list term ) mit entsprechend eingerückten Erläuterungen bzw. Bedeutungen <dd> (description list data) verwendet.
Siehe folgenden Code und anschließend, wie dieser im Browser zu sehen ist.
<dl>
 <dt>α/dt>
 <dd>Alpha</dd>
 <dt>β</dt>
 <dd>Beta</dd>
 <dt>γ</dt>
 <dd>Gamma/dd>
</dl>
Darstellung im Browser:
α
Alpha
β
Beta
γ
Gamma
<figure> … </figure>

<figcaption> … </figcaption>
Das <figure>-Element ist dafür vorgesehen, Bilder, Grafiken, Diagramme, Videos oder Textpassagen zusammenzufassen und mit einem eleganten Rahmen zu versehen.
Bildunterschriften/Untertitel können mit <figcaption> innerhalb der <figure> … </figure>-Elemente ergänzt werden.
Beispiel: Siehe unten folgende Animation "RBG-Farbsystem"
<div> … </div> Das <div>-Element (division) stellt lediglich einen allgemeinen Bereich dar, der beispielsweise Text, Bilder, Grafiken oder Diagramme in einen gemeinsamen Bereich umschließt und kann somit für stilistische Zwecke verwendet werden.
<main> … </main> Mit dem <main>-Element wird der Hauptinhaltsbereich ausgezeichnet, der das zentrale Thema einer Seite umschließt. Damit wird Benutzerprogrammen mit Tastatur-Navigation eine leichtere Navigation ermöglicht. So können Screenreader (Bildschirmleser) den relevanten Inhaltsbereich (ohne Kopf-, Navigations-, Seiten- oder Fußbereiche, Suchfenster oder Werbeblöcke) exakt identifizieren und damit ist <main> ein wichtiges Hilfsmittel in Sachen Barrierefreiheit.

Hinweis! Aber auch ohne dem <main>-Auszeichnungselement wird bei einer semantisch korrekt aufgebauten und auf validen Code geprüften Website (siehe Link unterhalb dieser Tabelle) die Nutzung durch Geräte bzw. Software die der Barrierefreiheit dienen, problemlos möglich sein.
Textauszeichnungen
<a> … </a> Mit dem <a>-Element (anchor) werden Hyperlinks (kurz: links), oder Anker zu anderen Internetseiten (mit dem Transportprotokoll https://) oder innerhalb einer Website zu anderen Unterseiten, Bildern oder zur Navigation ausgezeichnet. Standardmäßig wird diese Art von Verweisen mit einem Unterstrich in blauer Schriftfarbe dargestellt.
Beispiele:
<a href="https://www.extern.de/"> Externer Hyperlink</a>
Externer Hyperlink
<a href="./intern.html"> Interner Hyperlink</a>

Interner Hyperlink

Hinweis! Anstelle von von .html ist auch .htm möglich.
<em> … </em> Das vom <em>-Element (emphasized) eingeschlossene Wort (oder Text) soll dieses besonders betonen und wird grundsätzlich kursiv dargestellt.
<strong> … </strong> Das vom <strong>-Element (strong emphasized) eingeschlossene Wort (oder Text) soll Wichtigkeit, starke Bedeutung, Ernsthaftigkeit oder Dringlichkeit widerspiegeln und wird fett dargestellt.
<small> … </small> Weniger bedeutender Text wie Kommentare, alles "Kleingedruckte" wird mit <small> ausgezeichnet.
Das Schriftbild wird kleiner als der normale Fließtext ausgegeben, ist aber abhängig von der Browservoreinstellung.
Diese Website benutzt das <small>-Element für die Kennzeichnung von Quellenangaben.
Weiteres Beispiel: Preis 3,95 € (Betrag incl. 19 % MwSt)
<s> … </s> Mit dem  <s>-Element (stroke) wird nicht mehr gültiger oder relevanter Text als durchgestrichener Text dargestellt.
Hinweis! Für gelöschten Text ist das <del>-Element zu verwenden.
<cite> … </cite> Das <cite>-Element dient als Verweis zu einer fremden, kreativen Arbeit und dem Namen des betreffenden Autors (Person, Personen oder Organisation) und/oder einer URL-Referenz.
So stellt Ihr Browser einen Cite-Verweis dar.
<q> … </q> Mit dem <q>-Element (quote) werden Zitate (z. B. ein bekannter Ausspruch, ein geflügeltes Wort, eine Textstelle) ausgezeichnet.
So stellt Ihr Browser ein Zitat dar.
Hinweis! Die Anführungszeichen werden automatisch gesetzt.
<dfn> … </dfn> Das <dfn>-Element (definition) steht für Definition und wird verwendet, um einen Teil eines Fließtextes als Definition auszuweisen.
Die betreffende Textpassage wird vom Browser kursiv dargestellt.
Hinweis! Ganze Definitionslisten werden mit <dl> … </dl> (siehe weiter oben) ausgezeichnet.
<abbr> … </abbr> Mit dem <abbr>-Element (abbreviation ) im Fließtext sind mit <abbr> ausgezeichnete Abkürzungen an einer Unterpunktion zu erkennen. Zeigt die Maus (Mouse over) auf die betreffende Abkürzung, wird über das <title>-Attribut die Langform als Tooltip angezeigt.
Beispiel:<abbr title="Allradantrieb"4X4</abbr>      4X4
<data> … </data>
<time> … </time>
Mit diesen Elementen werden Datum- oder zeitbezogene Inhalte für Computer lesbar gemacht.
Beispiel: <time>2016-09</time>
<code> … </code> Der mit dem <code>-Element eingeschlossene Text enthält zu Erklärungszwecken nicht auszuführenden HTML-Quellcode (so wie in der nebenstehenden linken Spalte).
<var> … </var> Das  <var>-Element (variable) definiert eine Variable (Platzhalter für eine Zahl) wie beispielsweise einen mathematischen Ausdruck, Symbol für eine physikalische Größe oder Konstanten. Die Variable wird kursiv dargestellt.
Beispiel:<var>a<var> + <var>b<var> = <var>c</var>      a + b = c
<samp> … </samp> Mit dem <samp>-Element (sample) wird Text als Beispiel markiert und, abhängig vom Browser, unterschiedlich dargestellt.
Beispiel: Bitte nur Primzahlen, wie 2,3,5,7,11,13 usw. eintragen.
<kbd> … </kbd> Mit dem <kbd>-Element (keyboard) wird eine Aufforderung zur Benutzereingabe über die Tastatur o. ä. ausgezeichnet.
Beispiel: Bitte wählen Sie "Ja" oder "Nein" aus.
<sub> … </sup> Mit dem <sub>-Element (subscript) wird ein Teil einer Zahl, eines Wortes oder eines Textes tiefgestellt.
Beispiele: ABmin, H2O (mit Unicode-Zeichen: H₂O)
Für einige tiefgestellte Zahlen existieren Unicode-Zeichen. Falls vorhanden, sollten diese verwendet werden.
<sup> … </sup> Mit dem <sup>-Element (superscript) wird ein Teil einer Zahl, eines Wortes oder eines Textes hochgestellt.
Beispiele: ABmax, m2 (mit Unicode-Zeichen: m²)
Für einige hochgestellte Zahlen existieren Unicode-Zeichen. Falls vorhanden, sollten diese verwendet werden.
<i> … </i> Nach dem Willen der HTML5-Spezifikation soll das <i>-Element (italic) für Texte oder Begriffe in einer anderen Sprache oder Stimmung, technische Begriffe, Redewendungen aus einer anderen Sprache, Transliterationen, Gedanken oder für Schiffsnamen verwendet werden.
Ein so markierte Text wird in der Regel kursiv dargestellt.
<b> … </b> Mit dem <b>-Element (bold) werden stilistisch Textteile hervorgehoben, die aber keine besondere Bedeutung haben. Die HTML5-Spezifikation nennt hierzu beispielsweise Schlüsselwörter oder Produktnamen in einer Bewertung.
Ein so markierter Text wird in der Regel fett dargestellt.
<u> … </u> Das <u>-Element (underline) dient zum Unterstreichen eines falsch geschriebenen Woortes oder Eigennamen in chinesischem Text.
<mark> … </mark> Das  <mark>-Element markiert ein Wort oder Textstelle oder hebt ein Wort oder eine Textstelle zu Referenzzwecken hervor. So können auf diese Weise auch Wörter in einer Suchliste, die zu einem Suchbegriff passen, leicht auffindbar hervorgehoben werden.
Der markierte Bereich erinnert an eine Markierung mit einem Textmarker.
<ruby> … </ruby>
<rb> … </rb>
<rt> … </rt>
<rtc> … </rtc>
<rp> … </rp>
Mit den nebenstehenden <ruby>-Annotationen werden ausschließlich Erklärungen bezüglich der Aussprache und Bedeutung von chinesischen und japanischen Schriftzeichen ausgezeichnet.
<bdi> … </bdi> Das <bdi>-Element (Bi-direktionale Isolation) kennzeichnet einen Textabschnitt, der in eine andere Richtung als der ihn umgebene Text dargestellt wird. Das könnte Text sein, der in einer anderen Schreibrichtung formatiert worden ist.
<bdo> … </bdo> Das <bdo>-Element (bidirectional overwrite)  wird eingesetzt, die Textrichtung innerhalb eines Fließtextes zu ändern bzw.zu überschreiben.
Das geschieht mit den dir-Attributen (direction) "ltr" (für left-to-right) oder "rtl" (right-to-left ).
Beispiel:<bdo dir="rtl">GRAS</bdo> = GRAS
<span> … </span> Das <span>-Element (im Sinne von "überspannen") bewirkt nur in Zusammenhang mit CSS-Formatierungen eine Wirkung.
So kann z. B. ein Textbereich farbig gestaltet werden:
Das Haus wurde <span style="color:green"> grün </span>gestrichen.
Das Haus wurde grün gestrichen.
<br>  Kein End-Tag! Das   <br>-Element (break) erzwingt einen Zeilenumbruch. Somit beginnt ein folgender Text in einer neuen Zeile.
<wbr> Kein End-Tag! Mit dem <wbr>-Element (word break) kann innerhalb eines (langen) Wortes eine mögliche Trennung markiert (es wird kein Trennstrich eingefügt!) werden sobald die Monitorbreite nicht mehr ausreicht.

Hinweis! Vorzuziehen ist die automatische CSS-Worttrennungsmethode "hyphens: auto;" mit Trennstrich.
Andere
<ins> … </ins>
<del> … </del>
Bei diesen Elementen handelt es sich um Änderungsmarkierungen.
Mit dem <ins>-Element (inserted) wird zum bestehenden Text neuer Text hinzugefügt,
Mit dem <del>-Element (deleted) wird Text für nicht mehr gültig markiert.

Beispiel: Man soll Äpfel nicht mit Bananen Birnen vergleichen.

Hinweis! Um Änderungen nachvollziehbar zu machen, wird vom Browser ungültiger Text durchgestrichen und neu eingefügter Text unterstrichen dargestellt.
<div style="text-align:center">
oder
<p style="text-align:center">
Mit der CSS-Eigenschaft "text-align:center" wird der Inhalt des Elements zentriert.
<p style="text-align:center">Text wird zentriert dargestellt.</p> 

Text wird zentriert dargestellt.

<img src="Dateiname.xyz"> Fügt eine Grafik (image) ein. Üblich sind Grafiken mit den Dateiendungen .gif. png. jpg.
Neben den Abmessungen sollte unbedingt das <alt>-Attribut (alternative text) mit einer sinnvollen Grafikbeschreibung vorhanden sein. Damit wird gewährleistet, dass bei Geräten ohne Grafikanzeigen (Suchmaschinen, Browser für Blinde) oder bei deaktivierter Bildanzeige im Browser ein alternativer Text zum Bild vorhanden ist.
Beispiel:
<img src="link.gif" height="12" width="12" loading="lazy" alt="Link"> Link
<p style="text-decoration:underline">
<p style="text-decoration:overline">
<p style="text-decoration:overline underline">

Unterstrichener Text

Text mit Überstrich

Text mit Über- und Unterstrich

<!-- Kommentar --> Mit dieser Syntax können im HTML-Code Erläuterungen (z. B. ein Änderungsdatum) vorgenommen werden.
Der Code mit dem eingefügten Text wird automatisch in grüner Schrift dargestellt und ist im Browser nicht sichtbar.
Schriftzeichen (Auswahl)
&Oslash; Ø (Durchschnitt)
&frac14; ¼
&frac12;  ½
&frac34; ¾
&frac16;
&frac18;
&micro; µ (Mikro)
&permil; ‰ (Promille)
&sim; ~ (Tilde)
&infin; ∞ (unendlich)
&asymp; ≈ (ungefähr, annähernd)
&times; × (Multiplikation)
&divide; ÷ (Division)
&copy; © (Copyright)
&sum; ∑ (Summe, Sigma)
&#9760; ☠  (Totenkopfsymbol)
&spades; ♠ (Spielkartenfarbe Pik)
&clubs; ♣ (Spielkartenfarbe Kreuz)
&hearts;  ♥ (Spielkartenfarbe Herz)
&diams; ♦ (Spielkartenfarbe Karo)  Link weitere html-Entities
Farbnamen (Auswahl)
#0000FFFarbe: Blau (rgb-Schema: 0,0,255)
#00FF00Farbe: Limone (rgb-Schema: 0,255,0)
#00FFFFFarbe: Wasser, Cyan (rgb-Schema: 0,255,255)
#228B22Farbe: Waldgrün (rgb-Schema: 34,139,34)
#87CEFAFarbe: Hellhimmelblau (rgb-Schema: 135,206,250)
#D2B48CFarbe: Hautfarben (rgb-Schema: 210,180,140)
#DA70D6Farbe: Orchidee (rgb-Schema: 218,112,214)
#E6E6FAFarbe: Lavendel (rgb-Schema: 0,230,230)
#FFFFF0Farbe: Elfenbein (rgb-Schema: 255,255,240)
#F0D58CFarbe: Khaki (rgb-Schema: 240,213,140)
#FAF0E6Farbe: Leinen (rgb-Schema: 250,240,230)
#F5F5DCFarbe: Beige (rgb-Schema: 245,245,215)
#FF00FFFarbe: Magenta / Fuchsia (rgb-Schema: 255,0,255)
#FF69B4Farbe: Knallrosa (rgb-Schema: 255,105,180)
#FFAA05Farbe: Orange (rgb-Schema: 255,170,5)
#FFD700Farbe: Gold (rgb-Schema: 255,215,0)
#FFF5EEFarbe: Muschelweiß (rgb-Schema: 255,245,238)
#FFFFFFFarbe: Weiß (rgb-Schema: 000,000,000)
Diese hexadezimale Farbdarstellung entspricht dem Farbschema bzw. rgb-Schemacode #RRGGBB (auch: #rrggbb).
RR = Rot-Anteile     GG= Grün-Anteile     BB= Blau-Anteile

Pro Farbe können 16x16=256 Farbnuancen dargestellt werden
Mit den drei Farbwerten RRGGBB können somit 256x256x256 = 16.777.216 Farben (true color) dargestellt werden.
RGB-Farbsystem
RGB-Farbsystem

 

👉 Was heißt Hexadezimal?
Der Begriff setzt sich aus dem Griechischen "hexa" für "sechs" und dem Lateinischen "decem" für "zehn" zusammen und kennzeichnet damit die Basiszahl 16 für dieses Zahlensystems.
(Das Dezimalsystem verwendet die Basiszahl 10 - das Binärsystem/Dualsystem die Basiszahl 2, nämlich die Ziffern 0 und 1).
Es werden die Ziffern 0 bis 9 und die Buchstaben A bis F für die Darstellung der dezimalen Ziffern 10 bis 15 verwendet. A = 10, B =11, C = 12, D = 13, E = 14, F = 15).
Jetzt ist auch das Rätsel gelöst, warum im Farbschema nur die Buchstaben A bis F verwendet werden.

Link Auf der w3-Website kann valider (zulässiger) Code geprüft werden: https://validator.w3.org/nu/

 

Websichere Farbenben

Bei der Gestaltung von Websites sollte die Farbauswahl unter Umständen auf die 216 websicheren Farben fallen (je 6 Farbtöne für die Grundfarben Rot-Grün-Blau, also 6*6*6=216), da vereinzelte Webbrowser nicht mehr Farbnuancen darstellen können. Von diesem Farbschema abweichende Farben werden vom Browser reduziert und das beabsichtigte Text- oder Grafikdesign führt zu leichten Verfälschungen. Dieses gilt insbesondere auch für Displays (z. B. Fotohandys) mit geringer Farbtiefe.

#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FACF78 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

 

Link Farbnamen