:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}Der Farbpalettengenerator verwandelt eine einzelne Grundfarbe in eine abgestimmte Farbgruppe, indem die Harmonieregeln der Farbrad-Harmonie verwendet werden. Wählen Sie eine Startfarbe und wählen Sie einen Modus - Schattierungen und Farbtöne, monochromatisch, komplementär, analog, triadisch oder tetradisch - und das Tool berechnet eine ausgewogene Palette mit Hex-, RGB- und HSL-Wert für jedes Farbfeld.
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.
Verwenden Sie den Farbwähler oder geben Sie einen Hex-Wert ein, um die Farbe festzulegen, auf der Ihre Palette aufgebaut ist.
Wechseln Sie zwischen Schattierungen und Tönungen, monochromatisch, komplementär, analog, triadisch und tetradisch, um unterschiedliche koordinierte Schemata zu sehen.
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.
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.
Schattierungen und Farbtöne, monochromatische, ergänzende, analoge, triadische und tetradische Schemata decken jede gemeinsame Farbbeziehung ab
Jedes Farbfeld zeigt alle drei Formate an, sodass Sie den richtigen Wert direkt in CSS, Designtools oder Code ablegen können
Exportieren Sie die gesamte Palette als: Root-Benutzerdefinierte Eigenschaften, die als Design-Token-Skala in Ihr Stylesheet eingefügt werden können
Harmonien werden in HSL berechnet, damit die Farbtöne gleichmäßig verteilt bleiben und die Leichtigkeitsschritte ausgeglichen aussehen, nicht schlammig
Pick colors and convert between HEX, RGB, and HSL formats
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.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!