Erstellen Sie eine analoge Farbpalette aus einer Hex-Farbe

Erstellen Sie aus einer Hex-Farbe und der gewünschten exakten Anzahl eine verlässliche analoge Farbpalette. Der Generator wandelt die Grundfarbe in HSL um, verteilt die Farben gleichmäßig über ein sechzig Grad breites, um den ursprünglichen Farbton zentriertes Fenster und gibt jedes Ergebnis als normalisierten Hex-Wert aus. Bei einer Farbe erhalten Sie den Grundton; größere Paletten schließen beide Dreißig-Grad-Grenzen ein. Die deterministische Berechnung eignet sich für Design-Tokens, Diagramme, Illustrationen und reproduzierbare Build-Abläufe.

Grundfarbe und Palettengröße auswählen

Beginnen Sie mit einer drei- oder sechsstelligen CSS-Hex-Farbe; das vorangestellte Rautezeichen ist optional. Die Kurzform wird vor der Umwandlung erweitert, sodass #36c und #3366cc dieselbe Ausgangsfarbe bezeichnen und dieselbe normalisierte Ausgabe erzeugen. Wählen Sie danach count als genaue Anzahl der gewünschten Farbfelder.

Der Wert muss eine ganze Zahl von mindestens eins sein; null und negative Zahlen werden abgelehnt, da sie keine Palette beschreiben. Bei count gleich eins bleibt der Grundfarbton unverändert. Bei zwei entstehen die Grenzfarben bei minus dreißig und plus dreißig Grad.

Bei drei liegt die Grundfarbe dazwischen. Höhere Werte fügen gleich große Abstände im selben Fenster ein, ohne die Harmonie zu verbreitern. Sättigung und Helligkeit bleiben wie bei der Grundfarbe, sodass nur der Farbton variiert.

Die Antwort enthält die normalisierte Grundfarbe, die Anzahl und jedes Farbfeld mit Index, vorzeichenbehaftetem Versatz, umlaufendem Farbtonwinkel und sechsstelligem Hex-Wert in Kleinbuchstaben.

Gleichmäßige Abstände auf dem Farbkreis verstehen

Analoge Farben liegen auf einem kreisförmigen Farbrad nebeneinander. Diese Fähigkeit verwendet ein festes Fenster von dreißig Grad unterhalb bis dreißig Grad oberhalb des Grundfarbtons, insgesamt also sechzig Grad. Ist count größer als eins, ergibt sich der Abstand aus dieser Breite geteilt durch count minus eins.

Fünf Farben verwenden dadurch -30, -15, 0, 15 und 30 Grad; vier verwenden -30, -10, 10 und 30. Weil der Farbton kreisförmig ist, läuft ein Versatz beim Überschreiten von null nahe dreihundertsechzig weiter und wird nicht zu einem ungültigen negativen Winkel. Der Algorithmus liest zunächst die RGB-Kanäle, wandelt sie in HSL um, wendet jeden Versatz an und rechnet das Ergebnis wieder in ganzzahliges RGB und Hex um.

Neutrale Farben sind ebenfalls gültig: Grau besitzt keine Sättigung, weshalb eine mathematische Farbtonänderung das sichtbare RGB nicht verändert und gleiche Hex-Werte entstehen können.

Die Palette in Produktionsabläufen einsetzen

Nutzen Sie das erzeugte Array, wenn eine reproduzierbare Familie verwandter Farben wichtiger ist als starker Kontrast. Ein Designsystem kann Indizes Eigenschaften wie accent-1 bis accent-5 zuordnen und sie bei einer Änderung der Markenfarbe neu berechnen. Ein Diagrammwerkzeug kann die Anzahl der Berichtsreihen anfordern und die Farbfelder der Reihe nach zuweisen, damit sie zusammengehörig wirken.

Illustrationssoftware kann aus einer gestalterisch ausgewählten Ausgangsfarbe kontrollierte Füll- und Detailfarben ableiten; Änderungen der Helligkeit sollten getrennt erfolgen. Das Ergebnis eignet sich auch für Snapshot-Tests, weil es weder Zufall noch Datum, Netzwerkantworten oder Modellabweichungen enthält. Bewahren Sie Grundfarbe und count als verlässliche Quelle auf.

Prüfen Sie vor der Verwendung für Text, Symbole oder Bedienelemente den Kontrast zum tatsächlichen Hintergrund: Analoge Harmonie garantiert keine WCAG-Konformität. Validieren Sie count in Ihrer Oberfläche und zeigen Sie die Fehlermeldung an, wenn der Wert kleiner als eins oder keine ganze Zahl ist.