Générateur de palette de couleurs Tailwind

Caractéristiques et mode de manipulation de la palette de couleurs

• Le nom de la palette de couleurs est "NameValueOpen Color Picker", et la valeur de couleur par défaut est 500.
• Des fonctions permettent de copier l’URL de cette palette dans le presse-papiers ou d’ouvrir l’URL de l’API.
• Il existe une fonction d’affichage du graphique des couleurs, ainsi qu’une fonction permettant de supprimer une couleur spécifique, blue.
• Des interrupteurs permettent d’ajuster la saturation (Saturation), la luminosité (Lightness), la luminosité maximale (Maximum Lightness), la luminosité minimale (Minimum Lightness) et Lu (luminosité, Luminance).
• Lightness couvre une plage de 50 à 950, ce qui permet à l’utilisateur d’ajuster la luminosité de la palette.

Avis de GN⁺ :

• Cet article présente des fonctionnalités de manipulation de palettes de couleurs et fournit des informations utiles aux designers comme aux développeurs.
• Il est important qu’il propose divers outils permettant aux utilisateurs d’effectuer des ajustements fins des couleurs.
• Les fonctions de réglage des couleurs étant un élément clé dans le design UI/UX des sites web et des applications, comprendre ce type d’outil peut aider à améliorer la qualité du design.

[GN⁺]

Commentaires Hacker News

• Intérêt pour le développement d’un outil permettant de connaître l’accessibilité des combinaisons de couleurs rien qu’en lisant leurs noms, en s’appuyant sur un design system pensé pour l’accessibilité.

  Par exemple, avec le design system USWDS, on peut savoir grâce à l’écart entre les valeurs de couleur si la combinaison de blue-30 et gray-80 respecte le niveau AA des WCAG.

• Aime expérimenter avec les couleurs et partage des outils utiles ainsi que des options alternatives sur le sujet.

  Fournit des liens vers plusieurs sites web de génération de palettes de couleurs.

• A personnellement créé un outil de couleurs simple et très directif, capable de générer une configuration Tailwind.

  Fournit un lien vers le site web de cet outil ainsi qu’un lien vers un article expliquant comment il a été créé à l’aide de web components.

• Avec ce nouvel outil, il a fallu moins d’une minute pour générer une palette à partir d’un logo, avec un meilleur résultat que lors des tentatives manuelles précédentes.

• Préfère définir la palette de couleurs avec des variables CSS puis y faire référence dans la configuration Tailwind.

  Mentionne la flexibilité que cela apporte pour appliquer différents thèmes de couleur à l’exécution.

• Exprime sa gratitude envers le créateur de l’outil et se demande quelle est la manière la plus simple de synchroniser les couleurs avec Figma.

  S’interroge sur les plugins utilisés par les designers professionnels, ainsi que sur les méthodes de génération de couleurs et d’export vers Tailwind.

• L’outil est jugé utile pour générer une palette à partir d’une seule couleur, puis envoyer le résultat dans une autre application afin d’ajuster manuellement chaque couleur.

• Pose une question sur la démo d’exemple de marque et, plus généralement, sur la manière dont les utilisateurs modifient la couleur de base ou créent de nouvelles variables.

• En tant que développeur full stack, indique ne pas avoir de connaissances sur les couleurs tout en utilisant Tailwind CSS.

  Demande où apprendre à choisir les couleurs et à utiliser ce type d’outil.

• Cela semble être un outil utile pour générer des dégradés, et l’absence de mention de Paletton paraît étonnante.

  Fournit un lien vers le site web de Paletton et explique sa fonctionnalité de génération de dégradés vers des couleurs adjacentes à partir d’une couleur de base.