Farbpaletten-Generator
Erzeugen Sie harmonische Farbpaletten aus jeder beliebigen Grundfarbe. Unterstützt komplementäre, analoge, triadische und monochromatische Schemata.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBSo verwenden Sie dieses Tool
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
Was ist der Farbpaletten-Generator?
Die Farbtheorie definiert harmonische Beziehungen anhand der Positionen auf dem Farbkreis. Komplementärfarben liegen einander gegenüber (180°). Analoge Farben sind benachbart (30°). Triadische Schemata verwenden drei gleich weit voneinander entfernte Farben (120°). Dieses Tool berechnet jedes davon aus der von Ihnen gewählten Grundfarbe und liefert Ihnen eine Ausgangspalette, die auf bewährter Farbtheorie beruht.
Häufige Anwendungsfälle
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
Häufig gestellte Fragen
Welches Schema eignet sich am besten für Websites?▼
Verwandte Tools
Farbkonverter (HEX/RGB/HSL)
Wandeln Sie Farben zwischen den Formaten HEX, RGB und HSL um. Wählen Sie eine Farbe visuell aus oder geben Sie die Werte manuell ein.
CSS-Box-Shadow-Generator
Erstellen Sie box-shadow-Werte in CSS auf visuelle Weise. Vorschau in Echtzeit und Kopieren des generierten CSS.
CSS-Verlaufsgenerator
Erstellen Sie lineare und radiale CSS-Verläufe. Wählen Sie die Farben visuell aus und kopieren Sie das generierte CSS.
Cubic-Bezier-Easing-Kurven-Generator
Erstellen Sie cubic-bezier-Easing-Kurven für CSS. Inklusive standardmäßiger Voreinstellungen.
CSS-Border-Radius-Generator
Erstellen Sie komplexe border-radius-Werte in CSS auf visuelle Weise. Unabhängige Steuerung jeder Ecke.
CSS-clamp()-Generator
Erzeugen Sie fluide, responsive CSS-Werte mit clamp(). Skaliert gleichmäßig zwischen Mindest- und Höchstgrößen über die Viewport-Bereiche hinweg.