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. Abdunklungsschritt (%) · Aufhellungsschritt (%) · Schritte je Seite · Alle Farben kopieren
- 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
Stelle getrennte Schritte zum Abdunkeln und Aufhellen von 1% bis 100% ein. Jede weitere Stufe mischt die Basis um einen Schritt stärker mit Schwarz oder Weiß, höchstens bis 100%. Die Endfarben können deshalb Schwarz oder Weiß erreichen; der Alpha-Wert bleibt erhalten.
- 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. Aktuelles Ergebnis exportieren. HEX / RGBA / HSL / JSON.