Tailwind CSS 11-stufiger Farbpaletten-Generator und API

 (tints.dev)
5 Punkte von GN⁺ 2024-02-03 | 1 Kommentare | Auf WhatsApp teilen
  • Mit Tailwind CSS lässt sich die Arbeit an Paletten schnell ausgehend von einem einzelnen Hex-Wert auf 11 Farbstufen von 50 bis 950 erweitern
  • Der Referenz-Stopp ist standardmäßig 500; bei Bedarf kann auch eine andere Position im Bereich 50 bis 950 als Basisfarbe festgelegt werden
  • Durch Anpassung von Sättigung und Hue lassen sich natürlichere Paletten erzeugen als durch bloße Helligkeitsänderungen
  • Je nach Mindest-/Höchstwert für Lightness/Luminance und Moduswechsel unterscheidet sich die Farbverteilung in Richtung Weiß und Schwarz
  • Die API konzentriert sich derzeit auf die Rückgabe von Paletten auf Basis eines Standard-Hex-Werts; HSL-Anpassungsoptionen werden noch nicht angeboten

Tailwind CSS-Palette erstellen

  • Palette Creator nimmt einen gültigen hexadezimalen Farbwert als Ausgangswert und erzeugt eine 11-stufige Palette für Tailwind CSS
  • Der Standard-Referenz-Stopp ist 500, kann aber auf einen anderen Stopp zwischen 50 und 950 umgestellt werden, um die gewünschte Farbe in die Mitte der Palette zu setzen

  • Methode der Farbanpassung

    • Bei Farben mit 100 % Sättigung kann Hue Shift nach oben oder unten angewendet werden, um Variationen in die Palette zu bringen
    • Bei einer Basisfarbe mit geringer Sättigung wird die Palette interessanter, wenn die Saturation an beiden Enden erhöht wird
    • Durch Anpassen von Minimum/Maximum Lightness oder Luminance können die übrigen Farben bis zu den Extremen von Weiß und Schwarz aufgefächert werden
    • Beim Wechsel zwischen Lightness und Luminance wird die Verteilung der Extremfarben unterschiedlich erzeugt
    • Die Prinzipien des Farbdesigns sind von Adam Wathan und Steve Schogers Refactoring UI inspiriert; das Buch empfiehlt jedoch nicht die Nutzung automatisierter Tools
    • Dieses Tool zielt nicht darauf ab, die fertige endgültige Lösung zu liefern, sondern den schnellen Start beim Erstellen neuer Paletten zu erleichtern

API und Nutzung der Ausgabe

  • Mit der Palette API können mehrere Paletten-Sets abgerufen werden
  • Sie kann in Design-Tools eingesetzt werden, die allein aus einem einzelnen Hex-Wert eine Palette von 50 bis 950 erzeugen müssen
  • Die API gibt derzeit nur Paletten auf Basis eines Standard-Hex-Werts zurück; Optionen für HSL tweak werden nicht angeboten
  • Die erzeugte Palette wird in einer Form bereitgestellt, die in CSS für die Tailwind-Konfiguration eingefügt werden kann
    • Die Beispielausgabe enthält innerhalb eines @theme-Blocks OKLCH-Farbvariablen von --color-yellow-50 bis --color-yellow-950

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-02-03
Hacker-News-Kommentare

  • Es wäre schön, wenn bei solchen Tools Accessibility Developer Experience standardmäßig eingebaut wäre.
    Also so, dass man schon anhand der Farbnamen beim Definieren einer Farbpalette erkennen kann, ob eine Kombination barrierefrei ist.
    Im USWDS-Designsystem etwa weiß man, dass blue-30 auf gray-80 barrierefrei ist (WCAG AA), weil die Differenz der beiden Werte 50 oder mehr beträgt.
    Zu diesem etwas engen Konzept habe ich früher einmal etwas geschrieben: https://darekkay.com/blog/accessible-color-palette/

    • Du nennst es ein enges Konzept, aber im Webdesign sollte es meiner Meinung nach oberste Priorität haben.
      Jeder wird irgendwann einmal, dauerhaft oder vorübergehend, eine Einschränkung haben, und selbst großartige Tools wie Streamlit sind wegen Accessibility oft nicht nutzbar.
    • Radix Colors hat viele Accessibility-Funktionen eingebaut.
      https://www.radix-ui.com/colors
      Ich arbeite bei WorkOS, und Radix ist ein Open-Source-Projekt, das wir betreiben.
    • Stripe hat ebenfalls über sein barrierefreies Farbsystem geschrieben: https://stripe.com/blog/accessible-color-systems
      Allerdings kenne ich noch kein Tool, das dieses Konzept nutzt, um neue Paletten zu erzeugen.
    • Auch Material 3, eine ziemlich umfangreiche Spezifikation von Google, hat ein Farbsystem, das auf diese Weise funktioniert.

  • Ich spiele gern mit Farben herum, und auch das hier ist ein gutes Tool.
    Weitere ordentliche Alternativen sind https://adevade.github.io/color-scheme-generator/, https://colorcolor.in erzeugt Tailwind zwar nicht direkt, ist aber sehr ausgereift, außerdem http://colormind.io und https://uicolors.app/create.

    • Ich suche schon lange nach dem perfekten Farb-Tool, habe es aber noch nicht gefunden.
      Ich möchte ein Tool, das so fortgeschritten mit Farben umgehen kann, wie es diese Library zeigt: https://colorjs.io/
    • Ich möchte https://github.com/ardov/huetone (https://huetone.ardov.me/) empfehlen.
      Es hat eine besondere UI, die ich bei ähnlichen Tools noch nicht gesehen habe, und man kann über ein Diagramm die relativen L/C/H-Werte aller Farben der Palette sehen.
      Dadurch wird es einfacher, eine konsistentere Palette zu erstellen.
    • Ich mag https://huemint.com/.
    • Die Seite lädt heutzutage wohl etwas langsam, aber ich mochte schon immer https://www.colourlovers.com.
    • Gute Liste.
      Als Ergänzung noch ein paar Links zur allgemeinen Farbtheorie, die ich persönlich häufig nutze: Mit https://paletton.com/ kann man farbtheoriebasierte Paletten erstellen und ein komplettes Farbschema erzeugen.
      https://medialab.github.io/iwanthue/ trennt Farben mithilfe von k-Means und ist gut für Diagrammfarben und ausreichenden Kontrast.

  • Ich habe kürzlich selbst eines gebaut.
    Es ist viel einfacher und stark von meinem eigenen Geschmack geprägt, kann aber eine Tailwind-Konfiguration erzeugen: https://ghola.dev Am besten auf dem Desktop oder iPad.
    Es gibt auch einen längeren Artikel darüber, wie ich es mit Web Components gebaut habe: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • Mir gefällt das Tool, das du gebaut hast.
      Nur jeweils eine einzelne Farbe zu bearbeiten, als Palettengenerator zu bezeichnen, wirkt für mich nicht ganz passend, oder ist zumindest nicht das, wonach ich suche.
      Ich brauche einen Palettengenerator, der Farbgruppen für eine App erstellt, und dieses Tool kommt dem näher.

  • Großartig.
    Ich habe ausgehend von einem Logo in weniger als einer Minute eine Palette erstellt, und sie ist besser geworden als die, für die ich beim letzten Mal 30 Minuten von Hand gebraucht habe.

  • Gefällt mir.
    Ich frage mich, wie man diese Farben am einfachsten mit Figma synchronisiert.
    Vielleicht nutzen professionelle Designer Plugins, die solche Farben erzeugen und nach Tailwind exportieren.

    • Suchst du nach so einer Art Plugin? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens ist ein guter Ansatz.
    • Figmas Umgang mit Farben ist so frustrierend und merkwürdig, dass ich mich inzwischen nicht mehr darum kümmere.
      Ich habe ein paar Mal versucht, es richtig zu nutzen, aber es war so manuell und umständlich, dass ich aufgegeben habe.

  • Gutes Tool.
    Ein anderer Ansatz, den ich in meiner Codebasis verwende, ist, die Farbpalette als CSS-Variablen zu definieren und die Tailwind-Konfiguration auf diese Variablen zeigen zu lassen.
    So kann man zur Laufzeit verschiedene Farb-Themes einsetzen.

  • Ein sehr nützliches Tool.
    Ich erzeuge aus einer einzelnen Farbe eine Farbpalette und lade das Ergebnis dann in https://palettte.app, um jede Farbe manuell anzupassen.

  • Ich frage mich, ob das brand-Beispiel aus der Demo die übliche Art ist, wie Leute das in der Konfiguration verwenden.
    Ich hätte erwartet, dass man die Standardfarben ändert oder neue Variablen wie primary und secondary anlegt.

    • Ich bin der Macher von tints.dev.
      Das brand-Farbset sind die Farben, die ich auf meinem Blog simeongriggs.dev verwende, und tatsächlich habe ich in dieses Tool den 500-Swatchwert eingegeben, um den Rest zu erzeugen.

  • Sieht nützlich für Gradients aus.
    Ich finde es seltsam, dass niemand Paletton erwähnt; es ist mein Hauptwerkzeug beim Auswählen von Farben: https://paletton.com/
    Wenn man mit einer Grundfarbe beginnt, bekommt man auch Gradients zu benachbarten Farben innerhalb der Palette.
    Besonders Triaden und Tetraden sind nützlich.

  • Ich habe aktiv nach einer Möglichkeit gesucht, Hue Shifting anzuwenden, und trotzdem hat es eine ganze Weile gedauert, bis ich es herausgefunden habe.