Irodori彩り

Farbskalen-Generator

Jede Farbe → 50–950 Skala mit CSS-Export

Überblick Farbskalen-Generator

Jede Farbe → 50–950 Skala mit CSS-Export

Verwendung

Verwandeln Sie eine Basisfarbe in eine vollständige Skala von 50 bis 950 mit einsatzbereitem CSS- und Tailwind-Output.

Grenzen

Die Stufen nutzen feste Helligkeitsabstände; sehr gesättigte Grundfarben werden an den Enden beschnitten.

Farbskalen-Generator

Warum eine 50–950-Skala

Eine Skala gibt einem Farbton genug Stufen für Flächen, Rahmen, Text und Zustände. Stufe 50 ist die hellste Tönung, 950 die tiefste, und 500 trägt meist die Markenfarbe.

Gleichmäßige Stufen erleichtern die Pflege: Der Sprung zwischen Nachbarwerten bleibt auf jedem Bildschirm vorhersagbar.

Wie die Stufen entstehen

Jede Stufe zielt auf eine Helligkeit in OKLCH, damit die Rampe wahrnehmungsgleich bleibt und in den Schatten nicht zusammenfällt. An beiden Enden wird die Chroma gesenkt, damit helle Töne klar und dunkle satt wirken.

Häufige Fragen

Warum ist Stufe 500 nicht exakt meine Farbe?
500 liegt in der Mitte und ist der sicherste Standard für Buttons und Links. Die Eingabefarbe kann heller oder dunkler sein und landet daher auf einer Nachbarstufe.
Kann ich das exportierte CSS direkt nutzen?
Ja. Der Block definiert --brand-50 bis --brand-950. Benennen Sie das Präfix vor dem Einfügen nach Ihrem System um.
Funktioniert das auch für Grau?
Ja. Farben mit geringer Chroma ergeben eine neutrale Rampe ohne Farbstich, geeignet für Text, Rahmen und deaktivierte Zustände.

Kontrastkurve einer Skala

Am Beispiel „藍 #104E8B“: alle elf Stufen von 50–950 gegen weiße und schwarze Schrift gemessen. Grün bedeutet 4,5:1 oder besser — dort kann Fließtext stehen.

50 Weiß 1.1 Schwarz 17.2
100 Weiß 1.2 Schwarz 15.9
200 Weiß 1.4 Schwarz 13.3
300 Weiß 1.8 Schwarz 10.7
400 Weiß 2.3 Schwarz 8.1
500 Weiß 3.4 Schwarz 5.5
600 Weiß 4.8 Schwarz 4.0
700 Weiß 6.7 Schwarz 2.8
800 Weiß 9.4 Schwarz 2.0
900 Weiß 13.0 Schwarz 1.5
950 Weiß 16.2 Schwarz 1.2