Farbtöne und Farbpalette erzeugen

So funktioniert es

Schreiben Sie eine Farbe in das linke Feld — #2F6FED, rgb(47, 111, 237) und hsl(220, 84%, 56%) werden gleichermaßen erkannt; mehrere Zeilen ergeben mehrere Paletten. Wählen Sie danach die Art der Erzeugung. Die Aufhellungen und Abdunklungen halten Farbton und Sättigung fest und führen die Helligkeit von 90% auf 10% herunter: Bei 7 Farben wird aus #2F6FED eine siebenstufige Leiter, die am hellen Ende bei #D0DFFB und am dunklen Ende bei #04132F liegt. Die Komplementärfarbe springt 180 Grad über den Farbkreis und liefert die Akzentfarbe; Analogfarben verteilen sich über ±30 Grad, die Triade bringt drei Farben im Abstand von 120 Grad. Jede Zeile nennt HEX, RGB und HSL nebeneinander, die Farbfelder unter der Ausgabe tragen dieselben HEX-Bezeichnungen. Wollen Sie eine helle Aufhellung als Hintergrund und eine dunkle Abdunklung als Schrift einsetzen, prüfen Sie das Paar vorher mit dem Kontrastwerkzeug.

Dieses Werkzeug ist auch als farbtoene generator, hellere und dunklere farbtoene erzeugen, farbpalette aus einer farbe erstellen, komplementaerfarbe finden, hex farbabstufungen berechnen bekannt.

Was ist Aufhellung (Tint)?

Eine Aufhellung ist die hellere Fassung einer Farbe. In der Malerei entsteht sie durch Beimischen von Weiß, am Bildschirm durch Anheben des Helligkeitswerts in HSL. Beide Wege führen nicht zum selben Ergebnis: Weiß senkt zusätzlich die Sättigung und lässt die Farbe blass werden, während die reine Helligkeitsänderung den Charakter der Farbe erhält. In Oberflächen tragen Aufhellungen meist die Flächen, die im Hintergrund bleiben sollen — Seitenhintergründe, markierte Zeilen, deaktivierte Schaltflächen.

Was ist Abdunklung (Shade)?

Eine Abdunklung ist die dunklere Fassung einer Farbe und arbeitet genau entgegengesetzt zur Aufhellung: in der Malerei Schwarz beimischen, am Bildschirm die Helligkeit senken. Abdunklungen werden dort gebraucht, wo etwas hervortreten soll — der Hover-Zustand einer Schaltfläche, Schrift auf hellem Grund, Rahmen und Trennlinien. Zu beachten ist allein das dunkle Ende: Unterhalb von etwa 10% Helligkeit lassen sich verschiedene Abdunklungen weder voneinander noch von Schwarz unterscheiden.

Was ist Helligkeit (Lightness)?

Die Helligkeit ist der dritte Bestandteil des HSL-Modells und beschreibt als Prozentwert, wo eine Farbe zwischen Schwarz und Weiß liegt: 0% ist reines Schwarz, 100% reines Weiß, und bei 50% erscheint eine Farbe am gesättigtsten. Sämtliche Aufhellungen und Abdunklungen dieses Werkzeugs entstehen durch Verschieben dieser einen Zahl. Bei 0% und 100% verlieren Farbton und Sättigung jede Bedeutung — deshalb bleibt die Leiter zwischen 90% und 10%.

Was ist Komplementärfarbe?

Die Komplementärfarbe liegt im Farbkreis genau gegenüber, also 180 Grad entfernt: Orange ergänzt Blau, Grün ergänzt Rot. Nebeneinander gestellt heben sich beide so stark hervor, wie es zwei Farben überhaupt können; deshalb ist die Komplementärfarbe der naheliegende Kandidat für einen Akzent. Dieselbe Eigenschaft ermüdet über große Flächen und erzeugt ein Flimmern an den Kanten — sicherer ist es, die Komplementärfarbe einer Schaltfläche zu geben statt einer ganzen Seite.

Worin unterscheiden sich Analogfarben und Triade?

Beide bilden ihre Palette durch Drehung im Farbkreis; unterschiedlich ist nur die Weite der Drehung. Die Analogharmonie bleibt in einem engen Bogen von ±30 Grad, ihre Farben wirken wie eine Familie und ergeben eine ruhige, geschlossene Fläche — gut für Hintergründe und Füllungen. Die Triade teilt den Kreis in drei gleiche Abschnitte zu 120 Grad; die Farben trennen sich deutlich, was etwa drei Datenreihen im selben Diagramm unterscheidbar macht. Kurz gesagt: Analogfarben stiften Einheit, die Triade stiftet Unterscheidung.

Warum die Leiter über die Helligkeit läuft

Eine Farbe lässt sich auf zwei üblichen Wegen aufhellen: Weiß beimischen oder in HSL den Helligkeitswert anheben. Das Beimischen senkt zugleich die Sättigung, die Farbe wird also nicht nur heller, sondern auch blasser — eine Markenfarbe rutscht so nach wenigen Stufen ins Graue.

Dieses Werkzeug hält Farbton und Sättigung fest und bewegt allein die Helligkeit. Das Ergebnis ist eine gleichmäßig abgestufte Leiter, die vom hellen bis zum dunklen Ende in derselben Farbfamilie bleibt — genau das, was ein Oberflächenthema braucht.

Ein Hinweis: An den Enden trennt das Auge die Stufen schlechter. Bei zehn Stufen wirken die beiden äußersten Nachbarn oft fast gleich. Das ist kein Fehler, sondern eine Eigenschaft des Sehens.

Welche Harmonie wofür?

Die vier Möglichkeiten sind nicht austauschbar; die Wahl hängt von der Rolle ab, die die Farbe in der Oberfläche übernimmt.

• Aufhellungen und Abdunklungen → einfarbige Themen, Zustände von Schaltflächen, Rahmen und Flächen
• Komplementär → ein einzelner Akzent, der auffallen muss (Warnhinweis, Hauptschaltfläche)
• Analog → ruhige Hintergründe und Diagrammflächen aus einer Farbfamilie
• Triade → drei Datenreihen, die im selben Diagramm unterscheidbar bleiben müssen

Häufige Fragen

Was ist der Unterschied zwischen Tint und Shade?

Tint ist die hellere, Shade die dunklere Fassung einer Farbe. Dieses Werkzeug erzeugt beide auf einer Leiter: Die oberen Zeilen sind Aufhellungen, die unteren Abdunklungen.

Ergibt der erzeugte HSL-Wert in CSS genau dieselbe Farbe?

Nahezu. HSL-Werte werden für die Lesbarkeit auf ganze Zahlen gerundet, der HEX-Wert dagegen aus den ungerundeten Zahlen berechnet; eine Einheit Abweichung ist möglich und mit dem Auge nicht zu sehen. Nehmen Sie den HEX-Wert, wenn es genau stimmen muss.

Wie viele Stufen braucht eine Skala?

Für kleine Oberflächen reichen fünf. Wer Normal-, Hover-, Klick- und Deaktiviert-Zustand einer Schaltfläche getrennt einfärbt, fährt mit sieben besser; ein vollständiges Designsystem arbeitet bequemer mit zehn.

Werden meine Farben irgendwohin übertragen?

Nein. Die Erzeugung läuft vollständig in Ihrem Browser; die eingegebenen Farbcodes erreichen keinen Server und keinen Dritten.