Farbpalette aus Bild

Über das Bauen einer Palette aus einem Foto

Jeder Gestalter kennt das: Ein Foto trifft genau die Stimmung, die das Projekt braucht, und die Aufgabe besteht darin, diese Stimmung aus dem Bild in ein Stylesheet zu bekommen.

Raten funktioniert nicht. Ein Ton, der auf dem Bildschirm als „warmes Grau" wirkt, ist selten das Grau, das Sie getippt hätten. Richtig wird es nur, wenn Sie das tatsächliche Pixel nehmen.

Foto hineinziehen, mit der Lupe darüberfahren und die gewünschten Töne anklicken. Jeder landet unten in Ihrer Palette, mit HEX-, RGB- und HSL-Wert zum Kopieren.

So wird es benutzt

• Auf Klicken zum Hochladen klicken, ein Foto auf die Seite ziehen oder eine Bild-URL einfügen
• Mit dem Zeiger über das Bild fahren — die Lupe zeigt das Pixel darunter
• Klicken, um diese Farbe zur Palette hinzuzufügen
• So viele auswählen, wie Sie brauchen — fünf oder sechs ergeben meist eine Palette
• Klicken Sie ein Feld in Ihrer Palette an, um es zurückzuholen: Das große Feld und die HEX-, RGB- und HSL-Werte springen darauf um, und der HEX-Wert wird kopiert
• Mit HEX / RGB / HSL kopieren das Format nehmen, das Sie brauchen

Warum Sie die Farben selbst auswählen

Manche Werkzeuge raten eine Palette automatisch, indem sie die häufigsten Farben gruppieren. Das klingt besser, als es ist. Die *häufigste* Farbe in einem Foto ist meist eine große, stumpfe Fläche — Himmel, Wand, Schatten — und der Ton, der dem Bild seinen Charakter gibt, ist oft ein kleiner: der Rost an einer Tür, das Grün eines einzelnen Blattes, ein Glanzpunkt auf einer Tasse.

Sie sehen, was was ist. Mit der Lupe nehmen Sie bei voller Vergrößerung genau dieses Pixel, sodass die Palette die ist, die Sie gemeint haben, und nicht die, die ein Durchschnitt hervorgebracht hat.

Die Palette ist ein Ort, zu dem Sie zurückkehren können

Die Felder sind nicht nur ein Protokoll dessen, was Sie angeklickt haben. Klicken Sie eines an, und es wird zur aktuellen Farbe — das große Feld und alle drei Anzeigen springen darauf um, und das gerade betrachtete ist umrandet, damit Sie sehen, welches gemeint ist.

Genau das macht den Vergleich zweier Töne praktikabel: beide aus dem Foto nehmen, dann zwischen ihnen hin und her klicken und die Werte ablesen, statt quer über das Bild nach dem Pixel von vorhin zu suchen.

Drei Formate, weil verschiedene Stellen verschiedene wollen

Jede ausgewählte Farbe wird gleichzeitig in allen drei angezeigt:

• HEX — #3f7a5e. CSS, Design-Programme, fast überall
• RGB — rgb(63, 122, 94). Praktisch, wenn Sie die Kanäle einzeln brauchen
• HSL — hsl(154, 32%, 36%). Das Format für eine Farbskala — Farbton behalten, Helligkeit verschieben, und Sie haben eine hellere und eine dunklere Variante, die zusammengehören

Wofür es genutzt wird

• Eine Markenfarbe aus einem Logo holen, wenn niemand das Markenhandbuch findet
• Eine Website- oder Präsentationspalette aus einem Titelfoto bauen
• Farbe, Stoff oder Garn zu einem Bild des echten Gegenstands passend wählen
• Den genauen HEX-Wert einer Farbe in einem Screenshot bekommen
• Die Farben eines Gemäldes oder Fotos finden, mit dem Sie arbeiten wollen
• Prüfen, was eine Farbe wirklich ist, und nicht, wie sie neben einer anderen aussieht

Gut zu wissen

• Nichts wird hochgeladen. Das Bild wird in der Seite gelesen und verlässt Ihr Gerät nie
• Funktioniert mit PNG, JPG, GIF und WebP
• Sie können statt einer Datei auch eine Bild-URL einfügen — manche Server verbieten anderen Seiten aber das Auslesen ihrer Pixel (CORS). Dann laden Sie das Bild herunter und laden die Datei hoch
• Farben werden aus den echten Pixeln in voller Größe gelesen, nicht aus der verkleinerten Vorschau, der Wert ist also exakt
• Funktioniert auf Handy und Tablet ebenso wie am Computer
• Es ist derselbe Farbwähler wie Farbwähler aus Bild — nutzen Sie jene Seite, wenn Sie eine einzelne Farbe statt eines Satzes brauchen

Verwandte Werkzeuge

• Farbwähler aus Bild — dasselbe Werkzeug, auf eine einzelne Farbe zugeschnitten
• Farbwähler — eine Farbe aus einem Farbkreis statt aus einem Foto wählen
• Farbkontrast prüfen — prüfen, ob Ihre Palette lesbar ist, bevor Sie sie einsetzen
• CSS-Verlauf erstellen — zwei Ihrer neuen Farben zu einem Verlauf mischen
• Wortwolke erstellen — noch ein Ort, an dem eine Palette zum Einsatz kommt