Farbabstufungen- & Farbtöne-Generator
Eine Farbe einfügen und eine vollständige Skala von Ton zu Abstufung erhalten: Aufhellungen Richtung Weiß, Abdunkelungen Richtung Schwarz, beide live. Berechnet in deinem Browser — nie gesendet.
Entwicklerhinweise
• Klassische lineare RGB-Mischung, keine HSL-Helligkeitsmischung: Aufhellung_i = Basis + (Weiß - Basis) * i/Stufen, Abdunkelung_i = Basis + (Schwarz - Basis) * i/Stufen, kanalweise in sRGB. • colorjs.io parst nur die eingefügte Farbe — die Mischung selbst ist reine Interpolation, keine weitere Farbbibliothek. • Bei i = Stufen ist die letzte Aufhellung exakt Weiß und die letzte Abdunkelung exakt Schwarz, ohne Rundungsdrift. • Beide Skalen werden immer gemeinsam angezeigt — es gibt keinen Richtungsumschalter und keine dritte „Tones“-Skala (Graumischung). • swatchFormat wählt jeweils ein CSS-Format für jedes Farbmuster; den Wert eines Farbmusters in den Farbkonverter einfügen für eine vollständige Formataufschlüsselung.
Optionen
- Stufen — Anzahl der erzeugten Farbmuster in jeder der Aufhellungs- und Abdunkelungs-Skalen. 5–15, Standard 10 — eine 5-stufige Skala eignet sich für eine schnelle Prüfung, 10–15 für eine vollständige Design-Token-Palette.
- Farbmusterformat — Das CSS-Format, das für jedes Farbmuster auf beiden Skalen angezeigt und kopiert wird: HEX, RGB oder HSL. Standard HEX, das universelle einfügefertige Format.
Verwandte CSS-Werkzeuge
Hub: Farb- & CSS-Werkzeuge. Ein Farbmuster mit dem Farbkonverter in jedes Format umwandeln, mit dem Farbkontrast-Checker den Kontrast prüfen, oder Stylesheets mit CSS minifizieren und CSS formatieren verkleinern und formatieren.
FAQ Farbabstufungen- & Farbtöne-Generator
Lokaler Ton- und Abstufungs-Skalen-Generator
Was ist der Unterschied zwischen Aufhellungen und Abdunkelungen?
Aufhellungen mischen deine Basisfarbe Richtung Weiß; Abdunkelungen mischen sie Richtung Schwarz. Beide Skalen werden immer gemeinsam aus derselben Basisfarbe und Stufenzahl erzeugt.
Wie viele Stufen kann jede Skala haben?
5 bis 15 Stufen pro Skala, Standard 10 — die weithin anerkannte Design-Token-Skalengröße. Beide Skalen teilen sich immer dieselbe Stufenzahl.
Ist das dasselbe wie ein „Tones“-Generator?
Nein. Tones mischen Richtung Grau, was dieses Werkzeug nicht erzeugt — nur Aufhellungen (Richtung Weiß) und Abdunkelungen (Richtung Schwarz), die klassische Definition.
Werden meine Farben irgendwohin hochgeladen?
Nein. Parsing und Mischung laufen vollständig in deinem Browser. FastMinify sendet die eingefügte Farbe nie an einen Server.
Farb- & CSS-Tools
Lokal eingefügte WCAG-Kontrastprüfung mit moderner CSS-Farbsyntax — Paar- und Matrixansicht, nie hochgeladen.
Weitere Werkzeugkategorien entdecken
Minimieren
Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.
Aufheben
Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.
Konvertierung
Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.
Codierung
Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.
Serialisierung
Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.
JSON Werkzeuge
Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.
SVG Werkzeuge
Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.
Verschönern
Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.
CSS-Präprozessoren
Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.
DevOps und Infrastruktur
Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.
CI/CD
GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.
Protokolle und Beobachtbarkeit
Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.
Kubernetes
Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.
Netzwerk / IP
CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.
Sicherheit und Token
JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.
API & Schemata
OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.
HTTP-Tools
cURL, HTTP-Nachrichten, URLs, HAR und Cookie/Set-Cookie lokal einfügen — formatieren und prüfen, nie gesendet.
Entwickler-Dienstprogramme
Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.
Text & Markdown
Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.
KI & LLM
Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.
Testdaten
Synthetische Feldwerte für Fixtures und DB-Seed — zuerst reservierte Telefonnummern.