Vorlage:Farbe: Unterschied zwischen den Versionen

Aus ZUM Deutsch Lernen
deutsch-lernen>Christian
KKeine Bearbeitungszusammenfassung
deutsch-lernen>Christian
KKeine Bearbeitungszusammenfassung
Zeile 27: Zeile 27:
Die Vorlage {{PAGENAME}} gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.
Die Vorlage {{PAGENAME}} gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.


== Farben mit Bedeutung ==
Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.
 
Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.
 
;Farbnamen mit Bedeutung
:Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
 
;Farbnamen aus dem Farbschema
:primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
 
;Helligkeitsangaben
:heller, hell, dunkel, dunkler
 
{{Box
| Farbe mit Bedeutung
| {{ Farbe | Frage }} <span class="zum-farbe-Frage">Text in Farbe ```Frage```</span> test
| Experimentieren
}}
 
 
 
== Farbtabellen ==
=== Farben mit Bedeutung ===
{|class=wikitable style="width: 100%;"
{|class=wikitable style="width: 100%;"
!style="width: 25%"|Hervorhebung1
!style="width: 25%"|Hervorhebung1
Zeile 65: Zeile 87:
|}
|}


== Farbschema ==
=== Farbschema ===
{|class=wikitable
{|class=wikitable
!primär
!primär

Version vom 19. Oktober 2018, 04:50 Uhr


Die Vorlage Farbe gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.

Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.

Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.

Farbnamen mit Bedeutung
Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
Farbnamen aus dem Farbschema
primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
Helligkeitsangaben
heller, hell, dunkel, dunkler


Farbe mit Bedeutung 
Experimentieren


Farbtabellen

Farben mit Bedeutung

Hervorhebung1 #F1D850

{{Farbe |Hervorhebung1}}

Frage #F1D850

{{Farbe |Frage}}

Lernpfad #F1D850

{{Farbe |Lernpfad}}

Hervorhebung2 #C64285

{{Farbe |Hervorhebung2}}

Merksatz #C64285

{{Farbe |Merksatz}}

Üben #338894

{{Farbe |Üben}}

Arbeitsmethode #5E43A5

{{Farbe |Arbeitsmethode}}

Unterrichtsidee #A8DF4A

{{Farbe |Unterrichtsidee}}

Experimentieren #A8DF4A

{{Farbe |Experimentieren}}

Meinung #DBDBDB

{{Farbe |Meinung}}

Lösung #DBDBDB

{{Farbe |Lösung}}

Download #DBDBDB

{{Farbe |Download}}

Kurzinfo #DBDBDB

{{Farbe |Kurzinfo}}

Zitat #a0a0a0

{{Farbe |Zitat}}

Farbschema

primär #FFF0A2

{{Farbe |primär |heller}}

#FFEA77

{{Farbe |primär |hell}}

#F1D850

{{Farbe |primär}}

#DEC229

{{Farbe |primär |dunkel}}

#AF9612

{{Farbe |primär |dunkler}}

sekundär-1 #E994BF

{{Farbe |sekundär-1 |heller}}

#D965A0

{{Farbe |sekundär-1 |hell}}

#C64285

{{Farbe |sekundär-1}}

#B6226D

{{Farbe |sekundär-1 |dunkel}}

#900F50

{{Farbe |sekundär-1 |dunkler}}

sekundär-2 #85C5CF

{{Farbe |sekundär-2 |heller}}

#52A1AD

{{Farbe |sekundär-2 |hell}}

#338894

{{Farbe |sekundär-2}}

#1B7A88

{{Farbe |sekundär-2 |dunkel}}

#0D5F6B

{{Farbe |sekundär-2 |dunkler}}

komplementär #A592D7

{{Farbe |komplementär |heller}}

#7B63BC

{{Farbe |komplementär |hell}}

#5E43A5

{{Farbe |komplementär}}

#482998

{{Farbe |komplementär |dunkel}}

#331878

{{Farbe |komplementär |dunkler}}

orange #FFCEA2

{{Farbe |orange |heller}}

#FFB877

{{Farbe |orange |hell}}

#F19D50

{{Farbe |orange}}

#DD7F28

{{Farbe |orange |dunkel}}

#AE5D12

{{Farbe |orange |dunkler}}

grün #D4F69C

{{Farbe |grün |heller}}

#C0EF6F

{{Farbe |grün |hell}}

#A8DF4A

{{Farbe |grün}}

#8FCD25

{{Farbe |grün |dunkel}}

#6CA111

{{Farbe |grün |dunkler}}

links #0077dd

{{Farbe |links |heller}}

#0077dd

{{Farbe |links |hell}}

#0077dd

{{Farbe |links}}

#005599

{{Farbe |links |dunkel}}

#005599

{{Farbe |links |dunkler}}

grau #F1F1F1

{{Farbe |grau |heller}}

#ececec

{{Farbe |grau |hell}}

#DBDBDB

{{Farbe |grau}}

#C8C8C8

{{Farbe |grau |dunkel}}

#a0a0a0

{{Farbe |grau |dunkler}}

CSS Code for Common.css

/* Bedeutungsfarben */
.zum-farbe-Hervorhebung1   { color:#F1D850; }
.zum-farbe-Frage           { color:#F1D850; }
.zum-farbe-Lernpfad        { color:#F1D850; }
.zum-farbe-Hervorhebung2   { color:#C64285; }
.zum-farbe-Merksatz        { color:#C64285; }
.zum-farbe-Ueben           { color:#338894; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Meinung         { color:#DBDBDB; }
.zum-farbe-Lösung          { color:#DBDBDB; }
.zum-farbe-Download        { color:#DBDBDB; }
.zum-farbe-Kurzinfo        { color:#DBDBDB; }
.zum-farbe-Zitat           { color:#a0a0a0; }

.zum-hintergrund-Hervorhebung1   { background-color:#F1D850; }
.zum-hintergrund-Frage           { background-color:#F1D850; }
.zum-hintergrund-Lernpfad        { background-color:#F1D850; }
.zum-hintergrund-Hervorhebung2   { background-color:#C64285; }
.zum-hintergrund-Merksatz        { background-color:#C64285; }
.zum-hintergrund-Ueben           { background-color:#338894; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Meinung         { background-color:#DBDBDB; }
.zum-hintergrund-Lösung          { background-color:#DBDBDB; }
.zum-hintergrund-Download        { background-color:#DBDBDB; }
.zum-hintergrund-Kurzinfo        { background-color:#DBDBDB; }
.zum-hintergrund-Zitat           { background-color:#a0a0a0; }  


/* komplettes Farbschema */
.zum-farbe-primaer                           { color: #F1D850; }
.zum-farbe-primaer.zum-farbe-heller          { color: #FFF0A2; }
.zum-farbe-primaer.zum-farbe-hell            { color: #FFEA77; }
.zum-farbe-primaer.zum-farbe-dunkel          { color: #DEC229; }
.zum-farbe-primaer.zum-farbe-dunkler         { color: #AF9612; }
.zum-farbe-sekundaer-1                       { color: #F1D850; }
.zum-farbe-sekundaer-1.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-1.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-1.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-1.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-sekundaer-2                       { color: #F1D850; }
.zum-farbe-sekundaer-2.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-2.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-2.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-2.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-komplementaer-1                   { color: #F1D850; }
.zum-farbe-komplementaer-1.zum-farbe-heller  { color: #FFF0A2; }
.zum-farbe-komplementaer-1.zum-farbe-hell    { color: #FFEA77; }
.zum-farbe-komplementaer-1.zum-farbe-dunkel  { color: #DEC229; }
.zum-farbe-komplementaer-1.zum-farbe-dunkler { color: #AF9612; }
.zum-farbe-orange-1                          { color: #F19D50; }
.zum-farbe-orange-1.zum-farbe-heller         { color: #FFCEA2; }
.zum-farbe-orange-1.zum-farbe-hell           { color: #FFB877; }
.zum-farbe-orange-1.zum-farbe-dunkel         { color: #DD7F28; }
.zum-farbe-orange-1.zum-farbe-dunkler        { color: #AE5D12; }
.zum-farbe-gruen                             { color: #F1D850; }
.zum-farbe-gruen.zum-farbe-heller            { color: #FFF0A2; }
.zum-farbe-gruen.zum-farbe-hell              { color: #FFEA77; }
.zum-farbe-gruen.zum-farbe-dunkel            { color: #DEC229; }
.zum-farbe-gruen.zum-farbe-dunkler           { color: #AF9612; }
.zum-farbe-grau                              { color: #DBDBDB; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-hell               { color: #ececec; }
.zum-farbe-grau.zum-farbe-dunkel             { color: #C8C8C8; }
.zum-farbe-grau.zum-farbe-dunkler            { color: #a0a0a0; }

.zum-hintergrund-primaer                           { background-color: #F1D850; }
.zum-hintergrund-primaer.zum-farbe-heller          { background-color: #FFF0A2; }
.zum-hintergrund-primaer.zum-farbe-hell            { background-color: #FFEA77; }
.zum-hintergrund-primaer.zum-farbe-dunkel          { background-color: #DEC229; }
.zum-hintergrund-primaer.zum-farbe-dunkler         { background-color: #AF9612; }
.zum-hintergrund-sekundaer-1                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-1.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-1.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-sekundaer-2                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-2.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-2.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-komplementaer-1                   { background-color: #F1D850; }
.zum-hintergrund-komplementaer-1.zum-farbe-heller  { background-color: #FFF0A2; }
.zum-hintergrund-komplementaer-1.zum-farbe-hell    { background-color: #FFEA77; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkel  { background-color: #DEC229; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkler { background-color: #AF9612; }
.zum-hintergrund-orange-1                          { background-color: #F19D50; }
.zum-hintergrund-orange-1.zum-farbe-heller         { background-color: #FFCEA2; }
.zum-hintergrund-orange-1.zum-farbe-hell           { background-color: #FFB877; }
.zum-hintergrund-orange-1.zum-farbe-dunkel         { background-color: #DD7F28; }
.zum-hintergrund-orange-1.zum-farbe-dunkler        { background-color: #AE5D12; }
.zum-hintergrund-gruen                             { background-color: #F1D850; }
.zum-hintergrund-gruen.zum-farbe-heller            { background-color: #FFF0A2; }
.zum-hintergrund-gruen.zum-farbe-hell              { background-color: #FFEA77; }
.zum-hintergrund-gruen.zum-farbe-dunkel            { background-color: #DEC229; }
.zum-hintergrund-gruen.zum-farbe-dunkler           { background-color: #AF9612; }
.zum-hintergrund-grau                              { background-color: #DBDBDB; }
.zum-hintergrund-grau.zum-farbe-heller             { background-color: #F1F1F1; }
.zum-hintergrund-grau.zum-farbe-hell               { background-color: #ececec; }
.zum-hintergrund-grau.zum-farbe-dunkel             { background-color: #C8C8C8; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: #a0a0a0; }


Abgerufen von „https://deutsch-lernen.zum.de/index.php?title=Vorlage:Farbe&oldid=589“