Generierte Farbschemen (z.b. von Paletton) per CSS welchen HTML-Elementen zuordnen

[buhtz]

Hallo, es gibt ja so nette Tools (z.B. Paletton) mit denen man sich Farbpaletten generieren lassen kann. Die lassen sich dann auch mehr oder weniger in CSS exportieren.

Nur fehlt dort die Zuordnung zu den eigentlichen HTML-Elementen (links, text, hintergrund, etc) oder eine Erklärung dazu.

Bei den vielen Farben ist mir nämlich überhaupt nicht klar, wie das Schema gedacht ist. Mit den Begriffen primär und sekundäre Farbe usw kann ich nicht viel anfangen.

[Matthias Scharwies]

Servus!

Hallo, es gibt ja so nette Tools (z.B. Paletton) mit denen man sich Farbpaletten generieren lassen kann. Die lassen sich dann auch mehr oder weniger in CSS exportieren.

Nur fehlt dort die Zuordnung zu den eigentlichen HTML-Elementen (links, text, hintergrund, etc) oder eine Erklärung dazu.

• Grafik/Farbkonzept

ist aber bestimmt ausbaufähig.

Bei den vielen Farben ist mir nämlich überhaupt nicht klar, wie das Schema gedacht ist. Mit den Begriffen primär und sekundäre Farbe usw kann ich nicht viel anfangen.

Wichtig: Weniger ist mehr!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo buhtz,

ob die generierten Farbreihen nun "primär", "sekundär" und "tertiär" heißen, oder Fritz, Willi und Käthe - das ist ziemlich egal. Die Idee dieser Palettentools ist es, dass Du eine oder mehrere Farbreihen bekommst, die systematisch erzeugt sind und die Du dann für deine Zwecke verwenden kannst.

Wofür Du sie verwendest, ist dann deine Aufgabe. Die Idee, Klassen zu definieren und jeder Klasse eine der generierten Farben als color-Eigenschaft zu geben, ist jedenfalls Mumpitz.

Zum einen hast Du auch noch das Thema "Hintergrundfarben" und "Randfarben". Und zum anderen verwendet man Klassen nicht, um einem Element eine bestimmte Eigenschaft zuzuweisen. CSS-Pakete wie Bootstrap mache das zwar - aber so sind Klassen nicht gedacht. Mit Klassen legst Du im Markup fest, welche fachliche Bedeutung ein HTML Element oder eine Gruppe von Elementen hat. Und im CSS ordnest Du die passenden Eigenschaften zu.

Was man in der modernen Zeit macht, ist:

• CSS Custom Properties (manchmal auch CSS-Variablen genannt - aber Variablen sind das nicht) definieren, um die Farbwerte namentlich verfügbar zu haben.
• Diese Custom Properties definiert man auf :root (also dem HTML Element), und setzt sie dann mittels var(...) ein.
• Paletton gibt Dir in der Grundeinstellung pro Farbpalette eine "mittlere" Farbe und dazu zwei hellere und zwei dunklere Farben. Das kannst Du natürlich verbasteln, wie Du willst - aber abhängig davon solltest Du dann auch deine Farben benennen.

:root {
   --p-farbe: #....;   /* Mittlere Farbe der primären Palette */
   --p-hell: #....;    /* leichte Aufhellung */
   --p-heller: #....;  /* starke Aufhellung */
   --p-dunkel: #....;  /* leichte Abdunklung */
   --p-dunkler: #....; /* starke Abdunklung */
   --s1-farbe: #....;   /* Mittlere Farbe der ersten sekundären Palette */
   --s1-hell: #....;    /* leichte Aufhellung */
   --s1-heller: #....;  /* starke Aufhellung */
   --s1-dunkel: #....;  /* leichte Abdunklung */
   --s1-dunkler: #....; /* starke Abdunklung */
}

und so weiter. Die Verwendung ist dann ordentlich Arbeit. Du musst Dir zunächst ein Designkonzept machen. Was soll wie aussehen. Wo sollen Texte bunt auf einfachem Hintegrund sein. Oder mit einfacher Farbe auf buntem Hintergrund. Paletton nimmt Dir das nicht ab.

Und dann musst Du die Farben den entsprechenden HTML Elementen zuordnen. Mit CSS. Je komplexer dein Design ist, desto mehr Arbeit ist das. Bestimme Sachen werden standardisiert sein, z.B. Buttons

button {
   color: var(--s1-hell); 
   background-color: var(--s1-dunkler);
   border-color: var(--s2-hell);
}

oder wie auch immer. Dein Farbkonzept kann ich Dir nicht geben.

Aber darauf läuft es hinaus: Du musst deine Seite mit dem Farben durchstylen und dafür wird es viel CSS kosten. Je weniger Farben Du nutzt, desto weniger Arbeit ist es dann auch.

Rolf