KKeine Bearbeitungszusammenfassung Markierung: sourceedit |
K (Bot: Entferne: fi:Ohje:Väri) Markierung: apiedit |
||
Zeile 318: | Zeile 318: | ||
[[en:Help:Color]] |
[[en:Help:Color]] |
||
[[es:Ayuda:Color]] |
[[es:Ayuda:Color]] |
||
− | [[fi:Ohje:Väri]] |
||
[[fr:Aide:Couleur]] |
[[fr:Aide:Couleur]] |
||
[[ja:ヘルプ:カラー]] |
[[ja:ヘルプ:カラー]] |
Version vom 16. Januar 2016, 23:54 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 | darkslategray | darkslateblue | midnightblue |
dimgray | green | mediumseagreen | slategray | slateblue | navy |
gray | forestgreen | darkseagreen | lightslategray | mediumslateblue | darkblue |
darkgray | limegreen | teal | cadetblue | steelblue | mediumblue |
silver | lightgreen | darkcyan | darkturquoise | royalblue | blue |
lightgray | 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