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

  • Color Palette Generator — Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
  • Color Format Converter — Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
  • Contrast Checker — Check foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
  • Color Mixer — Blend two colors at any ratio in RGB or HSL space and copy the resulting hex, RGB, and HSL values instantly.
  • Palette from Image — Drop in any image and extract its dominant colors with median-cut quantization. Export as CSS variables, Tailwind config, SCSS, or JSON.
  • Colorblind Simulator — See your palette through seven types of color vision deficiency. Spot pairs that collide for the ~8% of users with red/green confusion.
  • Color Name Lookup — Find the closest CSS named color for any hex using perceptual Lab distance, or reverse lookup the exact hex behind any CSS keyword.
  • Accessible Palette Generator — Build a tonal scale (50–950) from any brand color and see WCAG AA/AAA contrast ratings for every shade against white, black, and the rest of the scale.
  • Gradient Generator — Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
  • Box Shadow Generator — Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
  • Text Shadow Generator — Stack text-shadow layers for drop shadows, neon glows, 3D type, letterpress, and long shadows. Preview on live text and copy the CSS.
  • CSS Filter Generator — Layer blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia into a single CSS filter with live preview on image or text.
  • Cubic Bezier Easing Visualizer — Drag the two control points to design custom cubic-bezier() easing curves. Compare against ease, ease-in, ease-out, and watch the timing curve drive a live animation.
  • Border Radius Previewer — Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
  • Clip-Path Maker — Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.
  • Favicon Generator — Upload an image or create a letter-based icon, then download all the PNG sizes you need for modern browsers and web manifests.

Construit avec

MakeMyPalette est construit avec Next.js, TypeScript et Tailwind CSS. Le code source est maintenu par File-Toolkits 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.