Extrahiere automatisch 4–12 dominante Farben aus einem Bild und erzeuge HEX/RGB/HSL-Werte, WCAG-Kontrast, CSS-Variablen, eine Paletten-PNG und einen CSS-Verlauf aus den extrahierten Farben direkt im Browser.
JPG, PNG, WebP, GIF, SVG und andere Bilder, die Ihr Browser lesen kann
/* CSS erscheint nach der Palettenextraktion. */
Ein Palettenextraktor fasst abgetastete Pixel zusammen; Es weiß nicht, welches Objekt auf dem Foto semantisch wichtig ist. Gute Ergebnisse lassen sich erzielen, wenn man eine geeignete Farbanzahl, Sampling-Präzision und Kontrastreferenz wählt und dann die erzeugte Palette und den Farbverlauf als Design-Ausgangspunkte und nicht als absolute Wahrheit betrachtet.
Vier bis sechs Farben sorgen häufig für eine klarere Benutzeroberflächenpalette, während bei einer größeren Anzahl mehr Akzente bei komplexen Fotos erhalten bleiben. Wenn benachbarte Farbfelder nahezu identisch aussehen, verringern Sie die Farbanzahl oder erhöhen Sie die Sampling-Präzision, anstatt redundante Farbtöne beizubehalten.
Eine dichtere Abtastung kann kleine Akzente erfassen, erfordert jedoch mehr Browserarbeit. Eine schnellere Abtastung eignet sich für große Bilder oder schnelle Erkundungen. Wenn eine kleine, aber wichtige Farbe fehlt, wiederholen Sie den Vorgang mit einer feineren Einstellung.
Eine Farbe, die auf einem Hintergrund klar erscheint, kann auf einem anderen Hintergrund möglicherweise den Barrierefreiheitskontrast verfehlen. Verwenden Sie die Kontrastreferenz als Richtlinie und überprüfen Sie dann die Text- und UI-Kombinationen mit der tatsächlichen Vordergrundgröße, -stärke und dem Hintergrund, die im endgültigen Design verwendet werden.