Der Farbpaletten-Generator macht aus einem Startfarbton einen fertigen Satz harmonischer Farben. Sie wählen einen Harmoniemodus und einen Grundton, und der Generator ordnet die Begleitfarben für Sie: die Standardansicht ist ein Komplementärpaar, Blau #428CD7 und Orange #D78C42, berechnet im Moment, in dem die Seite lädt. Alles läuft im Browser, daher bleiben die Paletten, die Sie bauen, auf Ihrem Gerät.
Fünf Harmoniemodi, ein Regler
Die fünf Modus-Tasten sind der Kern des Tools. Komplementär liefert 2 Farben, den Grundton und den Ton 180 Grad entfernt. Analog liefert 4, bei 30 und 60 Grad auf einer Seite und 30 Grad auf der anderen. Triadisch liefert 3, im Abstand von 120 Grad. Tetradisch liefert 4, bei 90, 180 und 270 Grad. Split-Komplementär liefert 3, bei 150 und 210 Grad. Der Farbton-Regler läuft von 0 bis 360 und steht standardmäßig auf 210, einem mittleren Blau, und alle Versatzwerte wandern über den Farbkreis hinaus, daher ergibt eine Basis von 340 im Analogmodus Töne bei 340, 10, 40 und 310.
Feste Sättigung und Helligkeit, 65 und 55
Es gibt keine Regler für Sättigung oder Helligkeit, denn beide sind Konstanten: Jede Farbe, die das Tool ausgibt, wird mit 65% Sättigung und 55% Helligkeit berechnet, und nur der Farbton ändert sich, von Modus zu Modus und beim Verschieben des Reglers. Das hält alle Farben der Palette beim selben visuellen Gewicht, daher liest sich das Set als eine Familie und nicht als zufälliges Gewirr. Die Umwandlung selbst ist der Standard-HSL-zu-Hex-Algorithmus, und das Ergebnis ist immer ein 7-stelliger Hex-Code in Großbuchstaben, wie #428CD7.
Die Palette aktualisiert sich live
Es gibt keinen Generieren-Button. Die Palette wird jedes Mal neu berechnet, wenn Sie auf eine Modus-Taste klicken oder den Regler bewegen, daher verfolgen die Farbfelder Ihre Eingabe ohne Zwischenschritt. Klicken Sie auf Tetradisch, und Sie haben sofort vier Farbfelder statt zwei; verschieben Sie den Ton um ein paar Grad, und alle Felder wandern in dieselbe Richtung. Das macht das Erkunden schnell: Sie können den ganzen Kreis in Sekunden durchfahren und dort stoppen, wo das Set passt.
Der Zufalls-Button
Der Würfel-Button wählt einen ganzen Farbton zwischen 0 und 359, springt der Regler dorthin, und der bereits gewählte Modus bleibt erhalten, dann wird die Palette genau so neu berechnet, wie wenn Sie den Regler selbst dorthin gezogen hätten. Es ist ein schneller Weg, sich von einer Farbe zu lösen, zu der Sie immer wieder zurückkehren: Werfen Sie ein paar Mal, bis ein Grundton sitzt, und feilen Sie dann per Regler von Hand nach.
Farben kopieren, einzeln oder alle auf einmal
Ein Klick auf ein beliebiges Farbfeld kopiert genau diesen Hex-Wert in die Zwischenablage, zum Beispiel #8C42D7 aus der Analog-Menge bei Ton 210. Der Alle-kopieren-Button kopiert stattdessen die gesamte Palette als kommagetrennte Liste, wie #428CD7, #D78C42 für das Standard-Komplementärpaar. Die Werte sind immer sechstellige Hex in Großbuchstaben, die sich direkt in CSS, Design-Dateien oder eine Chat-Nachricht einfügen lassen, ohne jedes Nachformatieren.
Warum die Beschriftung eines Farbfelds zwischen Weiß und Dunkel wechselt
Jedes Farbfeld zeigt seinen Hex-Wert bei der Befahrung an, in weißer oder beinahe schwarzer Schrift je nachdem, wie hell der Untergrund ist. Die Prüfung ist ein einfacher Leuchtwert: Die Rot-, Grün- und Blaukanäle werden mit 0.299, 0.587 und 0.114 gewichtet, und wenn der Wert strikt größer als 186 ist, benutzt die Beschriftung dunkle Schrift, sonst Weiß. Das ist eine schnelle Helligkeits-Heuristik, kein WCAG-Kontrastverhältnis: Es hält die Beschriftung lesbar, sagt aber nicht, ob Text auf dieser Farbe die Barrierefreiheits-Schwellen würde.
Was das Tool behält, und wohin als Nächstes
Es wird nichts gespeichert und nichts verlässt Ihren Browser; Modus und Ton leben nur auf der Seite, und ein Neuladen setzt das Tool auf den Komplementärmodus bei Ton 210 zurück. Wenn Sie eine Palette haben, die Ihnen gefällt, setzen Sie sie ein: Wandeln Sie die Hex-Werte mit dem Farbkonverter in rgb() oder hsl() für Ihr Stylesheet um, prüfen Sie die Vorder- und Hintergrund-Kombinationen im WCAG-Farbkontrastprüfer, bevor Sie sie als Text festlegen, und geben Sie das Set an den CSS-Verlaufsgenerator weiter, wenn Sie es zu einem Banner ausdehnen wollen. Für die vollständige Methode hinter diesen Prüfungen führt der Leitfaden zum Kontrastprüfer Schritt für Schritt durch die vier Schwellwerte.