Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.
Wichtige Fakten
Kategorie
Design
Eingabetypen
textarea, select, checkbox
Ausgabetyp
text
Sample-Abdeckung
4
API bereit
Ja
Überblick
Optimieren Sie Ihre Web-Projekte mit unserem Farben-Kürzer, der 6-stellige HEX-Farbcodes effizient in ihre kompakte 3-stellige Form umwandelt, sofern dies mathematisch möglich ist.
Wann verwenden
Beim Aufräumen von CSS-Dateien zur Reduzierung der Dateigröße.
Wenn Sie HEX-Farben in einem einheitlichen, kompakten Format für Ihr Web-Design benötigen.
Zur schnellen Konvertierung von Farblisten aus Grafik-Tools in weboptimierte Kurzschreibweisen.
So funktioniert es
1Geben Sie Ihre 6-stelligen HEX-Farbcodes zeilenweise in das Eingabefeld ein.
2Wählen Sie das gewünschte Ausgabeformat, wie z. B. Großschreibung, Kleinschreibung oder ohne Raute.
3Aktivieren Sie bei Bedarf die Option, nicht kürzbare Farben mit einer Begründung in der Liste zu behalten.
4Klicken Sie auf die Schaltfläche, um die optimierten Farbcodes sofort zu generieren.
Anwendungsfälle
Minimierung von CSS-Stylesheets für schnellere Ladezeiten.
Standardisierung von Farbpaletten in Web-Projekten.
Bereinigung von exportierten Farbwerten aus Design-Software.
Beispiele
1. CSS-Optimierung für Entwickler
Frontend-Entwickler
Hintergrund
Ein umfangreiches Stylesheet enthält viele 6-stellige HEX-Codes, die den Code unnötig aufblähen.
Aufgabe
Manuelle Suche und Kürzung der Codes ist fehleranfällig und zeitaufwendig.
Verwendung
Kopieren Sie alle HEX-Werte aus der CSS-Datei in das Tool und wählen Sie das Format 'CSS format'.
Format: CSS format
Ergebnis
Alle kürzbaren Codes werden automatisch in das 3-stellige Format umgewandelt, was die Dateigröße des Stylesheets reduziert.
2. Farbpalette für Web-Design
Hintergrund
Ein Designer hat eine Liste von Farben in 6-stelliger Form erhalten, benötigt diese aber für ein Web-Framework in Kurzschreibweise.
Aufgabe
Die Farben müssen schnell und konsistent in das 3-stellige Format konvertiert werden.
Verwendung
Fügen Sie die Liste der Farben ein und wählen Sie 'lowercase' für ein einheitliches Design-System.
Format: lowercase
FAQ
Welche HEX-Farben können gekürzt werden?
Nur Farben, bei denen jedes der drei Farbpaare identische Zeichen enthält (z. B. #FFFFFF zu #FFF oder #AABBCC zu #ABC), können gekürzt werden.
Was passiert mit Farben, die nicht gekürzt werden können?
Wenn die Option 'Nicht kürzbare Farben anzeigen' deaktiviert ist, werden diese ignoriert oder unverändert gelassen, je nach Konfiguration.
Kann ich die Raute (#) vor dem Farbcode entfernen?
Ja, wählen Sie im Ausgabeformat die Option 'FFF (no hash)', um die Codes ohne das Raute-Symbol zu erhalten.
Ist das Tool für CSS-Dateien geeignet?
Absolut, die Verwendung von 3-stelligen HEX-Codes ist eine gängige Methode, um CSS-Dateien zu verkleinern und die Lesbarkeit zu verbessern.
Werden meine Daten auf einem Server gespeichert?
Nein, die Verarbeitung erfolgt direkt in Ihrem Browser, Ihre Daten verlassen zu keinem Zeitpunkt Ihr Gerät.