Générateur de palettes de couleurs Tailwind CSS en 11 niveaux et API

 (tints.dev)
5 points par GN⁺ 2024-02-03 | 1 commentaires | Partager sur WhatsApp
  • Avec Tailwind CSS, il est possible de partir d’une seule valeur Hex pour l’étendre rapidement en 11 couleurs, de 50 à 950
  • Le stop de référence par défaut est 500, mais il est possible de définir une autre position entre 50 et 950 comme couleur de base
  • En ajustant la saturation et la teinte, on peut créer une palette plus naturelle qu’avec de simples variations de luminosité
  • Selon les valeurs minimales et maximales de Lightness/Luminance et le mode sélectionné, la répartition des couleurs vers le blanc ou le noir varie
  • L’API se concentre actuellement sur le renvoi de palettes basées sur une valeur Hex par défaut et ne propose pas encore d’options d’ajustement HSL

Créer une palette Tailwind CSS

  • Palette Creator prend comme valeur initiale une couleur hexadécimale valide et génère une palette Tailwind CSS en 11 niveaux
  • Le stop de référence par défaut est 500, mais il peut être remplacé par un autre stop entre 50 et 950 pour placer la couleur souhaitée au centre de la palette

  • Méthode d’ajustement des couleurs

    • Pour les couleurs à 100 % de saturation, on peut appliquer un Hue Shift vers le haut ou vers le bas pour apporter des variations à la palette
    • Si la couleur de base est peu saturée, augmenter la Saturation aux deux extrémités permet d’obtenir une palette plus intéressante
    • En ajustant les valeurs minimales et maximales de Lightness ou de Luminance, on peut étendre les autres couleurs jusqu’aux extrêmes blanc et noir
    • En basculant entre Lightness et Luminance, la répartition des couleurs aux extrémités est générée différemment
    • Les principes de conception des couleurs s’inspirent de Refactoring UI d’Adam Wathan et Steve Schoger, un ouvrage qui déconseille l’usage d’outils d’automatisation
    • Cet outil vise moins à produire une réponse finale qu’à accélérer le démarrage de la création d’une nouvelle palette

API et utilisation du rendu

  • Avec la Palette API, il est possible de récupérer plusieurs ensembles de palettes
  • Elle peut être utilisée dans des outils de design qui doivent générer une palette 50 à 950 à partir d’une seule valeur Hex
  • À l’heure actuelle, l’API ne renvoie que des palettes basées sur une valeur Hex par défaut et ne fournit pas d’options de retouche HSL
  • La palette générée est fournie dans un format pouvant être collé dans du CSS pour la configuration de Tailwind
    • L’exemple de sortie inclut, dans un bloc @theme, des variables de couleur OKLCH allant de --color-yellow-50 à --color-yellow-950

À lire aussi

1 commentaires

 
GN⁺ 2024-02-03
Avis Hacker News

  • Ce serait bien que l’expérience développeur orientée accessibilité soit intégrée par défaut dans ce genre d’outil
    L’idée est qu’au moment de définir une palette de couleurs, on puisse savoir rien qu’en lisant les noms des couleurs si une combinaison est accessible
    Par exemple, dans le design system USWDS, on peut voir que blue-30 sur gray-80 est accessible (WCAG AA), parce que l’écart entre les deux valeurs est d’au moins 50
    J’avais écrit il y a quelque temps sur ce concept, certes un peu étroit : https://darekkay.com/blog/accessible-color-palette/

    • J’ai parlé d’un concept étroit, mais à mon avis, en web design, cela devrait être une priorité absolue
      Tout le monde finira un jour par connaître un handicap, permanent ou temporaire, et même d’excellents outils comme Streamlit deviennent souvent inutilisables à cause de problèmes d’accessibilité
    • Radix Colors intègre déjà beaucoup de fonctionnalités liées à l’accessibilité
      https://www.radix-ui.com/colors
      Je travaille chez WorkOS, et Radix est un projet open source que nous gérons
    • Stripe a aussi publié un article sur son système de couleurs accessible : https://stripe.com/blog/accessible-color-systems
      En revanche, je ne connais pas encore vraiment d’outil qui exploite ce concept pour générer de nouvelles palettes
    • Material 3, une spécification assez importante utilisée par Google, dispose aussi d’un système de couleurs qui fonctionne de cette manière

  • J’aime bien jouer avec les couleurs, et c’est aussi un bon outil
    Parmi les autres alternatives intéressantes, il y a https://adevade.github.io/color-scheme-generator/, https://colorcolor.in — qui ne génère pas directement du Tailwind mais est très abouti — ainsi que http://colormind.io et https://uicolors.app/create

    • Cela fait longtemps que je cherche l’outil de couleur parfait, sans l’avoir encore trouvé
      Je voudrais un outil capable d’un niveau de sophistication comparable à ce que montre cette bibliothèque : https://colorjs.io/
    • Je recommanderais https://github.com/ardov/huetone (https://huetone.ardov.me/)
      Son interface est originale, comme je n’en ai pas vu dans des outils similaires, et le graphique permet de visualiser les L/C/H relatifs de toutes les couleurs de la palette
      Du coup, il devient plus facile de créer une palette cohérente
    • J’aime bien https://huemint.com/
    • J’ai l’impression que le site charge un peu lentement ces jours-ci, mais j’aime https://www.colourlovers.com depuis longtemps
    • Bonne liste
      Pour ajouter quelques liens plus généralistes sur la théorie des couleurs que j’utilise souvent, https://paletton.com/ permet de créer des palettes basées sur la théorie des couleurs et de générer une harmonie complète
      https://medialab.github.io/iwanthue/ utilise les k-means pour séparer les couleurs, ce qui est pratique pour les couleurs de graphiques et pour garantir du contraste

  • J’en ai fait un récemment
    C’est beaucoup plus simple et très marqué par mes préférences, mais ça peut générer une configuration Tailwind : https://ghola.dev ; c’est mieux sur desktop ou iPad
    Il y a aussi un long billet expliquant comment je l’ai réalisé avec des Web Components : https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • J’aime bien l’outil que tu as fait
      Appeler « générateur de palette » un outil qui ne traite qu’une seule couleur à la fois ne me semble pas tout à fait juste, ou en tout cas ce n’est pas ce que je cherche
      J’ai besoin d’un générateur de palette qui crée un ensemble de couleurs pour une application, et cet outil s’en rapproche davantage

  • Excellent
    Je suis parti d’un simple logo et, en moins d’une minute, j’ai obtenu une palette meilleure que celle que j’avais passée 30 minutes à créer moi-même la dernière fois

  • J’aime bien
    Je me demande quelle est la manière la plus simple de synchroniser ces couleurs avec Figma
    Les designers pros utilisent peut-être un plugin qui génère ce genre de couleurs et les exporte vers Tailwind

    • Tu cherches un plugin de ce type ? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens est une approche intéressante
    • La façon dont Figma gère les couleurs est tellement frustrante et étrange que j’ai fini par ne plus m’en soucier
      J’ai essayé plusieurs fois de m’y mettre sérieusement, mais c’est tellement manuel et laborieux que j’abandonne toujours

  • Bon outil
    Une autre approche que j’utilise dans ma base de code consiste à définir la palette de couleurs avec des variables CSS, puis à faire pointer la configuration Tailwind vers ces variables
    Cela permet d’injecter différents thèmes de couleur à l’exécution

  • Outil très utile
    Je génère une palette à partir d’une seule couleur, puis je mets le résultat dans https://palettte.app pour ajuster manuellement chaque couleur

  • Je me demande si l’exemple brand de la démo correspond à la façon dont les gens l’utilisent réellement dans une configuration classique
    Je pensais qu’on modifiait plutôt les couleurs de base, ou qu’on créait de nouvelles variables comme primary et secondary

    • C’est moi qui ai créé tints.dev
      Le jeu de couleurs brand est celui que j’utilise sur mon blog simeongriggs.dev, et j’ai effectivement pris l’échantillon 500 dans cet outil pour générer tout le reste

  • Ça semble utile pour les dégradés
    Je trouve étrange que personne ne mentionne Paletton, alors que c’est mon outil principal pour choisir des couleurs : https://paletton.com/
    En partant d’une couleur de base, on peut aussi obtenir des dégradés qui suivent les couleurs voisines dans la palette
    Les harmonies triadiques et tétradiques sont particulièrement utiles

  • Je cherchais activement comment appliquer un déplacement de couleur, et pourtant il m’a fallu un bon moment pour comprendre comment faire