La palette de couleurs Uchū pour les passionnés d’Internet

 (uchu.style)
2 points par GN⁺ 2025-02-17 | 1 commentaires | Partager sur WhatsApp
  • Uchū est une palette de couleurs pour les passionnés d’Internet créée par NetOperator Wibby, présentée principalement comme une liste de valeurs oklch() plutôt qu’autour de noms de couleurs
  • La palette est divisée en 8 groupes de couleurs, chacun composé de 9 valeurs oklch(L C H)
  • Le premier groupe appartient à une série à faible saturation, avec une chroma de l’ordre de 0.002~0.004, et les autres évoquent des familles rouge, rose, violet, bleu, vert, jaune et orange selon leur angle de teinte
  • Aucun nom de couleur, exemple d’application, échantillon de code, mode de téléchargement ou information de licence n’est fourni
  • Pour l’utiliser dans un design system ou un thème, il faut copier et appliquer directement les valeurs OKLCH fournies

Forme de base de la palette Uchū

  • Uchū est une palette de couleurs présentée avec la description « the color palette for internet lovers »
  • L’auteur indiqué est NetOperator Wibby
  • La palette met davantage l’accent sur la liste de valeurs oklch() que sur un texte descriptif, chaque valeur définissant une couleur à l’aide de trois nombres correspondant à la luminosité, à la chroma et à l’angle de teinte

Structure de la palette

  • L’ensemble de la palette se compose de 8 groupes de couleurs
  • Chaque groupe contient 9 valeurs oklch()
  • Dans chaque groupe, la numérotation des niveaux va de ### 2 à ### 9, la première valeur étant placée en tête sans titre numérique distinct

Plages OKLCH par groupe de couleurs

  • Série à faible saturation

    • La valeur de chroma se situe autour de 0.002~0.004
    • Valeur de départ : oklch(0.9557 0.003 286.35)
    • Dernière valeur : oklch(0.5682 0.004 247.89)

  • Angles de teinte évoquant le rouge et le rose

    • Le deuxième groupe présente un angle de teinte d’environ 3~19
      • Valeur de départ : oklch(0.8898 0.052 3.28)
      • Dernière valeur : oklch(0.4117 0.157 16.58)
    • Le troisième groupe présente un angle de teinte d’environ 352~355
      • Valeur de départ : oklch(0.958 0.023 354.27)
      • Dernière valeur : oklch(0.5768 0.074 353.14)

  • Angles de teinte évoquant le violet et le bleu

    • Le quatrième groupe présente un angle de teinte d’environ 298~305
      • Valeur de départ : oklch(0.891 0.046 305.24)
      • Dernière valeur : oklch(0.3601 0.145 298.35)
    • Le cinquième groupe présente un angle de teinte d’environ 258~260
      • Valeur de départ : oklch(0.8966 0.046 260.67)
      • Dernière valeur : oklch(0.3953 0.15 259.87)

  • Angles de teinte évoquant le vert, le jaune et l’orange

    • Le sixième groupe présente un angle de teinte d’environ 144~149
      • Valeur de départ : oklch(0.9396 0.05 148.74)
      • Dernière valeur : oklch(0.5277 0.138 145.41)
    • Le septième groupe présente un angle de teinte d’environ 91~92
      • Valeur de départ : oklch(0.9705 0.039 91.2)
      • Dernière valeur : oklch(0.6229 0.097 91.9)
    • Le huitième groupe présente un angle de teinte d’environ 51~57
      • Valeur de départ : oklch(0.9383 0.037 56.93)
      • Dernière valeur : oklch(0.5249 0.113 51.98)

Points à vérifier avant utilisation

  • Aucun nom de couleur n’est fourni pour les différents groupes
  • Aucun exemple d’application de thème, échantillon de code, mode de téléchargement ou information de licence n’est inclus
  • En usage réel, il faut copier directement les valeurs oklch() de la liste pour les utiliser dans une palette ou la configuration d’un thème

À lire aussi

1 commentaires

 
GN⁺ 2025-02-17
Avis sur Hacker News

  • J’ai découvert oklch() aujourd’hui
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Je me demande pourquoi le mot uchu a été utilisé
    Ces derniers temps, on dirait que presque tout — palettes de couleurs, modèles d’IA, startups, outils, apps, etc. — reçoit comme nom un mot japonais choisi au hasard, et je ne comprends pas pourquoi

    • Je ne veux pas paraître négatif, mais j’ai l’impression que c’est désormais un peu excessif
      Fait amusant, il se passe la même chose au Japon avec des mots anglais qui semblent choisis au hasard, donc ce n’est pas totalement sans précédent
    • Je me demande si des noms de produits comme Galaxy ou Forester te dérangent aussi
      Se plaindre d’un nom de produit en un seul mot paraît assez étrange. Je ne sais pas si le problème est la langue d’origine du mot, si c’est de la jalousie parce qu’on utilise un mot de deux syllabes au lieu d’un mot plus long comme Navigator, ou si cela ne te plaît pas parce que ce n’est pas une seule syllabe comme Chrome
      Je me demande si Ubuntu est acceptable parce que ce n’est pas du japonais, ou si cela veut dire qu’il faudrait aussi bannir des noms comme Twitter ou Yahoo et tout réduire à une seule lettre comme X
    • « uchū » signifie univers en japonais
      Comme j’utilise ce thème dans tous mes projets, cela veut dire, en quelque sorte, qu’il est universel
      Je ne sais pas pour les autres cas, mais personnellement j’aime le style ou l’esthétique japonais, donc si un mot convient bien, j’essaie de l’utiliser
    • Les mots courts et prononçables sont rares
      Si l’on veut un nom de projet de 4 à 6 lettres, les mots japonais remplissent souvent bien les critères, et la culture japonaise est aussi très largement diffusée à l’étranger
    • À mesure que les jeunes générations grandissent en étant plus familières avec la culture japonaise comme l’animation, les jeux vidéo et des références culturelles non rétro, elles semblent donner des noms avec des mots qu’elles trouvent agréables à l’oreille

  • Je me demande si une analyse de lisibilité a été faite avec ça
    Le contraste entre l’arrière-plan et le premier plan semble trop faible pour être confortable lors d’une lecture prolongée

    • J’ai l’impression qu’on se focalise trop sur la lisibilité ces temps-ci
      Une nouvelle équipe a été créée au travail et nous oblige à mesurer tous les contrastes pour les personnes ayant des difficultés de lecture. Le contraste doit être d’au moins 80 %, les tailles de police doivent être énormes, on ne peut plus changer de thème, et l’installation de plugins comme Dark Reader est aussi interdite « pour des raisons de sécurité »
      Le problème, c’est que le résultat est très laid et fatigue les yeux pour les autres. Et maintenant qu’on ne peut plus utiliser Dark Reader, c’est encore pire. Tout est gras et donne l’impression de hurler, ce qui rend même plus difficile de distinguer ce qui est important. Je n’ai pas acheté un écran capable d’afficher 4,7 millions de couleurs pour n’en voir que 10. Les contrastes très élevés ont tendance à me donner mal à la tête, donc je préfère des thèmes plus doux comme Solarized
      Les 0,5 % d’employés ayant des problèmes visuels pourraient très bien être aidés par des plugins de navigateur adaptés à leur problème. Les difficultés visuelles ne sont pas toutes les mêmes. Certains ne voient pas certaines combinaisons de couleurs, qu’il faut donc éviter ou corriger ; d’autres voient flou et ont besoin de grands caractères, qui devraient peut-être être bien plus grands qu’aujourd’hui. Pour quelqu’un qui ne voit pas du tout, cela n’aide pas non plus : il faut un afficheur braille et de bons textes alternatifs pour les images. Mais l’entreprise ne semble pas s’en soucier, elle ne s’intéresse qu’à ce qui saute aux yeux
      Avant, on avait une signature d’e-mail discrète, mais maintenant elle est agressive, avec des couleurs de maternelle et des caractères énormes. Alors que ce sont des informations que personne ne lit de toute façon. Il y avait une raison pour les mettre volontairement moins en avant : on savait qu’elles étaient là si besoin, tout en comprenant qu’il ne s’agissait pas d’informations importantes. Si on voulait vraiment les lire, on pouvait les sélectionner, ou passer en mode texte brut
      Je ne suis absolument pas opposé à l’accessibilité, mais j’aimerais voir une approche plus personnalisée. Je n’aime pas cette façon de corriger une chose en cassant tout pour tous les autres. Je n’utilise pas non plus mon téléphone en mode caractères géants, mais je trouve très bien que cette option existe pour ceux qui en ont besoin
    • À propos du contraste, je me demande si tu parles de la zone des échantillons de couleurs
      Si c’est le cas, les petites valeurs de couleur servent davantage à l’aspect visuel qu’à transmettre de l’information, et les valeurs sont disponibles dans le dépôt sous une forme lisible. Par exemple, personne n’aurait envie de lire plus d’un paragraphe en texte orange clair sur fond orange

  • L’expression combinaison de couleurs prête à confusion
    Pour moi, une combinaison de couleurs désigne un petit nombre de couleurs qui vont bien ensemble, comme Monokai. Les cas d’usage, comme la coloration syntaxique dans un éditeur de code, sont aussi clairs et simples
    Ici, ça ressemble à une très longue liste de teintes monochromes, et je ne sais pas comment l’utiliser. Je ne cherche pas à dénigrer, je suis vraiment perplexe

    • C’est similaire à la manière dont Tailwind fournit une palette de couleurs complète utilisable pour le développement d’UI
      Avoir plusieurs niveaux de luminosité d’une même couleur donne l’impression d’une même famille et permet de créer des éléments d’UI cohérents entre eux, avec plus de flexibilité. Par exemple, si vous voulez une carte bleue avec une bordure dans les tons bleus, vous pouvez utiliser un bleu plus clair pour l’arrière-plan et un bleu plus foncé pour la bordure
      Au lieu d’appliquer de la transparence à une bordure noire, chaque niveau de luminosité de cette palette a été choisi individuellement pour s’accorder au sein de la même famille de couleurs. Un autre avantage est qu’on peut garantir que chaque « niveau de luminosité » reste cohérent d’une couleur à l’autre. Un gris à 50 % se situe à peu près au même endroit qu’un rouge à 50 %
      Plus généralement, chaque couleur ici est conçue pour bien fonctionner avec toutes les autres. Ce ne sont pas des couleurs prises au hasard : elles doivent être harmonieuses entre elles
    • Il serait plus exact d’appeler ça une palette de couleurs
    • Personnellement, je pense aussi qu’il aurait fallu dire « palette de couleurs ». Des exemples similaires :
      Open Color d’OpenProps https://yeun.github.io/open-color/
      La palette de couleurs de Tailwind https://tailwindcss.com/docs/colors
      Du point de vue du design, une palette de couleurs peut être très difficile à choisir tout en conservant de bons scores de contraste et d’autres critères d’accessibilité. Une palette standardisée est utile parce qu’elle fait ce travail à votre place. J’utilise souvent les palettes OC ou Tailwind, mais il manque souvent la famille de couleurs que je veux ; avoir trois options de ce genre, c’est donc plutôt appréciable
    • Je ne comprends pas non plus comment une simple liste de boîtes de couleurs peut obtenir 476 points

  • Cette palette ne semble pas perceptuellement uniforme
    Cela signifie que le ratio de contraste entre chaque teinte et le blanc/noir n’est pas le même pour toutes les couleurs. Je me demande si elle a été analysée avec https://huetone.ardov.me/

    • Je l’ai analysée avec mon outil a11y-contrast[1], et effectivement la luminance n’est pas uniforme. J’ai expliqué dans [2] pourquoi cette propriété peut être souhaitable dans une palette de couleurs
      [1] https://github.com/darekkay/a11y-contrast
      [2] https://darekkay.com/blog/accessible-color-palette/
    • Non, j’ai simplement fait en sorte que ça me paraisse joli
      Je ne sais pas si l’outil huetone prend en charge OKLCH. Je n’ai pas vu d’option de conversion

  • Je me demande pourquoi c’est une combinaison de couleurs pour les passionnés d’Internet

    • J’aime Internet, et j’aime aussi les belles couleurs. Je ne suis sûrement pas le seul ;)

  • Quand on compare les numéros entre eux, le bleu paraît beaucoup plus vif et opaque que les autres couleurs
    Si l’on compare côte à côte les cinq niveaux, le bleu ressort de façon électrique, tandis que les autres couleurs semblent teintées
    Bien sûr, cela dépend du gamma de l’écran et du profil colorimétrique, mais je me demande si l’intention était que chaque numéro apparaisse comme une teinte similaire par rapport à la couleur pure. Pour l’instant, cela ressemble davantage à un système proche de RGB/CMYK avec une notation différente qu’à une implémentation du Munsell Color System visant une équivalence perceptuelle selon l’échelle d’intensité des couleurs

    • Pas forcément
      Je ne suis pas arrivé à ces couleurs avec une formule particulière ; je les ai simplement ajustées à l’œil jusqu’à ce qu’elles me conviennent

  • Sur Firefox pour Android, je ne vois que du texte noir sur fond blanc
    J’ai l’impression qu’il devrait y avoir autre chose ; est-ce bien le cas ?

    • J’utilise l’imbrication CSS[1]. Pensez à quelque chose comme SCSS. La prise en charge complète nécessite Firefox 117 et Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Même chose avec Firefox sur un bureau Linux, y compris avec JavaScript activé
      Modification : à première vue, il semble utiliser Oklab/oklch() [1], qui est censé fonctionner depuis Firefox 113, mais ça ne semble pas être le cas en 115. Ou alors quelque chose d’autre casse le rendu
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Si vous ne voyez pas, en faisant défiler vers le bas, plusieurs ensembles d’échantillons de couleurs regroupés par luminosité, alors vous ne voyez pas la page correctement
      Ça fonctionne bien dans mon Firefox, mais je n’utilise pas Android
    • Même chose avec Firefox 50 sous Linux
      Je ne sais pas comment appeler les gens qui ignorent la rétrocompatibilité. Mon site fonctionne même sous IE6 si nécessaire
    • Même chose avec Chromium sur PC

  • Je n’utilise pas Tailwind, mais j’ai utilisé la palette Tailwind pour ce genre d’usage
    https://tailwindcss.com/docs/colors

    • Attention. Tailwind a encore changé ses couleurs entre les versions 3 et 4, et c’est déjà la troisième fois
      Pour être clair, mettre à jour une bibliothèque CSS vers la dernière version ne devrait pas subtilement modifier tout le thème de couleurs d’un site, mais en pratique c’est ce qui arrive
      C’est pour ça que j’ai commencé à migrer vers Radix Colors

  • Il n’y a sans doute pas d’exigence forte imposant une saturation cohérente entre les couleurs, mais à mon goût elle paraît un peu irrégulière
    Les jaunes foncés et les oranges donnent une impression un peu trop délavée
    La palette dans son ensemble est bonne. J’aime particulièrement le fait qu’elle évite le rouge « rouge ». C’est une couleur que, je pense, beaucoup de designers n’aiment pas. J’aimerais voir une étude sur la relation entre la couleur des yeux et les préférences en matière de couleurs
    Dans une direction similaire, mais avec davantage de familles de couleurs : https://www.s-ings.com/scratchpad/oklch-smooth/

    • Les jaunes et les oranges sont clairement délicats
      Merci pour le lien, ces familles de couleurs ont vraiment l’air superbes