Was ist der Unterschied zwischen einer Aufhellung und einer Abdunklung?

Eine Aufhellung ist eine mit Weiß gemischte Farbe (heller); eine Abdunklung ist eine mit Schwarz gemischte Farbe (dunkler) — zusammen bilden sie eine Farbskala.

Wie viele Stufen erzeugt das?

Vier Aufhellungen, die Grundfarbe und vier Abdunklungen — insgesamt neun Stufen, ähnlich einer typischen 50-900-UI-Farbskala.

Farbton- und Abtönungs-Generator

Erzeuge Aufhellungen und Abdunklungen jeder Grundfarbe.

Dieses Tool läuft vollständig in deinem Browser. Deine Dateien werden niemals auf einen Server hochgeladen.

Tints (mixed with white)

#d8e6fd

#b1cdfb

#89b4fa

#629bf8

Base

#3b82f6

Shades (mixed with black)

#2f68c5

#234e94

#183462

#0c1a31

Was dieser Generator macht

Baut aus einer Grundfarbe eine neunstufige Farbskala: vier hellere Aufhellungen Richtung Weiß, die Grundfarbe selbst und vier dunklere Abdunklungen Richtung Schwarz.

Anwendung

Gib eine drei- oder sechsstellige HEX-Farbe ein. Die Grundfarbe wird normalisiert und acht Aufhellungs-/Abdunklungsmuster erscheinen sofort; klicke auf ein Muster, um seinen HEX-Wert zu kopieren.

Rechenbeispiel

Eine Grundfarbe #3b82f6 erzeugt Aufhellungen bei 80 %, 60 %, 40 % und 20 % Richtung Weiß sowie Abdunklungen bei 20 %, 40 %, 60 % und 80 % Richtung Schwarz — insgesamt neun Muster.

Wie die Mischung berechnet wird

Jede Stufe interpoliert die Rot-, Grün- und Blaukanäle der Grundfarbe linear zu Weiß (255, 255, 255) für Aufhellungen oder zu Schwarz (0, 0, 0) für Abdunklungen, im angegebenen Prozentsatz, und rundet das Ergebnis.

Wahrnehmungsgrenzen

Dies ist direkte sRGB-Kanalinterpolation, keine perzeptuelle HSL-, OKLCH- oder gammakorrekte Mischung; gleiche Prozentschritte wirken daher für das Auge nicht immer gleich abgestuft — manche Schritte können größer wirken als andere.

Praktische Anwendung

Das Neun-Farben-Set eignet sich gut als Ausgangspunkt für Hover-/Aktiv-Zustände, Rahmen, Hintergründe und Text-auf-Hintergrund-Kombinationen in einem Designsystem — prüfe den Kontrast separat, bevor du ein Paar für Text verwendest.

Datenschutz

Die Erzeugung erfolgt vollständig in deinem Browser; die eingegebene Farbe wird nicht hochgeladen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen einer Aufhellung und einer Abdunklung?: Eine Aufhellung ist eine mit Weiß gemischte Farbe (heller); eine Abdunklung ist eine mit Schwarz gemischte Farbe (dunkler) — zusammen bilden sie eine Farbskala.
Wie viele Stufen erzeugt das?: Vier Aufhellungen, die Grundfarbe und vier Abdunklungen — insgesamt neun Stufen, ähnlich einer typischen 50-900-UI-Farbskala.
Wofür werden Abdunklungen und Aufhellungen verwendet?: Sie werden häufig für Hover-/Aktiv-Zustände, Rahmen, Hintergründe und Text-auf-Hintergrund-Kombinationen in einem Designsystem verwendet.

Farbpaletten-Generator

Erzeuge mit einem Klick eine zufällige 5-Farben-Palette.

Komplementärfarben-Generator

Finde die Komplementärfarbe zu jeder Hex-Farbe.

CMYK-Farbkonverter

Konvertiere jede Hex- oder RGB-Farbe für den Druck in CMYK.

Analoge Farben-Generator

Erzeuge ein harmonisches analoges Farbschema aus jeder Grundfarbe.

Zufälliger Farbgenerator

Erzeuge mit einem Klick zufällige Hex- und RGB-Farben.

Triadischer Farben-Generator

Erzeuge ein ausgewogenes triadisches Farbschema aus jeder Grundfarbe.