MakeMyPalette

Acerca de MakeMyPalette

MakeMyPalette es una colección gratuita de herramientas de CSS y color creada para diseñadores web y desarrolladores front-end. Cada herramienta se ejecuta por completo en tu navegador — no se suben archivos, no se envían datos a ningún servidor y nada se almacena más allá de la sesión actual.

¿Por qué solo en el cliente?

La mayoría de las utilidades de diseño envían tus datos a través de un servidor, incluso cuando no hay razón técnica para hacerlo. Nosotros adoptamos un enfoque diferente: cada cálculo, conversión y operación de renderizado ocurre en tu navegador usando JavaScript y la API Canvas. Tus colores, degradados y favicons nunca abandonan tu máquina.

Esto significa que MakeMyPalette funciona sin conexión una vez cargada la página, se ejecuta con latencia cero y respeta tu privacidad por defecto.

Lo que puedes hacer

  • 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.

Construido con

MakeMyPalette está construido con Next.js, TypeScript y Tailwind CSS. El código fuente es mantenido por File-Toolkits en GitHub.

Comentarios

¿Has encontrado un error o tienes una solicitud de funcionalidad? Abre una incidencia en el GitHub repository. Las pull requests son bienvenidas.