Bild hier ablegen oder
Auf das Bild klicken, um eine Farbe auszuwählen
Farben aus Logos extrahieren ohne Quelldateien
In DACH-Designagenturen kommt es haufig vor, dass ein Kunde nur ein JPEG- oder PNG-Logo liefert, ohne die originale Illustrator- oder Figma-Datei. Dieses Tool lost das Problem in Sekunden. Bild hochladen, auf den farbigen Bereich klicken , der exakte HEX-Code erscheint sofort. In Deutschland wird dieses Vorgehen auch fur den Farbabgleich im Corporate Design eingesetzt: z.B. um die genaue Farbe eines Messebanners oder einer Verpackung fur den Webauftritt zu ubernehmen.
In der deutschen Industrie und im Bauwesen sind RAL-Farben (z.B. RAL 5002 Ultramarinblau) das Referenzsystem. Diese Pipette liefert den HEX-Wert eines Pixels; die Zuordnung zum nachsten RAL-Ton muss separat mit einem RAL-HEX-Konverter erfolgen. Fur vollstandige Palettenextraktion aus einem Bild steht der Farbpaletten-Extraktor bereit.
Farbformate
| Format | Beispiel | Typische Verwendung |
|---|---|---|
| HEX | #1a73e8 | CSS, HTML, Figma, Sketch |
| RGB | rgb(26, 115, 232) | CSS, Bildverarbeitung |
| HSL | hsl(217, 79%, 51%) | CSS, Dark-Mode-Anpassung |
| RGBA | rgba(26, 115, 232, 1) | CSS mit Transparenz |
Grenzen des Pixel-Farbwahlers
JPEG-Kompression erzeugt Artefakte , Pixel an Logokanten zeigen moglicherweise nicht die tatsachliche Flachfarbe. PNG oder SVG-Exporte liefern genauere Werte. Immer in die Mitte einer Farbflache klicken, nicht an den Rand. Unterschiedliche Monitorprofile (sRGB vs. Display P3 auf Apple-Geraten) konnen zu kleinen Abweichungen fuhren; der angezeigte Wert entspricht dem sRGB-Pixelwert. Fur den Druckbereich: HEX-zu-Pantone ist eine eigene Konvertierung, da Bildschirm- und Druckfarbraum verschieden sind.
Vom Farbwert zum Design-System
Den ermittelten HEX-Code in den Farbpaletten-Generator ubertragen, um eine vollstandige Abstufungsskala (50-900, kompatibel mit Tailwind CSS oder Material Design Tokens) zu erstellen. CSS Custom Properties direkt in den :root-Block des Stylesheets kopieren.