Wie man Bildfarben auswählt und eine Palette erstellt.

Öffnen Sie den Bildfarbwähler und laden Sie ein unterstütztes Bild hoch oder probieren Sie das Beispiel aus. Die automatische Extraktion lädt die Quelle auf den Server hoch. Das Beispiel in diesem Leitfaden ist collage-botanical.jpg, ein 1200 x 900 Foto von Blumen, Blättern und einem pfirsichfarbenen Hintergrund.

Lassen Sie Farben zum Extrahieren auf 6 und wählen Sie Dominant für das Beispiel. Dominant bevorzugt die Hauptfarben des Bildes, während Lebendig farbenfrohen Akzenten mehr Einfluss verleiht. Eine Anfrage kann 3 bis 12 Farben verwenden; ein Bild mit weniger deutlich sichtbaren Gruppen liefert möglicherweise weniger.

Das tatsächliche dominante Ergebnis enthält #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Die größte Gruppe ist #E3B49F bei etwa 28.88% der abgetasteten sichtbaren Pixel. Die Extraktion verwendete eine 512 x 384 Stichprobe; diese Prozentsätze sind keine exakte Zählung des Bildes in voller Auflösung.

Klicken oder tippen Sie auf das Bild, um ein Pixel mit der Lupe zu untersuchen. Fokussieren Sie das Bild und verwenden Sie die Pfeiltasten, um ein Pixel zu bewegen, Umschalt plus Pfeiltaste, um zehn zu bewegen, dann Eingabetaste zum Auswählen. Kopieren Sie HEX, RGB oder HSL mit der jeweiligen Kopierschaltfläche oder verwenden Sie Zur Palette hinzufügen.

Wählen Sie ein Farbfeld aus, um dessen HEX-Wert oder Farbe zu ändern, es nach links oder rechts zu verschieben oder zu entfernen. Eine benutzerdefinierte Farbe akzeptiert einen HEX-Wert Ihrer Wahl. „Farbe sperren“ bewahrt ein ausgewähltes Farbfeld, wenn „Palette aktualisieren“ oder eine geänderte Extraktionseinstellung eine neue Startpalette generiert.

„Sampling & Transparenz“ bietet Quellfarbe und Komposition über einen Hintergrund. Die Quellfarbe beinhaltet bei Bedarf die Deckkraft in kopierten Codes; die Komposition zeigt das Pixel über dem gewählten Beispiel-Hintergrund gemischt. Die Palettenfelder selbst sind undurchsichtige RGB-Werte. Bearbeitete und ausgewählte Farben haben keinen geschätzten Quellprozentsatz.

Öffnen Sie „Farbkontrast prüfen“. Legen Sie Text und Hintergrund mit den Farbsteuerelementen fest, geben Sie HEX-Codes ein oder verwenden Sie die ausgewählte Farbe für eine der beiden Seiten. Das Live-Textbeispiel ermöglicht den Vergleich des Paares, und das Verhältnis wird von separaten Ergebnissen für Normal AA, Normal AAA, Large AA und Large AAA begleitet.

Wählen Sie ein Paar für den beabsichtigten Zweck aus, anstatt anzunehmen, dass jede extrahierte Farbe als Text verwendet werden kann. Ein helles Pfirsich und ein helles Lila können in einem Foto zusammenpassen, während sie eine schlechte Text-Hintergrund-Kombination abgeben.

Dieses Steuerelement prüft nur das jeweilige Farbpaar auf Textkontrast. Es ist kein vollständiges Barrierefreiheits-Audit und entscheidet nicht darüber, ob Typografie, Tastaturinteraktion oder der Rest des Designs nutzbar sind.

Für eine schnelle Übergabe kopieren Sie einen einzelnen Code oder verwenden Sie „Paletten-HEX-Farben kopieren“. Wählen Sie für eine Datei „Speichern unter“ und dann „Start“. PNG erstellt ein beschriftetes Palettenbild; SVG behält die Farbfelder und Beschriftungen als Vektorinhalt bei; CSS liefert nummerierte Farbvariablen; JSON enthält HEX, RGB und HSL-Werte.

Das unbearbeitete Sechs-Farben-Beispiel exportiert palette.png mit 600 x 500 Pixeln und 9,163 Bytes. Die Reihenfolge der Farbfelder entspricht der Palette. Ihre endgültige Palette kann nach der Bearbeitung 1 bis 12 Farben enthalten, auch wenn die automatische Startanzahl anders war.

Laden Sie die Datei herunter, bevor Sie die Seite verlassen oder aktualisieren. Der endgültige Export lädt die Quelle und die ausgewählten Farben zur Serververarbeitung hoch. Es erstellt eine neue Palettendatei und färbt das Originalfoto weder um noch ersetzt es dieses.