Farbschemata für Joomla-Websites
Farb-Faustregel
Hintergrund hell – Text dunkel – Überschriften akzentuiert – Links klar erkennbar.
CSS-Speicherort für alle Beispiele:
/templates/cassiopeia_extended/css/user.css
Farbschema 1: Klassisch & professionell
(Firmen, Vereine, Bildung)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #ffffff | Weiß |
| Text | #212529 | Dunkelgrau |
| Überschriften | #0d6efd | Blau |
| Links | #0d6efd | Blau |
| Hover | #084298 | Dunkelblau |
CSS-Beispiel
body {
background-color: #ffffff; /* Weiß */
color: #212529; /* Dunkelgrau */
}
h1, h2, h3 {
color: #0d6efd; /* Blau */
}
a {
color: #0d6efd; /* Blau */
}
a:hover {
color: #084298; /* Dunkelblau */
}
Warum gut?
neutral, seriös, sehr gut lesbar.
Farbschema 2: Ruhig & modern
(Dienstleister, Coaching, Gesundheit)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #f8f9fa | Sehr helles Grau |
| Text | #343a40 | Anthrazit |
| Überschriften | #198754 | Grün |
| Links | #198754 | Grün |
| Hover | #146c43 | Dunkelgrün |
CSS-Beispiel
body {
background-color: #f8f9fa; /* Sehr helles Grau */
color: #343a40; /* Anthrazit */
}
h1, h2, h3 {
color: #198754; /* Grün */
}
a {
color: #198754; /* Grün */
}
a:hover {
color: #146c43; /* Dunkelgrün */
}
Warum gut?
beruhigend, vertrauensvoll, modern.
Farbschema 3: Kontrastreich & barrierearm
(Information, Behörden, Schulung)
| Bereich | Farbwert | Farbname |
|---|---|---|
| Hintergrund | #ffffff | Weiß |
| Text | #000000 | Schwarz |
| Überschriften | #003366 | Dunkelblau |
| Links | #0056b3 | Mittelblau |
| Hover | #003d80 | Dunkelblau |
CSS-Beispiel
body {
background-color: #ffffff; /* Weiß */
color: #000000; /* Schwarz */
}
h1, h2, h3 {
color: #003366; /* Dunkelblau */
}
a {
color: #0056b3; /* Mittelblau */
}
a:hover {
color: #003d80; /* Dunkelblau */
}
Warum gut?
sehr gute Lesbarkeit, barrierearm, prüfungssicher.