Vorlage:Farbe: Unterschied zwischen den Versionen
zum>Christian KKeine Bearbeitungszusammenfassung |
Jan (Diskussion | Beiträge) K (1 Version importiert) |
(kein Unterschied)
|
Aktuelle Version vom 17. Dezember 2018, 13:16 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
Beispiele
Farbtabellen
Farben mit Bedeutung
Hervorhebung1 | #F1D850
|
Frage | #F1D850
|
---|---|---|---|
Lernpfad | #F19D50
|
Hervorhebung2 | #C64285
|
Merksatz | #C64285
|
Üben | #338894
|
Arbeitsmethode | #5E43A5
|
Unterrichtsidee | #A8DF4A
|
Experimentieren | #A8DF4A
|
Meinung | #DBDBDB
|
Lösung | #DBDBDB
|
Download | #DBDBDB
|
Kurzinfo | #DBDBDB
|
Zitat | #a0a0a0
|
Farbschema
primär | #fffcf0
|
#fff6cc
|
#F1D850
|
#FFEA77
|
#F1D850
|
#DEC229
|
#AF9612
|
---|---|---|---|---|---|---|---|
sekundär-1 | #f7d9e8
|
#f1bbd6
|
#E994BF
|
#D965A0
|
#C64285
|
#B6226D
|
#900F50
|
sekundär-2 | #c4e3e8
|
#a7d6dd
|
#85C5CF
|
#52A1AD
|
#338894
|
#1B7A88
|
#0D5F6B
|
komplementär | #dad2ee
|
#c2b5e3
|
#A592D7
|
#7B63BC
|
#5E43A5
|
#482998
|
#331878
|
orange | #fffcfa
|
#ffe7d1
|
#FFCEA2
|
#FFB877
|
#F19D50
|
#DD7F28
|
#AE5D12
|
grün | #f7fdec
|
#e6fac7
|
#D4F69C
|
#C0EF6F
|
#A8DF4A
|
#8FCD25
|
#6CA111
|
links | #f5faff
|
#cce7ff
|
#47a9ff
|
#1492ff
|
#0077dd
|
#0068bd
|
#005599
|
grau | #fcfcfc
|
#f7f7f7
|
#F1F1F1
|
#ececec
|
#DBDBDB
|
#C8C8C8
|
#a0a0a0
|
CSS Code for Common.css
/* Bedeutungsfarben */ .zum-farbe-Hervorhebung1 { color:#F1D850; } .zum-farbe-Frage { color:#F1D850; } .zum-farbe-Lernpfad { color:#F19D50; } .zum-farbe-Hervorhebung2 { color:#C64285; } .zum-farbe-Merksatz { color:#C64285; } .zum-farbe-Üben, .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, .zum-farbe-Loesung { 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:#F19D50; } .zum-hintergrund-Hervorhebung2 { background-color:#C64285; } .zum-hintergrund-Merksatz { background-color:#C64285; } .zum-hintergrund-Üben, .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, .zum-hintergrund-Loesung { 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-primär { color: #F1D850; } .zum-farbe-primär.zum-farbe-xx-heller { color: #fffcf0; } .zum-farbe-primär.zum-farbe-x-heller { color: #fff6cc; } .zum-farbe-primär.zum-farbe-heller { color: #F1D850; } .zum-farbe-primär.zum-farbe-hell { color: #FFEA77; } .zum-farbe-primär.zum-farbe-dunkel { color: #DEC229; } .zum-farbe-primär.zum-farbe-dunkler { color: #AF9612; } .zum-farbe-sekundär-1 { color: #C64285; } .zum-farbe-sekundär-1.zum-farbe-xx-heller { color: #f7d9e8; } .zum-farbe-sekundär-1.zum-farbe-x-heller { color: #f1bbd6; } .zum-farbe-sekundär-1.zum-farbe-heller { color: #E994BF; } .zum-farbe-sekundär-1.zum-farbe-hell { color: #D965A0; } .zum-farbe-sekundär-1.zum-farbe-dunkel { color: #B6226D; } .zum-farbe-sekundär-1.zum-farbe-dunkler { color: #900F50; } .zum-farbe-sekundär-2 { color: #338894; } .zum-farbe-sekundär-2.zum-farbe-xx-heller { color: #c4e3e8; } .zum-farbe-sekundär-2.zum-farbe-x-heller { color: #a7d6dd; } .zum-farbe-sekundär-2.zum-farbe-heller { color: #85C5CF; } .zum-farbe-sekundär-2.zum-farbe-hell { color: #52A1AD; } .zum-farbe-sekundär-2.zum-farbe-dunkel { color: #1B7A88; } .zum-farbe-sekundär-2.zum-farbe-dunkler { color: #0D5F6B; } .zum-farbe-komplementär-1 { color: #F1D850; } .zum-farbe-komplementär-1.zum-farbe-xx-heller{ color: #fffcf0; } .zum-farbe-komplementär-1.zum-farbe-x-heller { color: #fff6cc; } .zum-farbe-komplementär-1.zum-farbe-heller { color: #F1D850; } .zum-farbe-komplementär-1.zum-farbe-hell { color: #FFEA77; } .zum-farbe-komplementär-1.zum-farbe-dunkel { color: #DEC229; } .zum-farbe-komplementär-1.zum-farbe-dunkler { color: #AF9612; } .zum-farbe-orange-1 { color: #F19D50; } .zum-farbe-orange-1.zum-farbe-xx-heller { color: #fffcfa; } .zum-farbe-orange-1.zum-farbe-x-heller { color: #ffe7d1; } .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-grün { color: #A8DF4A; } .zum-farbe-grün.zum-farbe-xx-heller { color: #f7fdec; } .zum-farbe-grün.zum-farbe-x-heller { color: #e6fac7; } .zum-farbe-grün.zum-farbe-heller { color: #D4F69C; } .zum-farbe-grün.zum-farbe-hell { color: #C0EF6F; } .zum-farbe-grün.zum-farbe-dunkel { color: #8FCD25; } .zum-farbe-grün.zum-farbe-dunkler { color: #6CA111; } .zum-farbe-grau { color: #DBDBDB; } .zum-farbe-grau.zum-farbe-xx-heller { color: #fcfcfc; } .zum-farbe-grau.zum-farbe-x-heller { color: #f7f7f7; } .zum-farbe-grau.zum-farbe-heller { color: #F1F1F1; } .zum-farbe-grau.zum-farbe-heller { color: #F1F1F1; } .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-primär { background-color: #F1D850; } .zum-hintergrund-primär.zum-farbe-xx-heller { background-color: #fffcf0; } .zum-hintergrund-primär.zum-farbe-x-heller { background-color: #fff6cc; } .zum-hintergrund-primär.zum-farbe-heller { background-color: #F1D850; } .zum-hintergrund-primär.zum-farbe-hell { background-color: #FFEA77; } .zum-hintergrund-primär.zum-farbe-dunkel { background-color: #DEC229; } .zum-hintergrund-primär.zum-farbe-dunkler { background-color: #AF9612; } .zum-hintergrund-sekundär-1 { background-color: #C64285; } .zum-hintergrund-sekundär-1.zum-farbe-xx-heller { background-color: #f7d9e8; } .zum-hintergrund-sekundär-1.zum-farbe-x-heller { background-color: #f1bbd6; } .zum-hintergrund-sekundär-1.zum-farbe-heller { background-color: #E994BF; } .zum-hintergrund-sekundär-1.zum-farbe-hell { background-color: #D965A0; } .zum-hintergrund-sekundär-1.zum-farbe-dunkel { background-color: #B6226D; } .zum-hintergrund-sekundär-1.zum-farbe-dunkler { background-color: #900F50; } .zum-hintergrund-sekundär-2 { background-color: #338894; } .zum-hintergrund-sekundär-2.zum-farbe-xx-heller { background-color: #c4e3e8; } .zum-hintergrund-sekundär-2.zum-farbe-x-heller { background-color: #a7d6dd; } .zum-hintergrund-sekundär-2.zum-farbe-heller { background-color: #85C5CF; } .zum-hintergrund-sekundär-2.zum-farbe-hell { background-color: #52A1AD; } .zum-hintergrund-sekundär-2.zum-farbe-dunkel { background-color: #1B7A88; } .zum-hintergrund-sekundär-2.zum-farbe-dunkler { background-color: #0D5F6B; } .zum-hintergrund-komplementär { background-color: #5E43A5; } .zum-hintergrund-komplementär.zum-farbe-xx-heller { background-color: #dad2ee; } .zum-hintergrund-komplementär.zum-farbe-x-heller { background-color: #c2b5e3; } .zum-hintergrund-komplementär.zum-farbe-heller { background-color: #A592D7; } .zum-hintergrund-komplementär.zum-farbe-hell { background-color: #7B63BC; } .zum-hintergrund-komplementär.zum-farbe-dunkel { background-color: #482998; } .zum-hintergrund-komplementär.zum-farbe-dunkler { background-color: #331878; } .zum-hintergrund-orange { background-color: #F19D50; } .zum-hintergrund-orange.zum-farbe-xx-heller { background-color: #fffcfa; } .zum-hintergrund-orange.zum-farbe-x-heller { background-color: #ffe7d1; } .zum-hintergrund-orange.zum-farbe-heller { background-color: #FFCEA2; } .zum-hintergrund-orange.zum-farbe-hell { background-color: #FFB877; } .zum-hintergrund-orange.zum-farbe-dunkel { background-color: #DD7F28; } .zum-hintergrund-orange.zum-farbe-dunkler { background-color: #AE5D12; } .zum-hintergrund-grün { background-color: #A8DF4A; } .zum-hintergrund-grün.zum-farbe-xx-heller { background-color: #f7fdec; } .zum-hintergrund-grün.zum-farbe-x-heller { background-color: #e6fac7; } .zum-hintergrund-grün.zum-farbe-heller { background-color: #D4F69C; } .zum-hintergrund-grün.zum-farbe-hell { background-color: #C0EF6F; } .zum-hintergrund-grün.zum-farbe-dunkel { background-color: #8FCD25; } .zum-hintergrund-grün.zum-farbe-dunkler { background-color: #6CA111; } .zum-hintergrund-grau { background-color: #DBDBDB; } .zum-hintergrund-grau.zum-farbe-xx-heller { background-color: #fcfcfc; } .zum-hintergrund-grau.zum-farbe-x-heller { background-color: #f7f7f7; } .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; } /* overrides * uses mediawiki parent selector to establish override */ .mediawiki .box.hervorhebung1 { border-left-color:#F1D850; } .mediawiki .box.frage { border-left-color:#F1D850; } .mediawiki .box.lernpfad { border-left-color:#F19D50; } .mediawiki .box.hervorhebung2 { border-left-color:#C64285; } .mediawiki .box.merksatz { border-left-color:#C64285; } .mediawiki .box.üben, .mediawiki .box.ueben { border-left-color:#338894; } .mediawiki .box.arbeitsmethode { border-left-color:#5E43A5; } .mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; } .mediawiki .box.experimentieren { border-left-color:#A8DF4A; } .mediawiki .box.arbeitsmethode { border-left-color:#5E43A5; } .mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; } .mediawiki .box.experimentieren { border-left-color:#A8DF4A; } .mediawiki .box.meinung { border-left-color:#DBDBDB; } .mediawiki .box.lösung, .mediawiki .box.loesung { border-left-color:#DBDBDB; } .mediawiki .box.download { border-left-color:#DBDBDB; } .mediawiki .box.kurzinfo { border-left-color:#DBDBDB; } .mediawiki .box.zitat { border-left-color:#a0a0a0; } .mediawiki .button-left a, .mediawiki .button-center a, .mediawiki .button-right a { background-color: #DBDBDB; } .mediawiki .button-left a:hover, .mediawiki .button-left a:focus, .mediawiki .button-center a:hover, .mediawiki .button-center a:focus, .mediawiki .button-right a:hover, .mediawiki .button-right a:focus { background-color: #ececec; } .mediawiki .button-left.button-primary a, .mediawiki .button-center.button-primary a, .mediawiki .button-right.button-primary a { background-color: #0068bd; } .mediawiki .button-left.button-primary a:hover, .mediawiki .button-left.button-primary a:focus, .mediawiki .button-center.button-primary a:hover, .mediawiki .button-center.button-primary a:focus, .mediawiki .button-right.button-primary a:hover .mediawiki .button-right.button-primary a:focus { background-color: #1492ff; } .mediawiki .uk-text-muted { color: #a0a0a0 !important; } .mediawiki .uk-text-primary { color: #1B7A88 !important; } .mediawiki .uk-text-success { color: #6CA111 !important; } .mediawiki .uk-text-warning { color: #AE5D12 !important; } .mediawiki .uk-text-danger { color: #B6226D !important; } .mediawiki .uk-text-contrast { color: #fff !important; } .mediawiki .uk-button { background-color: #DBDBDB; } .mediawiki .uk-button:hover, .mediawiki .uk-button:focus { background-color: #ececec; } .mediawiki .uk-button.uk-active, .mediawiki .uk-button:active { background-color: #F1F1F1; } .mediawiki .uk-button-primary { background-color: #0068bd; } .mediawiki .uk-button-primary:hover, .mediawiki .uk-button-primary:focus { background-color: #0077dd; } .mediawiki .uk-button-primary.uk-active, .mediawiki .uk-button-primary:active { background-color: #1492ff; } .mediawiki .uk-button-success { background-color: #6CA111; } .mediawiki .uk-button-success:hover, .mediawiki .uk-button-success:focus { background-color: #8FCD25; } .mediawiki .uk-button-success.uk-active, .mediawiki .uk-button-success:active { background-color: #A8DF4A; } .mediawiki .uk-button-danger { background-color: #B6226D; } .mediawiki .uk-button-danger:hover, .mediawiki .uk-button-danger:focus { background-color: #C64285; } .mediawiki .uk-button-danger.uk-active, .mediawiki .uk-button-danger:active { background-color: #D965A0; } .mediawiki .uk-button-link { color: #0068bd; } .mediawiki .uk-button-link:hover, .mediawiki .uk-button-link:focus, .mediawiki .uk-button-link.uk-active, .mediawiki .uk-button-link:active { color: #0077dd; } .mediawiki .uk-button:disabled { background-color: #ececec; } .mediawiki .uk-button-link:disabled { color: #ececec; }