Töne, Schattierungen und harmonische Farbpaletten aus einer Basisfarbe generieren
Ein Paletten-Generator nimmt eine Basisfarbe und baut darum einen abgestimmten Farbsatz — hellere Tönungen, dunklere Schattierungen und harmonische Begleiter, gewählt nach farbtheoretischen Beziehungen statt nach Gefühl. Eine einzelne Farbe zu wählen ist leicht; sie in eine vollständige, gewollt wirkende Palette zu verwandeln ist der schwere Teil, denn Farben, die kollidieren oder zu nah beieinander liegen, lassen ein Design amateurhaft wirken. Dieses Tool übernimmt die Beziehungen, sodass Sie von einer Farbe ausgehen und in Sekunden ein nutzbares Schema erhalten.
Die erzeugten Harmonien kommen aus Positionen auf dem Farbkreis: Komplementärfarben liegen gegenüber für hohen Kontrast, analoge Farben nebeneinander für ein ruhiges, stimmiges Gefühl, und triadische Sätze sind gleichmäßig verteilt für ausgewogene Vielfalt. Tönungen und Schattierungen entstehen, indem der Farbton festgehalten und die Helligkeit angepasst wird — so baut man die konsistente Hell-Dunkel-Rampe, die eine UI für Hintergründe, Text und Zustände braucht. Alles wird im Browser erzeugt, mit kopierbaren HEX-Werten für Ihr CSS oder Designwerkzeug.
Eine Tönung ist die Basisfarbe Richtung Weiß gemischt (heller), eine Schattierung Richtung Schwarz (dunkler). Tönungen und Schattierungen zu erzeugen hält den Farbton gleich und variiert die Helligkeit, was eine abgestimmte Familie statt unverbundener Farben ergibt.
Es sind Beziehungen auf dem Farbkreis. Komplementärfarben liegen gegenüber für starken Kontrast, analoge Farben sind Nachbarn für einen harmonischen Look, und triadische sind gleichmäßig verteilt für ausgewogene Vielfalt. Jede passt zu einer anderen Designstimmung.
Paletten kommen mit HEX-Werten, die Sie direkt in CSS oder ein Designwerkzeug kopieren können, da HEX am weitesten akzeptiert ist. Von dort können Sie jede Farbe in RGB oder HSL umwandeln, falls ein bestimmtes Tool es braucht.
Harmonie allein garantiert keine Lesbarkeit — Text braucht ausreichend Kontrast zum Hintergrund. Nutzen Sie die hellen und dunklen Enden einer Tönungs-/Schattierungsrampe für Text-auf-Hintergrund-Paare und prüfen Sie sie gegen die WCAG-Kontrastverhältnisse vor der Auslieferung.
CSS-Verlauf-Generator · Kontrast-Prüfer · Farbmischer · Farbnamen-Finder