Aufgabenpfad / von der Eingabe zum Ergebnis
So generierst du eine Farbabstufungsskala
- 01
Lege die Basisfarbe fest
Gib einen Hex-Wert unter Basisfarbe ein — #RGB, #RGBA, #RRGGBB und #RRGGBBAA funktionieren alle, und das Feld öffnet mit #6D5EF8. Die Basisfarbe sitzt immer in der Mitte der fertigen Skala.
- 02
Wähle die Anzahl der Abstufungen
Setze Anzahl der Abstufungen auf eine Ganzzahl von 3 bis 20 — der Standard ist 9. Eine ungerade Anzahl balanciert die dunklere und die hellere Seite gleichmäßig um die Basis; eine gerade Anzahl zentriert die Basis trotzdem und gibt der hellen Seite ein zusätzliches Farbfeld.
- 03
Generiere die Skala
Drücke Abstufungen generieren. Die Palette läuft von tiefen Schattierungen über deine Basisfarbe zu hellen Tönungen, und jedes Farbfeld ist nummeriert und mit seinem Hex-Wert beschriftet, Position 1 ist also immer die dunkelste Stufe.
- 04
Prüfe das Mischverhalten
Schattierungen unter der Basis werden Richtung Schwarz gemischt und Tönungen darüber Richtung Weiß, aber die Mischung geht nie mehr als 78 % des Weges zu einem der Extreme. Die Endstufen bleiben chromatisch und nutzbar, statt in Fast-Schwarz oder Fast-Weiß zu kollabieren.
- 05
Lade die Beispielskala
Drücke Beispiel laden, um sieben Abstufungen um #0EA5E9 zu generieren — ein vollständiger Referenzlauf, den du ansehen kannst, bevor du deine eigene Markenfarbe eingibst. Zurücksetzen stellt die Basis #6D5EF8 und die Anzahl 9 wieder her.
- 06
Kopiere oder lade die Tokens herunter
Drücke Ausgabe kopieren, um einen :root-Block mit --toolars-shade-1-…-Custom-Properties zu kopieren, oder Herunterladen, um ihn als toolars-color-shades.css zu speichern, bereit zum Einfügen in ein Stylesheet. Jede Farbfeldkarte zeigt außerdem ihren Hex-Wert zum einmaligen Kopieren.