:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}Was ist der Farbpalettengenerator?
Der Farbpalettengenerator verwandelt eine einzelne Grundfarbe mithilfe von Farb-Rad-Harmonieregeln in einen koordinierten Farbsatz. Wählen Sie eine Startfarbe und wählen Sie einen Modus - Farbtöne und Farbtöne, monochromatisch, komplementär, analog, triadisch oder tetradisch - und das Tool berechnet eine ausgewogene Palette mit dem HEX-, RGB- und HSL-Wert für jeden Swatch.
Gute Farbkombinationen folgen vorhersehbaren Beziehungen auf dem HSL-Farbrad: Komplementärfarben sitzen einander gegenüber, analoge Farben sitzen nebeneinander und triadische Farben sind gleichmäßig verteilt. Diese von Hand zu bearbeiten bedeutet, Farbtonwinkel und Leichtigkeitswerte zu jonglieren. Dieses Tool führt die Berechnung sofort durch und zeigt das Ergebnis, damit Sie ein funktionierendes Schema auswählen können.
Alles läuft in Ihrem Browser. Passen Sie die Grundfarbe an, wechseln Sie die Modi, klicken Sie auf ein beliebiges Feld, um seinen Wert zu kopieren, oder exportieren Sie die gesamte Palette als CSS-Benutzerdefinierte Eigenschaften. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.
Die Harmonymodi stammen aus Farb-Rad-Beziehungen, rotierenden Farbton um feste Beträge um den Kreis: 180 Grad für komplementär, 120 Grad für triadisch, und kleine Schritte für analog Dass die Mathematik in HSL gemacht wird, was praktisch und nicht wahrnehmungsmäßig einheitlich ist HSL-Leichtheit behandelt Gelb und Blau mit dem gleichen Wert wie gleich leicht, und für das Auge sind sie es nicht, weshalb ein triadischer Satz auf Papier ausgewogen und unausgeglichen auf dem Bildschirm aussehen kann Überprüfen Sie jede Palette, die Sie für Text gegen einen Kontrastprüfer verwenden möchten, anstatt den Zahlen zu vertrauen. Schattierungen und Farbtöne werden durch Bewegen von Farbtönen und Sättigung erzeugt, wodurch eine Familie erkennbar in Beziehung gehalten wird, die C.
Wie verwende ich den Farbpalettengenerator?
Wählen Sie eine Grundfarbe
Verwenden Sie den Farbwähler oder geben Sie einen Hex-Wert ein, um die Farbe festzulegen, auf der Ihre Palette aufgebaut ist.
Wählen Sie einen Harmoniemodus
Wechseln Sie zwischen Schattierungen und Tönungen, monochromatisch, komplementär, analog, triadisch und tetradisch, um unterschiedliche koordinierte Schemata zu sehen.
Kopieren Sie die Farben, die Sie benötigen
Jedes Farbfeld zeigt seinen Hex-, RGB- und HSL-Wert an. Klicken Sie auf ein Farbfeld, um es zu kopieren, oder kopieren Sie die gesamte Palette als CSS-Benutzerdefinierte Eigenschaften.
Wenden Sie die Palette an
Verwenden Sie die generierten Farben für Hintergründe, Akzente und Text in Ihrem Design oder Stylesheet, damit die Harmonie auf Ihrer Benutzeroberfläche konsistent bleibt.
Hauptmerkmale
Sechs Harmonie-Modi
Schattierungen und Farbtöne, monochromatische, ergänzende, analoge, triadische und tetradische Schemata decken jede gemeinsame Farbbeziehung ab
Hex, RGB und HSL
Jedes Farbfeld zeigt alle drei Formate an, sodass Sie den richtigen Wert direkt in CSS, Designtools oder Code ablegen können
Export von CSS-Variablen
Exportieren Sie die gesamte Palette als: Root-Benutzerdefinierte Eigenschaften, die als Design-Token-Skala in Ihr Stylesheet eingefügt werden können
genaue Farbrad-Mathe
Harmonien werden in HSL berechnet, damit die Farbtöne gleichmäßig verteilt bleiben und die Leichtigkeitsschritte ausgeglichen aussehen, nicht schlammig
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!