(→HEX) Markierung: rte-wysiwyg |
(→Wikifarben: Letzter Abschnitt gehört nicht auf eine Hilfeseite) |
||
(10 dazwischenliegende Versionen von 10 Benutzern werden nicht angezeigt) | |||
Zeile 8: | Zeile 8: | ||
== Crashkurs: Text und Hintergrund färben == |
== Crashkurs: Text und Hintergrund färben == |
||
− | |||
{{Wikitext}} |
{{Wikitext}} |
||
− | Um Flächen oder Text mit Farben zu versehen, erlaubt die |
+ | Um Flächen oder Text mit Farben zu versehen, erlaubt die FANDOM-Software [[Hilfe:Inline-CSS|Inline-CSS]]. Das sieht dann so aus: |
{|class=wikitable style="width:100%; margin:1em 1em 1em 0; border-style:solid; border-width:1px; border-collapse:collapse; empty-cells:show;" |
{|class=wikitable style="width:100%; margin:1em 1em 1em 0; border-style:solid; border-width:1px; border-collapse:collapse; empty-cells:show;" |
||
Zeile 40: | Zeile 39: | ||
== Farbnamen == |
== Farbnamen == |
||
− | |||
Dies sind alle Farben, die man per Namen eingeben kann. |
Dies sind alle Farben, die man per Namen eingeben kann. |
||
Zeile 207: | Zeile 205: | ||
== Andere Codierungsmöglichkeiten == |
== Andere Codierungsmöglichkeiten == |
||
− | |||
Statt vordefinierten Farbnamen kann man sich auch eigene Farben zusammenstellen. Statt <code>style="color:blue;"</code> schreibt man dann <code>style="color:rgb(0,0,255);"</code>. |
Statt vordefinierten Farbnamen kann man sich auch eigene Farben zusammenstellen. Statt <code>style="color:blue;"</code> schreibt man dann <code>style="color:rgb(0,0,255);"</code>. |
||
=== HEX === |
=== HEX === |
||
− | |||
Codes im Hexadezimalformat sehen so aus: <code><nowiki>#RRBBGG</nowiki></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><nowiki>#RRBBGG</nowiki></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. |
||
Beispiele: |
Beispiele: |
||
<span style="background-color:white; padding:0.5em;"> |
<span style="background-color:white; padding:0.5em;"> |
||
− | |||
<span style="color:#000000;"><nowiki>#000000</nowiki></span>, |
<span style="color:#000000;"><nowiki>#000000</nowiki></span>, |
||
− | |||
<span style="color:#FF0000;"><nowiki>#FF0000</nowiki></span>, |
<span style="color:#FF0000;"><nowiki>#FF0000</nowiki></span>, |
||
− | |||
<span style="color:#00FF00;"><nowiki>#00FF00</nowiki></span>, |
<span style="color:#00FF00;"><nowiki>#00FF00</nowiki></span>, |
||
− | |||
<span style="color:#0000FF;"><nowiki>#0000FF</nowiki></span>, |
<span style="color:#0000FF;"><nowiki>#0000FF</nowiki></span>, |
||
− | |||
<span style="color:#FFFF00; text-shadow:0 0 1ex black;"><nowiki>#FFFF00</nowiki></span>, |
<span style="color:#FFFF00; text-shadow:0 0 1ex black;"><nowiki>#FFFF00</nowiki></span>, |
||
− | |||
<span style="color:#FF00FF;"><nowiki>#FF00FF</nowiki></span>, |
<span style="color:#FF00FF;"><nowiki>#FF00FF</nowiki></span>, |
||
− | |||
<span style="color:#00FFFF;"><nowiki>#00FFFF</nowiki></span>, |
<span style="color:#00FFFF;"><nowiki>#00FFFF</nowiki></span>, |
||
− | |||
<span style="color:#FFFFFF; text-shadow:0 0 1ex black;"><nowiki>#FFFFFF</nowiki></span>, |
<span style="color:#FFFFFF; text-shadow:0 0 1ex black;"><nowiki>#FFFFFF</nowiki></span>, |
||
− | |||
<span style="color:#00A0A0;"><nowiki>#00A0A0</nowiki></span>, |
<span style="color:#00A0A0;"><nowiki>#00A0A0</nowiki></span>, |
||
− | |||
<span style="color:#0060A0;"><nowiki>#0060A0</nowiki></span>, |
<span style="color:#0060A0;"><nowiki>#0060A0</nowiki></span>, |
||
− | |||
<span style="color:#B060A0;"><nowiki>#B060A0</nowiki></span>. |
<span style="color:#B060A0;"><nowiki>#B060A0</nowiki></span>. |
||
</span> |
</span> |
||
=== RGB === |
=== 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: <code>rgb(R, G, B)</code>. Die Zahlen müssen innerhalb von 0 und 255 liegen, alternativ kann man auch Prozentangaben von 0% bis 100% pro Farbe angeben. |
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: <code>rgb(R, G, B)</code>. Die Zahlen müssen innerhalb von 0 und 255 liegen, alternativ kann man auch Prozentangaben von 0% bis 100% pro Farbe angeben. |
||
Zeile 251: | Zeile 235: | ||
<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> |
||
− | |||
− | ==== 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: |
||
⚫ | |||
⚫ | |||
=== HSL === |
=== HSL === |
||
− | |||
[[Datei:hls.png|thumb|120° wählt das grünste Grün aus]] |
[[Datei:hls.png|thumb|120° wählt das grünste Grün aus]] |
||
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 <code>hsl(Farbgrad, Sättigung, Helligkeit)</code>. |
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 <code>hsl(Farbgrad, Sättigung, Helligkeit)</code>. |
||
Zeile 275: | Zeile 252: | ||
</span> |
</span> |
||
− | + | === Transparenz/Alphawert === |
|
⚫ | |||
− | |||
⚫ | |||
⚫ | |||
⚫ | |||
<span style="color:hsla(183, 50%, 50%, 1.0);background-color:white; padding:0.5em;">hsla(183, 50%, 50%, 1.0)</span> vs. |
<span style="color:hsla(183, 50%, 50%, 1.0);background-color:white; padding:0.5em;">hsla(183, 50%, 50%, 1.0)</span> vs. |
||
<span style="color:hsla(183, 50%, 50%, 0.6);background-color:white; padding:0.5em;">hsla(183, 50%, 50%, 0.6)</span> |
<span style="color:hsla(183, 50%, 50%, 0.6);background-color:white; padding:0.5em;">hsla(183, 50%, 50%, 0.6)</span> |
||
− | == |
+ | == Wikifarben == |
+ | [[Bild:Themedesigner Anpassen.png|miniatur]] |
||
+ | Zudem hat jedes Wiki mit dessen [[Hilfe:Gründung|Gründung]] eigene Farben, welche auch nach der Gründung (über den ''[[Hilfe:Theme-Designer|Theme-Designer]]'', siehe auch Bild rechts) geändert werden können. Dabei können zwei dieser Farben beispielsweise wie folgt über den [[Hilfe:Wikitext|Wikitext]] ausgegeben werden: |
||
+ | |||
+ | * <code><nowiki><span class="color1">Farbe 1</span></nowiki></code> – für <span class="color1">Farbe 1</span> |
||
+ | * <code><nowiki><span class="color2">Farbe 2</span></nowiki></code> – für <span class="color2">Farbe 2</span> |
||
+ | |||
+ | == Farbkonzepte == |
||
+ | * [https://www.w3schools.com/colors/colors_monochromatic.asp monochromatisch] |
||
+ | * [https://www.w3schools.com/colors/colors_analogous.asp analog] |
||
+ | * [https://www.w3schools.com/colors/colors_complementary.asp komplementär/Komplementärfarben] |
||
+ | * [https://www.w3schools.com/colors/colors_triadic.asp triadisch] |
||
+ | * [https://www.w3schools.com/colors/colors_compound.asp zusammengesetzt oder geteilt-komplementär] |
||
+ | * [https://www.youtube.com/watch?v=4sblEu4x5ug Bedeutung von Farbschemata] |
||
+ | |||
+ | == Nützliche Weblinks == |
||
* [http://de.selfhtml.org/helferlein/farben.htm SelfHTML-Farbhelferlein] |
* [http://de.selfhtml.org/helferlein/farben.htm SelfHTML-Farbhelferlein] |
||
* [http://colorschemedesigner.com colorschemedesigner.com] – Zusammenpassende Farb-Schemata, praktisch zur Schattierungsauswahl |
* [http://colorschemedesigner.com colorschemedesigner.com] – Zusammenpassende Farb-Schemata, praktisch zur Schattierungsauswahl |
||
Zeile 293: | Zeile 286: | ||
* [http://www.hexfarben.de/ hexfarben.de] - Farbkreis |
* [http://www.hexfarben.de/ hexfarben.de] - Farbkreis |
||
+ | == Siehe auch == |
||
+ | * [https://www.w3schools.com/colors/colors_theory.asp Farbtheorie] |
||
+ | * [[Hilfe:Nutzern mit Farbenfehlsichtigkeit in deinem Wiki helfen]] |
||
+ | |||
+ | == Weitere Hilfe & Feedback == |
||
+ | {{Hilfe/Feedback}} |
||
[[ca:Ajuda:Color]] |
[[ca:Ajuda:Color]] |
||
[[en:Help:Color]] |
[[en:Help:Color]] |
||
Zeile 303: | Zeile 302: | ||
[[pl:Pomoc:Kolory]] |
[[pl:Pomoc:Kolory]] |
||
[[pt:Ajuda:Cores]] |
[[pt:Ajuda:Cores]] |
||
+ | [[ro:Ajutor:Culori]] |
||
[[ru:Справка:Цвет]] |
[[ru:Справка:Цвет]] |
||
+ | [[tr:Yardım:Renk]] |
||
+ | [[vi:Trợ giúp:Màu sắc]] |
||
[[zh:Help:顏色]] |
[[zh:Help:顏色]] |
Version vom 3. Juni 2020, 10:02 Uhr
Zum Gestalten von Wikis, 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.
- Anmerkung: Einfärbungen mittels CSS werden auf Mobilgeräten nicht angezeigt!
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 FANDOM-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 | indianred | floralwhite | olivedrab | darkcyan | blue |
dimgray | crimson | linen | yellowgreen | cadetblue | mediumblue |
gray | firebrick | oldlace | limegreen | lightseagreen | darkblue |
darkgray | darkred | cornsilk | lime | darkturquoise | navy |
silver | red | antiquewhite | lawngreen | mediumturquoise | midnightblue |
lightgray | orangered | blanchedalmond | chartreuse | turquoise | mediumslateblue |
gainsboro | tomato | bisque | greenyellow | aquamarine | slateblue |
whitesmoke | coral | navajowhite | springgreen | mintcream | darkslateblue |
white | darkorange | wheat | mediumspringgreen | paleturquoise | indigo |
snow | orange | burlywood | lightgreen | azure | purple |
seashell | yellow | tan | palegreen | lightcyan | darkmagenta |
lavenderblush | lightyellow | rosybrown | honeydew | cyan | darkorchid |
mistyrose | ivory | sandybrown | darkseagreen | aliceblue | darkviolet |
pink | lemonchiffon | goldenrod | mediumaquamarine | lightsteelblue | blueviolet |
lightpink | lightgoldenrodyellow | darkgoldenrod | mediumseagreen | powderblue | mediumpurple |
hotpink | beige | peru | seagreen | lightblue | mediumorchid |
deeppink | papayawhip | chocolate | forestgreen | skyblue | magenta |
palevioletred | moccasin | saddlebrown | green | lightskyblue | orchid |
mediumvioletred | peachpuff | sienna | darkgreen | deepskyblue | violet |
lightsalmon | palegoldenrod | brown | lightslategray | dodgerblue | plum |
salmon | khaki | maroon | slategray | cornflowerblue | thistle |
darksalmon | darkkhaki | darkolivegreen | darkslategray | steelblue | lavender |
lightcoral | gold | olive | teal | royalblue | ghostwhite |
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%).
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%).
Transparenz/Alphawert
Sowohl rgb als auch hsl besitzen die Möglichkeit, einen Alphawert hinzuzufügen (dann heißen sie "rgba" und "hsla"; hex besitzt dies nicht) von 0.0 (volltransparent, also unsichtbar) bis 1.0 (nicht transparent). Beispiel:
rgba(20%, 60%, 30%, 1.0) vs.
rgba(20%, 60%, 30%, 0.6)
hsla(183, 50%, 50%, 1.0) vs.
hsla(183, 50%, 50%, 0.6)
Wikifarben
Zudem hat jedes Wiki mit dessen Gründung eigene Farben, welche auch nach der Gründung (über den Theme-Designer, siehe auch Bild rechts) geändert werden können. Dabei können zwei dieser Farben beispielsweise wie folgt über den Wikitext ausgegeben werden:
<span class="color1">Farbe 1</span>
– für Farbe 1<span class="color2">Farbe 2</span>
– für Farbe 2
Farbkonzepte
- monochromatisch
- analog
- komplementär/Komplementärfarben
- triadisch
- zusammengesetzt oder geteilt-komplementär
- Bedeutung von Farbschemata
Nützliche Weblinks
- SelfHTML-Farbhelferlein
- colorschemedesigner.com – Zusammenpassende Farb-Schemata, praktisch zur Schattierungsauswahl
- farbfinder.smartbytes.de – Direktes Einfärben einer Testseite (JavaScript)
- wackerart.de – RGB-Farbmixer (Java-Applet)
- adobe.de - Farbmixer
- heber-edv.de - Farbtabelle
- z1.web.de - Eine weitere Farbtabelle
- html-color-codes.info - Farbwähler
- hexfarben.de - Farbkreis
Siehe auch
Weitere Hilfe & Feedback
- Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
- Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
- Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
- Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
- Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.