Farbabstufungen- & Farbtöne-Generator
Eine Farbe einfügen und eine vollständige Skala von Aufhellung bis Abdunkelung erhalten: Aufhellungen Richtung Weiß, Abdunkelungen Richtung Schwarz, beide live. Berechnet in Ihrem 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, ohne 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 alle Farbmuster; fügen Sie den Wert eines Farbmusters in den Farbkonverter ein, um alle Formate zu sehen.
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, direkt einfügbare Format.
Verwandte CSS-Werkzeuge
Hub: Farb- & CSS-Werkzeuge. Wandeln Sie ein Farbmuster mit dem Farbkonverter in jedes Format um und prüfen Sie den Kontrast mit dem Farbkontrast-Checker. Verkleinern und formatieren Sie Stylesheets mit CSS minifizieren und CSS formatieren.
FAQ zum Farbabstufungen- & Farbtöne-Generator
Lokaler Generator für Aufhellungs- und Abdunkelungsskalen
Was ist der Unterschied zwischen Aufhellungen und Abdunkelungen?
Aufhellungen mischen Ihre 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 Größe einer Design-Token-Skala. Beide Skalen teilen sich immer dieselbe Stufenzahl.
Ist das dasselbe wie ein „Tones“-Generator?
Nein. Tones mischen Richtung Grau, was dieses Werkzeug nicht erzeugt. Es liefert nur Aufhellungen Richtung Weiß und Abdunkelungen Richtung Schwarz, die klassische Definition.
Werden meine Farben irgendwohin hochgeladen?
Nein. Parsing und Mischung laufen vollständig in Ihrem 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.
- SEO / Web-Tools
Meta-Tags, Open Graph und Twitter Card lokal erzeugen — Vorschauen aus Ihren Eingaben simuliert, nie von Ihrer Live-Site abgerufen.
- 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.
- Barcode-Etiketten
Code 128, EAN-13 und UPC-A im Browser zeichnen — PNG- und SVG-Download, kein GS1-Lookup.