Generator für Farbtöne und Schattierungen
Aus einer Farbe ihre Aufhellungen (zu Weiß), Abdunklungen (zu Schwarz) und Abtönungen (zu Grau) sowie eine Skala 50–950 erzeugen, mit Code in HEX, RGB, HSL, CSS, SCSS, JSON oder Tailwind.
Klicken Sie auf ein Farbfeld, um seinen HEX-Code zu kopieren. Das PNG-Bild trägt unten rechts eine kleine KSPNAI-Signatur.
Alles wird in Ihrem Browser berechnet: Nichts wird hochgeladen.
Über dieses Tool
Der Generator für Farbtöne und Schattierungen führt eine Farbe in drei Richtungen: Aufhellungen durch Zugabe von Weiß, Abdunklungen durch Schwarz und Abtönungen durch Grau. Dazu gibt es eine Skala von 50 bis 950, praktisch für Webprojekte oder ein Corporate Design.
Wählen Sie die Anzahl der Stufen (2 bis 20) und die Mischung: RGB, die klassische Mischung, oder OKLab, das für das Auge gleichmäßigere Stufen liefert. Klicken Sie auf ein Farbfeld, um seinen Code zu kopieren, und exportieren Sie alles als HEX, RGB, HSL, CSS-Variablen, SCSS, JSON oder Tailwind oder als PNG-Bild.
- Aufhellungen, Abdunklungen und Abtönungen einer Farbe
- 2 bis 20 Stufen pro Reihe
- Mischung in RGB oder OKLab
- Skala 50 bis 950 im Tailwind-Stil
- Code in HEX, RGB, HSL, CSS, SCSS, JSON, Tailwind v3 und v4
- Farbfeld mit einem Klick kopieren, PNG-Bild und Link zum Teilen
So funktioniert es
- Grundfarbe wählen oder HEX-Code eingeben.
- Anzahl der Stufen und Mischung einstellen.
- Auf ein Farbfeld klicken, um seinen Code zu kopieren.
- Code-Format wählen und kopieren oder das PNG-Bild herunterladen.
Häufige Fragen
Was ist der Unterschied zwischen Aufhellung, Abdunklung und Abtönung?
Eine Aufhellung ist die Farbe mit Weiß gemischt, eine Abdunklung mit Schwarz und eine Abtönung mit Grau.
Warum OKLab wählen?
OKLab ist ein an der menschlichen Wahrnehmung ausgerichteter Farbraum: Die Stufen wirken gleichmäßiger als bei einer RGB-Mischung.
Was unterscheidet das Tool vom Tailwind-Abstufungsgenerator?
Jener erzeugt nur die Skala 50–950; hier erhalten Sie zusätzlich ganze Reihen von Aufhellungen, Abdunklungen und Abtönungen, mit mehr Formaten.
Werden meine Farben irgendwohin gesendet?
Nein, alles wird in Ihrem Browser berechnet.