MakeMyPalette

À propos de MakeMyPalette

MakeMyPalette est une collection gratuite d'outils CSS et couleur conçue pour les webdesigners et développeurs front-end. Chaque outil s'exécute entièrement dans votre navigateur — aucun fichier n'est téléversé, aucune donnée n'est envoyée à un serveur, et rien n'est stocké au-delà de votre session actuelle.

Pourquoi uniquement côté client ?

La plupart des utilitaires de design envoient vos données via un serveur, même lorsqu'il n'y a aucune raison technique de le faire. Nous avons choisi une approche différente : chaque calcul, conversion et opération de rendu a lieu dans votre navigateur, en utilisant JavaScript et l'API Canvas. Vos couleurs, dégradés et favicons ne quittent jamais votre machine.

Cela signifie que MakeMyPalette fonctionne hors ligne une fois la page chargée, s'exécute sans latence et respecte votre vie privée par défaut.

Ce que vous pouvez faire

  • Générateur de palettes de couleurs — Générez des harmonies complémentaires, analogues, triadiques et plus encore à partir de n'importe quelle couleur de base. Exportez en variables CSS, configuration Tailwind, SCSS ou JSON.
  • Convertisseur de formats de couleur — Collez n'importe quelle valeur de couleur et visualisez-la instantanément en HEX, RGB, RGBA, HSL, HSLA et HSV. Copiez n'importe quel format en un clic.
  • Vérificateur de contraste — Vérifiez les paires de couleurs avant-plan et arrière-plan par rapport aux exigences WCAG 2.1 AA et AAA pour texte normal et texte agrandi.
  • Mélangeur de couleurs — Mélangez deux couleurs dans n'importe quel ratio, en espace RGB ou HSL, et copiez instantanément les valeurs hex, RGB et HSL résultantes.
  • Palette depuis une image — Déposez une image et extrayez ses couleurs dominantes avec la quantification median-cut. Exportez en variables CSS, configuration Tailwind, SCSS ou JSON.
  • Simulateur de daltonisme — Visualisez votre palette à travers sept types de déficiences de la vision des couleurs. Repérez les paires qui se confondent pour les ~8 % d'utilisateurs avec confusion rouge/vert.
  • Recherche de noms de couleur — Trouvez la couleur CSS nommée la plus proche de n'importe quel hex avec la distance perceptuelle Lab, ou retrouvez le hex exact derrière n'importe quel mot-clé CSS.
  • Générateur de palettes accessibles — Construisez une échelle tonale (50–950) à partir de n'importe quelle couleur de marque et consultez les évaluations de contraste WCAG AA/AAA de chaque nuance face au blanc, au noir et au reste de l'échelle.
  • Générateur de dégradés — Créez des dégradés CSS linéaires, radiaux et coniques avec plusieurs arrêts de couleur, un contrôle d'angle et un aperçu en temps réel.
  • Générateur de box-shadow — Empilez plusieurs box-shadows avec un contrôle total sur offset, blur, spread, couleur et inset. Copiez le CSS instantanément.
  • Générateur de text-shadow — Empilez des couches de text-shadow pour des ombres portées, des lueurs néon, du 3D, du letterpress et des ombres longues. Prévisualisez sur du texte réel et copiez le CSS.
  • Générateur de filtres CSS — Combinez blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate et sepia en un seul filtre CSS avec aperçu en direct sur image ou texte.
  • Visualiseur cubic-bezier — Faites glisser les deux points de contrôle pour concevoir vos propres courbes d'easing cubic-bezier(). Comparez à ease, ease-in, ease-out et observez la courbe animer en direct.
  • Aperçu de border-radius — Réglez les quatre coins indépendamment ou utilisez la syntaxe elliptique à 8 valeurs. Voyez la forme se mettre à jour en direct.
  • Créateur de clip-path — Dessinez vos propres polygones clip-path avec un éditeur interactif, ou partez de préréglages comme triangles, hexagones et flèches.
  • Générateur de favicons — Téléchargez une image ou créez une icône à partir d'une lettre, puis téléchargez toutes les tailles PNG nécessaires pour les navigateurs modernes et les manifestes web.

Construit avec

MakeMyPalette est construit avec Next.js, TypeScript et Tailwind CSS. Le code source est maintenu par MakeMy Toolkit sur GitHub.

Retours

Vous avez trouvé un bug ou avez une demande de fonctionnalité ? Ouvrez une issue dans le GitHub repository. Les pull requests sont les bienvenues.