Farbpalette erstellen

Wählen Sie eine Grundfarbe; das Werkzeug ergänzt passende Farben nach fünf Regeln des Farbkreises.

Grundfarbe

HEX-Wert, zum Beispiel aus Ihrem Logo.

Farbschema

#00C742
rgb(0, 199, 66)
#00C9A7
rgb(0, 201, 167)
#0085C7
rgb(0, 133, 199)

Palette exportieren als

CSSSCSSTailwind

:root {
  --color-1: #00c742;
  --color-2: #00c9a7;
  --color-3: #0085c7;
}

So geht’s

Grundfarbe wählen: im Farbwähler oder als HEX-Wert, zum Beispiel aus Ihrem Logo.
Farbschema wählen. Die Palette ändert sich sofort.
Einzelne Farben als HEX-Wert kopieren oder die ganze Palette als CSS, SCSS oder Tailwind übernehmen.

Beispiele

Analog

Die Nachbarfarben im Farbkreis, je 30 Grad daneben. Ruhig und einheitlich, gut für Flächen und Hintergründe.

#00C742 #00C9A7 #0085C7

Komplementär

Die Gegenfarbe, 180 Grad gegenüber. Starker Kontrast für einen einzelnen Hinweis oder Knopf.

#00C9A7 #C70021

Triadisch

Drei Farben im Abstand von 120 Grad. Lebhaft; meist führt eine Farbe, die beiden anderen setzen Akzente.

#00C9A7 #A600C7 #C7A600

Monochromatisch

Eine Farbe in fünf Helligkeitsstufen, für Oberflächen mit nur einer Markenfarbe.

#00332B #007A66 #00C9A7 #14FFD8 #61FFE5

Häufige Fragen

Wie übernehme ich die Farben in Tailwind?

In Tailwind 3 fügen Sie den Tailwind-Export in tailwind.config.js unter theme.extend ein. Danach stehen Klassen wie bg-brand-1 oder text-brand-2 bereit.

Wie nutze ich den CSS-Export?

Fügen Sie den Block am Anfang Ihrer CSS-Datei ein und verwenden Sie die Farben mit var(--color-1), var(--color-2) und so weiter.

Ist Text auf diesen Farben gut lesbar?

Das prüft die Palette nicht. Für normalen Text verlangt WCAG 2.2 ein Kontrastverhältnis von mindestens 4,5 : 1 (Erfolgskriterium 1.4.3, w3.org).

Werden meine Farben gespeichert?

Nein. Die Palette wird in Ihrem Browser berechnet, nichts wird an uns übertragen.