Generator für analoge Farben

Analoge Farben liegen nebeneinander auf dem Farbkreis, teilen also eine Familie von Untertönen und wirken in Oberflächen, Markensystemen und Illustrationen von Natur aus harmonisch. Dieser Generator nimmt eine CSS-Hex-Grundfarbe und einen positiven Farbton-Verschiebungswinkel in Grad, wandelt die Grundfarbe in HSL um und bildet dann die beiden Nachbarn, indem er diesen Winkel subtrahiert und addiert, während Sättigung und Helligkeit festgehalten werden. Das Ergebnis ist eine Palette aus drei Feldern — minus, Basis und plus — zurückgegeben als Hex, RGB-Ganzzahlen, HSL-Komponenten und ein sofort verwendbares palette-Array. Die klassische Designpraxis nutzt dreißig Grad für eine enge Familie und größere Schritte, wenn Sie mehr Abstand wünschen, ohne zum komplementären Kontrast zu springen. Ungültige Hex-Codes und Winkel außerhalb des Bereichs scheitern mit einem klaren Validierungsfehler, statt eine Palette zu erfinden.

Wie analoge Farbtonverschiebungen funktionieren

Beginnen Sie mit einer Grundfarbe als CSS-Hex-Zeichenkette wie #3366cc oder der Kurzform #36c. Der Löser expandiert dreistelliges Hex, zerlegt die Rot-, Grün- und Blaukanäle im Bereich von null bis zweihundertfünfundfünfzig und wandelt dieses RGB-Tripel mit den Standardformeln von CSS und W3C in HSL um, sodass der Farbton in Grad auf einem Kreis von null bis dreihundertsechzig liegt, während Sättigung und Helligkeit Prozentwerte sind. Der Winkelparameter ist eine positive Gradzahl, strikt größer als null und höchstens einhundertachtzig.

Die beiden analogen Nachbarn entstehen, indem der Farbton auf Grundfarbton minus Winkel und Grundfarbton plus Winkel bewegt wird, mit Überlauf durch null, wenn der Weg die rote Kante des Kreises überschreitet, und ohne Sättigung und Helligkeit zu verändern, damit die Familie im selben Chroma- und Wertband bleibt. Jedes resultierende HSL-Tripel wird mit demselben Hue-to-RGB-Pfad zurück in ganzzahliges RGB gewandelt, den Browser-Farbmodule verwenden, und dann als kleingeschriebenes Hex, als rgb(...)-Zeichenkette und als hsl(...)-Zeichenkette formatiert.

Was Sie senden und was Sie zurückbekommen

Senden Sie ein Pflichtfeld color als Hex-Zeichenkette und ein Pflichtfeld angle als endliche Gradzahl. Gültige Farbformen sind drei oder sechs Hexadezimalziffern mit optionalem führendem Hash; Groß- und Kleinschreibung wird ignoriert, und die Ausgabe normalisiert stets auf ein sechsstelliges kleingeschriebenes Hex mit Hash. Der Winkel muss größer als null und höchstens einhundertachtzig sein, damit die beiden Nachbarn unterscheidbar bleiben und nicht zu einer komplementärartigen Einhundertachtzig-Grad-Drehung zusammenfallen, die eine andere Harmoniewirkung hätte.

Typische Prüfungen sind ein mittleres Blau #3366cc mit dreißig Grad für eine klassische kühle Familie, reines Rot #ff0000 mit dreißig Grad für warme Orange- und Magenta-Nachbarn sowie ein kurzes dreistelliges Hex zur Bestätigung der Expansion.

Wo analoge Paletten in der Praxis auftauchen

Produktdesigner bauen Komponentenzustände, Diagrammreihen und Marketing-Hero-Verläufe, die verwandte Farbtöne ohne die hohe Spannung komplementärer Paare brauchen; ein fester Winkel hält Token über Designsysteme hinweg reproduzierbar. Markenteams leiten sekundäre und tertiäre Markenfarben aus einem primären Hex ab, wenn ein Styleguide nur ein offizielles Farbfeld liefert, aber dennoch eine kontrollierte Familie für Illustration und Social-Templates wünscht. Frontend-Entwickler erzeugen CSS-Custom-Properties und Tailwind-artige Token-Maps aus einer einzigen Ausgangsfarbe, sodass helle und dunkle Themes auf derselben Farbtonachse bleiben, während sich anderswo nur die Helligkeit ändert.

Autoren von Datenvisualisierungen vergeben Reihenfarben, die unterscheidbar und dennoch stimmig bleiben, für kategoriale Diagramme, in denen komplementäre Zusammenstöße Gegensatz statt Gruppierung suggerieren würden. Kurs- und Workshop-Leiter vermitteln Farbtheorie mit Live-Beispielen: Studierende geben ein Lieblings-Hex ein, probieren dreißig gegen fünfundvierzig gegen sechzig Grad und sehen sofort, wie weit die Familie um den Kreis wandert. Wenn Sie später komplementäre oder triadische Schemata, eine reine HSL-zu-RGB-Umrechnung, die Suche nach der nächsten benannten CSS-Farbe oder WCAG-Kontrastprüfungen benötigen, behandeln Sie diese als eigene Suchintentionen und Landings, statt diese Generator-Seite für analoge Farben zu überladen.