Farbpaletten- & Farbverlaufsgenerator

Erstellt Farbschemata aus einer Grundfarbe, erzeugt zufällige Paletten und macht Farbverläufe, die Sie als CSS kopieren oder als PNG-Bild speichern können. Nützlich, um Farben für ein Design, eine Präsentation oder eine Webseite auszuwählen.

So geht’s

1. Wählen Sie im Tab „Palette“ eine „Grundfarbe“ und ein „Schema“. Gefällt es Ihnen, drücken Sie „Dieses Schema als Palette verwenden“.
2. Drücken Sie „Erzeugen (Leertaste)“ für neue Farben; sperren Sie die, die Sie behalten wollen, und erzeugen Sie erneut.
3. Übernehmen Sie die Farben mit „HEX-Liste kopieren“, „CSS-Variablen kopieren“ oder „Als Bild speichern“, und drücken Sie „Palette merken“, um eine für später zu speichern.
4. Legen Sie im Tab „Farbverlauf“ „Typ“, „Winkel“ und „Farbstopps“ fest und kopieren Sie dann den CSS-Code oder drücken Sie „PNG speichern“.

So wird gerechnet

• Die Schemata drehen den Farbton auf dem HSL-Farbkreis: komplementär 180°, analog ±30°, triadisch 120°, geteilt komplementär 150° und 210°, quadratisch in 90°-Schritten.
• Die Kontraststufen folgen WCAG 2.2: AA erfordert 4,5:1, AAA 7:1 und großer Text 3:1.
• „Farbsehschwäche simulieren“ ist eine Näherung nach Machado et al. (2009). Sie ändert nur die Farben auf dem Bildschirm, nicht die kopierten oder gespeicherten Werte.
• Bis zu 40 gemerkte Paletten werden in diesem Browser auf diesem Gerät gespeichert.

Häufige Fragen

Wie finde ich die Komplementärfarbe?

Es ist die Farbe, die auf dem Farbkreis direkt gegenüberliegt, 180° entfernt. Stellen Sie „Schema“ auf „Komplementär“, um sie zu sehen, und tippen Sie auf das Farbfeld, um ihren HEX-Wert zu kopieren.

Wie erstelle ich einen CSS-Farbverlauf?

Tippen Sie im Tab „Farbverlauf“ auf die Leiste, um Stopps hinzuzufügen, und legen Sie ihre Farben und Positionen fest. Das CSS-Feld zeigt den Code, fertig zum Kopieren.

Warum sehen die mittleren Farben meines Verlaufs matt aus?

Stellen Sie den „Interpolationsraum“ auf OKLCH. Die mittleren Farben bleiben kräftiger, und das CSS erhält zusätzlich eine Ausweichzeile für ältere Browser.

Wie erkenne ich, ob Text auf dieser Farbe gut lesbar ist?

Jede Farbe zeigt das Kontrastverhältnis und die Stufe der besser lesbaren Textfarbe, Weiß oder Schwarz. Das Verhältnis ist (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 und L2 die relative Leuchtdichte der helleren und der dunkleren Farbe sind.