Uchū-Farbpalette für Internet-Enthusiasten

 (uchu.style)
2 Punkte von GN⁺ 2025-02-17 | 1 Kommentare | Auf WhatsApp teilen
  • Uchū ist eine von NetOperator Wibby erstellte Farbpalette für Internet-Enthusiasten und wird eher als Liste von oklch()-Werten als über Farbnamen bereitgestellt
  • Die Palette ist in 8 Farbbündel unterteilt, von denen jedes aus 9 Stufen von oklch(L C H)-Werten besteht
  • Das erste Bündel ist eine niedrig gesättigte Reihe mit Chroma-Werten von 0.002~0.004, die übrigen wirken anhand des Farbwinkels wie Rot-, Pink-, Lila-, Blau-, Grün-, Gelb- und Orange-Reihen
  • Farbnamen, Anwendungsbeispiele, Code-Samples, Download-Methode und Lizenzinformationen werden nicht bereitgestellt
  • Für die Verwendung in einem Designsystem oder Theme müssen die bereitgestellten OKLCH-Werte direkt kopiert und angewendet werden

Grundform der Uchū-Palette

  • Uchū ist eine Farbpalette, die mit der Beschreibung „the color palette for internet lovers“ angeboten wird
  • Als Autor ist NetOperator Wibby angegeben
  • Im Mittelpunkt der Palette steht eher eine Liste von oklch()-Werten als erklärender Text; jeder Wert legt eine Farbe mit drei Zahlen für Helligkeit, Chroma und Farbwinkel fest

Aufbau der Palette

  • Die gesamte Palette besteht aus 8 Farbbündeln
  • Jedes Bündel enthält 9 oklch()-Werte
  • Die Stufenbezeichnungen erscheinen in jedem Bündel von ### 2 bis ### 9, während der erste Wert davor ohne eigene nummerierte Überschrift steht

OKLCH-Bereiche je Farbbündel

  • Niedrig gesättigte Reihe

    • Der Chroma-Wert liegt auf einem Niveau von 0.002~0.004
    • Startwert: oklch(0.9557 0.003 286.35)
    • Letzter Wert: oklch(0.5682 0.004 247.89)

  • Farbwinkel, die wie Rot- und Pinktöne wirken

    • Das zweite Bündel liegt beim Farbwinkel ungefähr im Bereich 3~19
      • Startwert: oklch(0.8898 0.052 3.28)
      • Letzter Wert: oklch(0.4117 0.157 16.58)
    • Das dritte Bündel liegt beim Farbwinkel ungefähr im Bereich 352~355
      • Startwert: oklch(0.958 0.023 354.27)
      • Letzter Wert: oklch(0.5768 0.074 353.14)

  • Farbwinkel, die wie Lila- und Blautöne wirken

    • Das vierte Bündel liegt beim Farbwinkel ungefähr im Bereich 298~305
      • Startwert: oklch(0.891 0.046 305.24)
      • Letzter Wert: oklch(0.3601 0.145 298.35)
    • Das fünfte Bündel liegt beim Farbwinkel ungefähr im Bereich 258~260
      • Startwert: oklch(0.8966 0.046 260.67)
      • Letzter Wert: oklch(0.3953 0.15 259.87)

  • Farbwinkel, die wie Grün-, Gelb- und Orangetöne wirken

    • Das sechste Bündel liegt beim Farbwinkel ungefähr im Bereich 144~149
      • Startwert: oklch(0.9396 0.05 148.74)
      • Letzter Wert: oklch(0.5277 0.138 145.41)
    • Das siebte Bündel liegt beim Farbwinkel ungefähr im Bereich 91~92
      • Startwert: oklch(0.9705 0.039 91.2)
      • Letzter Wert: oklch(0.6229 0.097 91.9)
    • Das achte Bündel liegt beim Farbwinkel ungefähr im Bereich 51~57
      • Startwert: oklch(0.9383 0.037 56.93)
      • Letzter Wert: oklch(0.5249 0.113 51.98)

Punkte zur Nutzung

  • Farbnamen für die einzelnen Farbbündel werden nicht bereitgestellt
  • Beispiele für die Anwendung in Themes, Code-Samples, Download-Methode und Lizenzinformationen sind nicht enthalten
  • Praktische Nutzer müssen die oklch()-Werte aus der Liste direkt kopieren und für den Aufbau einer Palette oder eines Themes verwenden

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-02-17
Hacker-News-Kommentare

  • Habe heute oklch() kennengelernt
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Ich frage mich, warum das Wort uchu verwendet wurde
    Heutzutage scheint fast alles – Farbpaletten, KI-Modelle, Startups, Tools, Apps usw. – nach irgendeinem zufällig ausgewählten japanischen Wort benannt zu werden, und ich weiß nicht, warum

    • Ich will nicht negativ klingen, aber inzwischen wirkt es ein bisschen überstrapaziert
      Interessanterweise passiert in Japan dasselbe mit scheinbar zufällig ausgewählten englischen Wörtern, also ist es wohl nicht völlig beispiellos
    • Ich frage mich, ob dich Produktnamen wie Galaxy oder Forester auch stören
      Sich über Produktnamen aus nur einem Wort zu beschweren, wirkt ziemlich seltsam. Ich weiß nicht, ob das Problem die Ursprungssprache des Wortes ist, ob man neidisch darauf ist, dass statt eines längeren Wortes wie Navigator ein zweisilbiges Wort verwendet wird, oder ob es stört, dass es nicht einsilbig ist wie Chrome
      Ich frage mich, ob Ubuntu okay ist, weil es nicht japanisch ist, oder ob Namen wie Twitter oder Yahoo auch abgeschafft werden sollten und alles auf einen einzelnen Buchstaben wie X reduziert werden muss
    • „uchū“ bedeutet auf Japanisch Universum
      Da ich dieses Theme in all meinen Projekten verwende, soll es gewissermaßen universell sein
      Zu anderen Fällen kann ich nichts sagen, aber persönlich mag ich japanischen Stil bzw. japanische Ästhetik, also verwende ich solche Wörter, wenn sie gut passen
    • Kurze, aussprechbare Wörter sind selten
      Wenn man einen Projektnamen mit 4–6 Buchstaben möchte, passen japanische Wörter oft gut zu den Anforderungen, und japanische Kultur ist international sehr weit verbreitet
    • Da jüngere Generationen mit japanischer Kultur wie Anime, Videospielen und nicht-retrohaften kulturellen Referenzen vertrauter aufwachsen, scheinen sie Dinge nach Wörtern zu benennen, die für sie gut klingen

  • Ich frage mich, ob damit eine Lesbarkeitsanalyse gemacht wurde
    Der Kontrast zwischen Hintergrund und Vordergrund wirkt zu niedrig, um über längere Zeit bequem zu lesen

    • Heutzutage scheint mir zu viel Fokus auf Lesbarkeit gelegt zu werden
      Bei der Arbeit gibt es ein neues Team, das uns dazu bringt, für Menschen mit Leseschwierigkeiten alle Kontraste zu messen. Der Kontrast müsse mindestens 80 % betragen, die Schriftgröße müsse riesig sein, Theme-Änderungen seien nicht erlaubt, und aus „Sicherheitsgründen“ ist auch die Installation von Plug-ins wie Dark Reader verboten
      Das Problem ist, dass das Ergebnis für alle anderen sehr hässlich ist und die Augen ermüdet. Jetzt, da man Dark Reader nicht mehr verwenden kann, ist es noch schlimmer. Alles ist fett und schreit einen an, sodass es sogar schwieriger wird zu erkennen, was wichtig ist. Ich habe mir kein Display mit 4,7 Millionen Farben gekauft, um nur 10 Farben zu sehen. Bei sehr hohem Kontrast bekomme ich eher Kopfschmerzen, deshalb mag ich weichere Themes wie Solarized lieber
      Den 0,5 % der Mitarbeitenden mit Sehproblemen wäre mit Browser-Plug-ins, die sie jeweils an ihr Problem anpassen können, ausreichend geholfen. Sehschwierigkeiten sind nicht alle gleich. Manche können bestimmte Farbkombinationen nicht sehen, also sollte man sie vermeiden oder anpassen; andere sehen verschwommen und brauchen große Schrift, die vielleicht noch viel größer sein müsste als jetzt. Menschen, die gar nichts sehen, hilft das auch nicht, sie brauchen eine Braillezeile und gute Alternativtexte für Bilder. Aber im Unternehmen scheint man sich darum nicht zu kümmern, sondern nur um das, was sofort sichtbar auffällt
      Früher hatten wir eine dezente E-Mail-Signatur, jetzt drängt sie sich mit Kindergartenfarben und riesiger Schrift auf. Dabei sind das Informationen, die ohnehin niemand liest. Es gab einen Grund, warum sie absichtlich weniger hervorgehoben waren: Man wusste, dass sie da sind, falls man sie braucht, aber auch, dass es keine wichtigen Informationen sind. Wenn man sie wirklich lesen will, kann man sie markieren, oder in den Nur-Text-Modus wechseln
      Ich bin überhaupt nicht gegen Unterstützung für Menschen mit Behinderungen, aber ich würde mir einen stärker personalisierten Ansatz wünschen. Ich mag es nicht, wenn man beim Versuch, eine Sache zu reparieren, alles für alle anderen kaputtmacht. Ich benutze mein Handy auch nicht im Modus mit riesiger Schrift, aber ich finde es gut, dass es diese Funktion für Menschen gibt, die sie brauchen
    • Beim Kontrast frage ich mich, ob damit die Farbfelder gemeint sind
      Falls ja: Die kleinen Farbwerte dienen eher visuellen Zwecken als der Informationsvermittlung, und im Repository liegen die Werte in gut lesbarer Form vor. Zum Beispiel würde man vermutlich keinen ganzen Absatz mit hellorangefarbenem Text auf orangefarbenem Hintergrund lesen wollen

  • Die Formulierung Farbschema ist verwirrend
    Für mich bedeutet ein Farbschema eine kleine Anzahl von Farben, die gut zusammenpassen, wie Monokai. Auch die Einsatzbereiche sind klar und einfach, etwa Syntax-Highlighting in Code-Editoren
    Das hier sieht eher wie eine Liste mit sehr vielen Farben innerhalb einzelner Farbfamilien aus, und ich weiß nicht, wie man sie verwenden soll. Das ist nicht abwertend gemeint, ich bin wirklich verwirrt

    • Das ähnelt der Art, wie Tailwind eine vollständige Farbpalette für die UI-Entwicklung bereitstellt
      Wenn es mehrere Helligkeitsstufen derselben Farbe gibt, wirkt es wie dieselbe Familie und ermöglicht flexible UI-Elemente, die gut zusammenpassen. Wenn man zum Beispiel eine blaue Karte mit einem Rand aus der blauen Farbfamilie möchte, kann man für den Hintergrund ein helleres Blau und für den Rand ein dunkleres Blau verwenden
      Statt einen schwarzen Rand mit Transparenz zu versehen, wurde jede Helligkeitsstufe dieser Palette einzeln so ausgewählt, dass sie innerhalb derselben Farbfamilie harmoniert. Ein weiterer Vorteil ist, dass jede „Helligkeitsstufe“ über Farben hinweg konsistent sein kann. 50 % Grau liegt an einer ähnlichen Stelle wie 50 % Rot
      Allgemeiner gesagt ist jede der hier enthaltenen Farben so entworfen, dass sie mit allen anderen Farben gut zusammenpasst. Es dürfen nicht einfach beliebige Farben sein, sie müssen miteinander harmonieren
    • Farbpalette wäre die genauere Bezeichnung
    • Ich persönlich finde auch, dass man „Farbpalette“ hätte sagen sollen. Ähnliche Beispiele sind:
      Open Color von OpenProps https://yeun.github.io/open-color/
      Tailwinds Farbpalette https://tailwindcss.com/docs/colors
      Aus Designperspektive kann es sehr schwierig sein, Farben auszuwählen und dabei gute Farbkontrastwerte sowie andere Barrierefreiheitskriterien einzuhalten. Standardisierte Paletten sind nützlich, weil sie diese Arbeit abnehmen. Ich nutze die OC- oder Tailwind-Palette häufig, aber oft fehlen mir die gewünschten Farbfamilien, daher ist es ziemlich gut, hier drei solcher Optionen zu haben
    • Ich verstehe genauso wenig, dass eine faktische Liste von Farbkästen 476 Punkte bekommt

  • Diese Palette wirkt nicht perzeptiv gleichmäßig
    Damit meine ich, dass das Kontrastverhältnis zwischen jedem Tint und Weiß/Schwarz nicht bei allen Farben gleich ist. Ich frage mich, ob sie mit https://huetone.ardov.me/ analysiert wurde

    • Ich habe sie mit meinem Tool a11y-contrast[1] analysiert, und tatsächlich ist die Luminanz nicht gleichmäßig. Warum diese Eigenschaft bei einer Farbpalette wünschenswert sein kann, habe ich in [2] beschrieben
      [1] https://github.com/darekkay/a11y-contrast
      [2] https://darekkay.com/blog/accessible-color-palette/
    • Nein, ich habe es einfach nach Gefühl so gemacht, dass es gut aussieht
      Ich weiß nicht, ob das Tool huetone OKLCH unterstützt. Eine Umstellungsoption habe ich nicht gesehen

  • Ich frage mich, warum das ein Farbschema für Internet-Enthusiasten ist

    • Ich mag das Internet, und ich mag schöne Farben. Ich bin doch sicher nicht der Einzige ;)

  • Wenn man die Nummern untereinander vergleicht, wirkt Blau deutlich satter und deckender als die anderen Farben
    Vergleicht man alle fünf Stufen nebeneinander, springt Blau elektrisch hervor, während die anderen Farben wie getönt aussehen
    Natürlich hängt das von Monitor-Gamma und Farbprofil ab, aber ich frage mich, ob die Absicht war, dass jede Nummer wie eine ähnlich starke Tönung der reinen Farbe wirkt. Im Moment sieht es eher aus wie ein System ähnlich RGB/CMYK mit anderer Notation, statt wie eine Implementierung des Munsell Color System, das perzeptive Gleichwertigkeit entlang einer Farbintensitätsskala herstellt

    • Nicht unbedingt
      Ich bin nicht mit irgendeiner Formel zu diesen Farben gekommen, sondern habe sie einfach nach Augenmaß angepasst, bis sie für mich gepasst haben

  • In Firefox auf Android sehe ich nur schwarzen Text auf weißem Hintergrund
    Ich vermute, dass eigentlich mehr zu sehen sein sollte, oder?

    • Es wird CSS-Nesting[1] verwendet. Man kann sich das wie SCSS vorstellen. Für vollständige Unterstützung braucht man Firefox 117 und Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Im Firefox auf einem Linux-Desktop ist es genauso, auch mit aktiviertem JavaScript
      Edit: Offenbar wird Oklab/oklch() [1] verwendet. Laut Angaben sollte das ab Firefox 113 funktionieren, aber in 115 scheint es nicht zu gehen. Oder vielleicht macht irgendein anderer Faktor etwas kaputt
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Wenn du beim Herunterscrollen nicht mehrere Sets von Farbmustern siehst, die nach Helligkeit gruppiert sind, dann siehst du es nicht richtig
      In meinem Firefox funktioniert es, aber Android verwende ich nicht
    • Im Firefox 50 unter Linux ist es genauso
      Ich weiß nicht, wie man Leute nennen soll, die Abwärtskompatibilität ignorieren. Meine Website funktioniert bei Bedarf sogar in IE6
    • In Chromium auf dem PC ist es genauso

  • Ich nutze Tailwind zwar nicht, habe aber für solche Zwecke die Tailwind-Palette verwendet
    https://tailwindcss.com/docs/colors

    • Vorsicht. Tailwind hat zwischen Version 3 und 4 schon wieder die Farben geändert, und das ist bereits das dritte Mal
      Um es klar zu sagen: Wenn man eine CSS-Bibliothek auf die neueste Version aktualisiert, sollte sich das Farbschema der gesamten Website nicht unauffällig ändern, aber genau so ist die Realität
      Deshalb habe ich angefangen, zu Radix Colors zu wechseln

  • Es gibt wohl keine zwingende Anforderung, dass die Sättigung zwischen den Farben konsistent sein muss, aber für meinen Geschmack wirkt sie etwas uneinheitlich
    Das dunkle Gelb und Orange wirken ein bisschen zu ausgewaschen
    Insgesamt ist die Palette gut. Besonders gefällt mir, dass sie „rotes“ Rot vermeidet. Ich glaube, das ist eine Farbe, die viele Designer nicht mögen. Ich würde gern eine Studie über den Zusammenhang zwischen Augenfarbe und Farbpräferenzen sehen
    Ähnliche Richtung, aber mit mehr Farbfamilien: https://www.s-ings.com/scratchpad/oklch-smooth/

    • Gelb und Orange sind definitiv schwierig
      Danke für den Link, diese Farbfamilien sehen wirklich gut aus