(→Andere Codierungsmöglichkeiten: Ausdruck) Markierung: rte-wysiwyg |
K (syntaxfix) Markierung: sourceedit |
||
Zeile 210: | Zeile 210: | ||
=== HEX === |
=== HEX === |
||
⚫ | Codes im Hexadezimalformat sehen so aus: <code>#RRBBGG</code>, also eine Raute und drei zweistellige Zahlen im Hexadezimalformat (Zahlen mit Ziffern von 0 bis 15, wobei 10 als 'A' und 15 als 'F' geschrieben werden). Die drei Zahlen stehen für die drei Farben Rot, Grün, Blau, aus denen die Farbe zusammengesetzt wird. |
||
− | Codes im Hexadezimalformat sehen so aus: <code> |
||
⚫ | |||
Beispiele: |
Beispiele: |
||
<span style="background-color:white; padding:0.5em;"> |
<span style="background-color:white; padding:0.5em;"> |
||
⚫ | |||
− | |||
− | <span style="color:# |
+ | <span style="color:#FF0000;">#FF0000</span>, |
− | # |
+ | <span style="color:#00FF00;">#00FF00</span>, |
⚫ | |||
− | |||
− | <span style="color:# |
+ | <span style="color:#FFFF00; text-shadow:0 0 1ex black;">#FFFF00</span>, |
− | # |
+ | <span style="color:#FF00FF;">#FF00FF</span>, |
⚫ | |||
− | |||
− | <span style="color:# |
+ | <span style="color:#FFFFFF; text-shadow:0 0 1ex black;">#FFFFFF</span>, |
− | # |
+ | <span style="color:#00A0A0;">#00A0A0</span>, |
⚫ | |||
− | |||
− | <span style="color:# |
+ | <span style="color:#B060A0;">#B060A0</span>. |
− | #0000FF</span>, |
||
− | |||
− | <span style="color:#FFFF00; text-shadow:0 0 1ex black;"> |
||
− | #FFFF00</span>, |
||
− | |||
⚫ | |||
− | #FF00FF</span>, |
||
− | |||
⚫ | |||
− | #00FFFF</span>, |
||
− | |||
− | <span style="color:#FFFFFF; text-shadow:0 0 1ex black;"> |
||
− | #FFFFFF</span>, |
||
− | |||
⚫ | |||
− | #00A0A0</span>, |
||
− | |||
⚫ | |||
− | #0060A0</span>, |
||
− | |||
− | <span style="color:#B060A0;"> |
||
− | #B060A0</span>. |
||
</span> |
</span> |
||
Zeile 256: | Zeile 233: | ||
Beispiele: |
Beispiele: |
||
<span style="background-color:white; padding:0.5em;"> |
<span style="background-color:white; padding:0.5em;"> |
||
− | |||
<span style="color:rgb(0,0,64);">rgb(0,0,64)</span>, |
<span style="color:rgb(0,0,64);">rgb(0,0,64)</span>, |
||
− | |||
<span style="color:rgb(0%, 0%, 64%);">rgb(0%, 0%, 64%)</span>, |
<span style="color:rgb(0%, 0%, 64%);">rgb(0%, 0%, 64%)</span>, |
||
− | |||
<span style="color:rgb(127, 0, 255);">rgb(127, 0, 255)</span>, |
<span style="color:rgb(127, 0, 255);">rgb(127, 0, 255)</span>, |
||
− | |||
<span style="color:rgb(50%, 0%, 100%);">rgb(50%, 0%, 100%)</span>. |
<span style="color:rgb(50%, 0%, 100%);">rgb(50%, 0%, 100%)</span>. |
||
</span> |
</span> |
||
Zeile 279: | Zeile 252: | ||
Beispiele: |
Beispiele: |
||
<span style="background-color:white; padding:0.5em;"> |
<span style="background-color:white; padding:0.5em;"> |
||
− | |||
<span style="color:hsl(120, 100%, 100%); text-shadow:0 0 1ex black;">hsl(120, 100%, 100%)</span>, |
<span style="color:hsl(120, 100%, 100%); text-shadow:0 0 1ex black;">hsl(120, 100%, 100%)</span>, |
||
− | |||
<span style="color:hsl(120, 100%, 0%);">hsl(120, 100%, 0%)</span>, |
<span style="color:hsl(120, 100%, 0%);">hsl(120, 100%, 0%)</span>, |
||
− | |||
<span style="color:hsl(120, 100%, 50%);">hsl(120, 100%, 50%)</span>, |
<span style="color:hsl(120, 100%, 50%);">hsl(120, 100%, 50%)</span>, |
||
− | |||
<span style="color:hsl(120, 50%, 50%);">hsl(120, 50%, 50%)</span>, |
<span style="color:hsl(120, 50%, 50%);">hsl(120, 50%, 50%)</span>, |
||
− | |||
<span style="color:hsl(120, 0%, 50%);">hsl(120, 0%, 50%)</span>, |
<span style="color:hsl(120, 0%, 50%);">hsl(120, 0%, 50%)</span>, |
||
− | |||
<span style="color:hsl(183, 50%, 50%);">hsl(183, 50%, 50%)</span>, |
<span style="color:hsl(183, 50%, 50%);">hsl(183, 50%, 50%)</span>, |
||
− | |||
<span style="color:hsl(183, 100%, 50%);">hsl(183, 100%, 50%)</span>, |
<span style="color:hsl(183, 100%, 50%);">hsl(183, 100%, 50%)</span>, |
||
− | |||
<span style="color:hsl(183, 100%, 30%);">hsl(183, 100%, 30%)</span>. |
<span style="color:hsl(183, 100%, 30%);">hsl(183, 100%, 30%)</span>. |
||
</span> |
</span> |
Version vom 24. Juni 2015, 23:33 Uhr
Zum Gestalten von Wikias, Wikiseiten und Seitentext gehören auch Farben dazu. Sowohl im Theme-Designer als auch mittels CSS können Farben für Text, Hintergründe und mehr gesetzt werden.
Auf dieser Seite steht eine Tabelle mit Farbnamen, die man auch im Theme-Designer eingeben kann, sowie ein kurzer Crashkurs übers Einfärben in der Code-Ansicht.
Crashkurs: Text und Hintergrund färben
Der folgende Text betrifft das Schreiben von Wiki-Syntax, die in einem Quelltexteditor eingegeben werden muss.
Um Flächen oder Text mit Farben zu versehen, erlaubt die Wikia-Software Inline-CSS. Das sieht dann so aus:
Verwendung | Wikitext-Beispiel | Ergebnis-Beispiel |
Farbiger Text | <span style="color:green;">Text</span>
|
Text |
Farbiger Absatz | <div style="color:green;">Absatz</div>
|
Absatz
|
Hintergrund weniger Worte | <span style="background-color:lawngreen;">Beispiel</span>
|
Beispiel |
Hintergrund eines Absatzes | <div style="background-color:lawngreen;">Absatz</div>
|
Absatz
|
Hintergrund einer Tabellenzelle | | style="background-color:aquamarine;" | Tabellenzelle
|
Tabellenzelle |
Farbnamen
Dies sind alle Farben, die man per Namen eingeben kann.
black | darkgreen | seagreen | darkslategrey | darkslateblue | midnightblue |
dimgrey | green | mediumseagreen | slategrey | slateblue | navy |
grey | forestgreen | darkseagreen | lightslategrey | mediumslateblue | darkblue |
darkgrey | limegreen | teal | cadetblue | steelblue | mediumblue |
silver | lightgreen | darkcyan | darkturquoise | royalblue | blue |
lightgrey | palegreen | lightseagreen | cyan | cornflowerblue | dodgerblue |
gainsboro | mediumspringgreen | mediumaquamarine | powderblue | lightskyblue | deepskyblue |
whitesmoke | springgreen | mediumturquoise | paleturquoise | skyblue | lightsteelblue |
white | lime | turquoise | lightcyan | lightblue | lavender |
ivory | lawngreen | aquamarine | azure | lavenderblush | aliceblue |
mintcream | chartreuse | lightyellow | snow | mistyrose | ghostwhite |
honeydew | blanchedalmond | oldlace | lemonchiffon | violet | floralwhite |
lightgoldenrodyellow | papayawhip | yellow | bisque | plum | seashell |
beige | cornsilk | gold | moccasin | hotpink | linen |
wheat | antiquewhite | orange | navajowhite | magenta | thistle |
palegoldenrod | lightsalmon | darkorange | peachpuff | deeppink | mediumpurple |
khaki | sandybrown | orangered | lightpink | lightcoral | mediumorchid |
greenyellow | burlywood | darksalmon | pink | palevioletred | darkorchid |
yellowgreen | tan | rosybrown | salmon | orchid | blueviolet |
darkkhaki | goldenrod | indianred | coral | mediumvioletred | darkviolet |
olivedrab | peru | chocolate | tomato | firebrick | indigo |
olive | darkgoldenrod | sienna | red | darkred | purple |
darkolivegreen | saddlebrown | brown | crimson | maroon | darkmagenta |
Andere Codierungsmöglichkeiten
Statt vordefinierten Farbnamen kann man sich auch eigene Farben zusammenstellen. Statt style="color:blue;"
schreibt man dann style="color:rgb(0,0,255);"
.
HEX
Codes im Hexadezimalformat sehen so aus: #RRBBGG
, also eine Raute und drei zweistellige Zahlen im Hexadezimalformat (Zahlen mit Ziffern von 0 bis 15, wobei 10 als 'A' und 15 als 'F' geschrieben werden). Die drei Zahlen stehen für die drei Farben Rot, Grün, Blau, aus denen die Farbe zusammengesetzt wird.
Beispiele: #000000, #FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF, #00FFFF, #FFFFFF, #00A0A0, #0060A0, #B060A0.
RGB
Die RGB-Schreibweise benutzt wie die Hex-Schreibweise die Farben Rot, Grün und Blau in verschiedenen Anteilen, um eine Farbe zusammenzusetzen, also dasselbe in Grün, bloß mit normalen Dezimalzahlen: rgb(R, G, B)
. Die Zahlen müssen innerhalb von 0 und 255 liegen, alternativ kann man auch Prozentangaben von 0% bis 100% pro Farbe angeben.
Beispiele: rgb(0,0,64), rgb(0%, 0%, 64%), rgb(127, 0, 255), rgb(50%, 0%, 100%).
RGBA
RGBA erweitert das RGB-Modell um einen vierten Alpha-Wert, der von 0.0 bis 1.0 gehen kann, und die Transparenz einer Farbe vorgibt: rgba(20%, 60%, 30%, 1.0) vs. rgba(20%, 60%, 30%, 0.6)
HSL
Das HSL-Modell geht ganz anders an die Farbvorgabe heran und ist intuitiver als das RGB-Modell. Man gibt nur einen Farbwert von 0 bis 360 an, sowie zwei Prozentangaben für Sättigung und Helligkeit. 0 ist dabei Rot, 120 ist Grün, und 240 ist Blau (360 ist wieder Rot). Die Schreibweise ist hsl(Farbgrad, Sättigung, Helligkeit)
.
Beispiele: hsl(120, 100%, 100%), hsl(120, 100%, 0%), hsl(120, 100%, 50%), hsl(120, 50%, 50%), hsl(120, 0%, 50%), hsl(183, 50%, 50%), hsl(183, 100%, 50%), hsl(183, 100%, 30%).
HSLA
Auch beim HSL-Model kann man einen vierten Alphawert hinzufügen, wieder von 0.0 (volltransparent, also unsichtbar) bis 1.0 (nicht transparent). Beispiel: hsla(183, 50%, 50%, 1.0) vs. hsla(183, 50%, 50%, 0.6)
Nützliche Weblinks
- {{#NewWindowLink:http://de.selfhtml.org/helferlein/farben.htm%7CSelfHTML-Farbhelferlein}}
- {{#NewWindowLink:http://colorschemedesigner.com%7Ccolorschemedesigner.com}} – Zusammenpassende Farb-Schemata, praktisch zur Schattierungsauswahl
- {{#NewWindowLink:http://farbfinder.smartbytes.de/%7Cfarbfinder.smartbytes.de}} – Direktes Einfärben einer Testseite (JavaScript)
- {{#NewWindowLink:http://www.wackerart.de/mixer.html%7Cwackerart.de}} – RGB-Farbmixer (Java-Applet)
- {{#NewWindowLink:https://kuler.adobe.com/create/color-wheel/%7Cadobe.de}} - Farbmixer
- {{#NewWindowLink:http://www.heber-edv.de/diverse/farben.php%7Cheber-edv.de}} - Farbtabelle
- {{#NewWindowLink:http://www.z1-web.de/Webmaster-Tools-HTML-HEX_Farbcodes_Tools%7Cz1.web.de}} noch ne Hextabelle
- {{#NewWindowLink:http://html-color-codes.info/webfarben_hexcodes/%7Chtml-color-codes.info}} - Farbwähler
- {{#NewWindowLink:http://www.hexfarben.de/%7Chexfarben.de}} - Farbkreis