Slopographic

Anleitung zu Slop Colors

Erste Schritte mit Slop Colors

Slop Colors ist ein Farbwähler, ein Paletten-Werkzeug und eine Kontrastprüfung auf einer Seite. Bilder und Paletten werden in Ihrem Browser gelesen und nie hochgeladen.

Slop Colors öffnen

Die Seite

Oben steht die aktuelle Farbe mit ihrem Wert in HEX, RGB, HSL, OKLCH und CMYK, jeweils mit einer Schaltfläche Kopieren. Darunter stehen vier Karten: Aus einem Bild aufnehmen, Palette, Aus dieser Farbe erstellt und Kontrastprüfung.

Das Panel rechts enthält die Felder der Farbe, was daraus erstellt werden soll, wie viele Farben in einem Bild gesucht werden und den Export. Auf dem Handy ist es ein Blatt am unteren Rand: Tippen Sie auf Einstellungen, um es zu öffnen.

Farben aus einem Bild aufnehmen

  1. „Bild öffnen…“ wählen oder ein Bild auf die Seite ziehen.
  2. Über das Bild fahren und klicken, um eine Farbe aufzunehmen; die Lupe zeigt die Pixel unter dem Zeiger.
  3. Mit den Pfeiltasten ein Pixel nach dem anderen bewegen und mit Enter die Farbe zur Palette hinzufügen.
  4. „Alle zur Palette hinzufügen“ klicken, um die Hauptfarben des Bildes zu behalten.

Tipp: In Chrome und Edge nimmt „Vom Bildschirm aufnehmen“ eine Farbe von überall auf Ihrem Bildschirm auf.

Die Palette bauen

  1. „Diese Farbe zur Palette hinzufügen“ klicken, um die aktuelle Farbe hinzuzufügen.
  2. Im Panel eine Harmonie und eine Skala wählen, dann unter einer Zeile „Als Palette verwenden“.
  3. Unter jeder Farbe der Palette verschieben ‹ und › sie, ✎ benennt sie und × entfernt sie.

Kontrast prüfen

Geben Sie eine Textfarbe und einen Hintergrund ein oder nutzen Sie im Panel „Als Textfarbe verwenden“ und „Als Hintergrund verwenden“. Das Verhältnis und die WCAG-Stufen werden sofort angezeigt, und „Textfarbe korrigieren“ findet die nächste Farbe, die AA erreicht.

Exportieren und aufbewahren

  1. Die Palette benennen und unter Exportieren ein Format wählen.
  2. „Palette herunterladen“, „Code kopieren“ oder „In Slop Drive speichern…“ klicken; „Öffnen in…“ schickt die Datei an eine andere App.
  3. Um eine Palette später wieder zu öffnen, legen Sie ihre Datei .gpl, .ase, .json oder .css auf der Seite ab.