Kostenloser HEX-Farbpalettengenerator

Eine Farbe als Ausgangspunkt, eine Palette für deine Website. Entdecke Kombinationen, helle und dunkle Töne sowie Farben mit festen Rollen. Kopiere die CSS-Variablen für dein Projekt.

Basisfarbe (HEX)

Gib #RGB oder #RRGGBB ein, zum Beispiel #0EA5E9.

Basisfarbe (HEX)

Farbvorlagen

Palettenübersicht

Entdecke die Basisfarbe und die daraus erstellten Farbkombinationen.

Basisfarbe (HEX)

#2563EB

Farbton: 221Sättigung: 83%Helligkeit: 53%

Farbharmonien

Analog A

#45C7E4

Analog B

#6345E4

Komplementär

#E6AB2A

Triadisch A

#E2386D

Triadisch B

#6DE238

Farbabstufungen (50–900)

Entdecke helle und dunkle Töne für Hintergründe, Rahmen und Zustände der Benutzeroberfläche.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

Semantische Farben

Nutze Farben mit definierten Rollen für eine einheitliche Farbpalette auf deiner Website.

Primärfarbe

Farbe für primäre Aktionen

#2563EB

Sekundärfarbe

Farbe für unterstützende Elemente

#6C59D5

Akzentfarbe

Farbe für visuelle Hervorhebungen

#E3AA2D

Hintergrund

Farbe für Seitenhintergründe

#F7F7F8

Fläche

Farbe für Kartenhintergründe

#E8E9EE

Text

Farbe für den Fließtext

#1B212C

CSS-Variablen

Kopiere die semantischen Farben und Farbabstufungen in dein Stylesheet.

:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}

Was ist ein HEX-Farbpalettengenerator?

Ein HEX-Farbpalettengenerator erstellt zusammengehörige Farben aus einem HEX-Code. Dieses Tool erzeugt Farbharmonien, Farbabstufungen und sechs semantische Farben sowie CSS-Variablen zum Kopieren.

So erstellst du eine Farbpalette aus einem HEX-Code

Wähle eine Basisfarbe, prüfe die erstellte Palette und kopiere die benötigten Werte. Starte mit einem HEX-Code, dem Farbwähler oder einer zufälligen Farbe.

Schritt 1
Basisfarbe auswählen
Gib einen HEX-Code ein, nutze den Farbwähler oder wähle Zufällige Farbe. Klicke nach einer manuellen Eingabe auf Palette erstellen, um die Farbwerte anzusehen.
Schritt 2
Farbpalette prüfen
Vergleiche die Basisfarbe mit analogen, komplementären und triadischen Kombinationen. Erkunde verschiedene Farbideen für deine Website oder Marke.
Schritt 3
Abstufungen und Farbrollen erkunden
Prüfe die Abstufungen von 50 bis 900 und die sechs semantischen Farben. Wähle Helligkeit und Rolle passend zum jeweiligen Bereich deiner Oberfläche.
Schritt 4
Farben und CSS-Variablen kopieren
Kopiere einzelne Farbwerte oder die erstellten CSS-Variablen. Füge sie in dein Stylesheet ein und nutze die Palette auf deiner Website oder im Designsystem.

Eine Palette, sechs Einsatzmöglichkeiten

Wähle Farben für Hintergründe, Buttons und Texte aus derselben Palette. Diese sechs Anwendungen helfen dir, die erstellten Farben im Website-Design einzusetzen.

Hintergründe und Rahmen

Vergleiche helle und dunkle Abstufungen für Seitenhintergründe, Kartenflächen und Rahmen. Nutze die Farbskala zur Orientierung bei der Gestaltung deiner Website.

Hover-Zustände

Wähle Farben für Buttons und Links beim Darüberfahren mit dem Mauszeiger. Prüfe jede Kombination in deiner Oberfläche, bevor du sie einsetzt.

Produktoberflächen

Weise Primär-, Sekundär-, Akzent-, Hintergrund-, Flächen- und Textfarben feste Rollen zu. Nutze diese Rollen in der gesamten Produktoberfläche.

Markenfarbpaletten

Beginne mit deiner Markenfarbe und vergleiche analoge, komplementäre und triadische Kombinationen. Finde damit eine Farbrichtung für deine Website.

Designsysteme

Kopiere semantische Farben und Abstufungen in dein Designsystem. So können wiederverwendbare Komponenten auf dieselben Farbwerte zurückgreifen.

CSS-Stylesheets

Füge die CSS-Variablen in dein Stylesheet ein und referenziere sie in deinen Stilen. Verwende dieselben Farbdefinitionen in Seiten und Komponenten.

Von der Farbwahl zum CSS, an einem Ort

Vergleiche Farbharmonien, Abstufungen und Farben mit definierten Rollen in einem kostenlosen Tool. Kopiere anschließend einzelne Werte oder CSS-Variablen für dein Projekt.

Kombinationen aus einer Farbe

Erstelle analoge, komplementäre und triadische Kombinationen aus deinem HEX-Code. Vergleiche die Möglichkeiten für die Farbgestaltung deiner Website.

Abstufungen von hell bis dunkel

Sieh dir die Abstufungen mit den Nummern 50 bis 900 an, von hell bis dunkel. Wähle passende Töne für Hintergründe, Rahmen und weitere UI-Elemente.

Sechs Farben mit klaren Rollen

Erhalte Primär-, Sekundär-, Akzent-, Hintergrund-, Flächen- und Textfarben. Verwende diese sechs Rollen für eine einheitliche Farbwahl auf deiner Website.

CSS-Variablen direkt kopieren

Kopiere die semantischen Farben und Abstufungen als CSS-Variablen. Füge sie in dein Stylesheet ein und nutze die Werte in den Elementen deiner Website.

Häufig gestellte Fragen

Ein HEX-Farbpalettengenerator erstellt zusammengehörige Farben aus einem HEX-Code. Dieses Tool erzeugt Farbharmonien, Farbabstufungen und sechs semantische Farben sowie CSS-Variablen zum Kopieren.

Gib einen gültigen drei- oder sechsstelligen HEX-Code ein und klicke auf Palette erstellen. Du kannst auch den Farbwähler nutzen, eine Farbvorlage auswählen oder Zufällige Farbe wählen.

Die Abstufungen bieten helle und dunkle Farbtöne mit den Nummern 50 bis 900. Nutze sie als Ausgangspunkt für Hintergründe, Rahmen und Hover-Zustände. Prüfe den Textkontrast im fertigen Design.

Klicke im Bereich CSS-Variablen auf Kopieren und füge die Variablen in dein Stylesheet ein. Referenziere sie in deinen CSS-Regeln, um die semantischen Farben und Farbabstufungen anzuwenden.

Kostenloser HEX-Farbpalettengenerator

Was ist ein HEX-Farbpalettengenerator?

So erstellst du eine Farbpalette aus einem HEX-Code

Basisfarbe auswählen

Farbpalette prüfen

Abstufungen und Farbrollen erkunden

Farben und CSS-Variablen kopieren