MakeMyPalette

Sobre o MakeMyPalette

O MakeMyPalette é uma coleção gratuita de ferramentas de CSS e cores criada para web designers e desenvolvedores front-end. Cada ferramenta é executada inteiramente no seu navegador — nenhum arquivo é enviado, nenhum dado é transmitido a um servidor, e nada é armazenado além da sua sessão atual.

Por que somente no cliente?

A maioria dos utilitários de design envia seus dados por um servidor, mesmo quando não há motivo técnico para isso. Nós adotamos uma abordagem diferente: todo cálculo, conversão e operação de renderização acontece no seu navegador usando JavaScript e a API Canvas. Suas cores, gradientes e favicons nunca saem da sua máquina.

Isso significa que o MakeMyPalette funciona offline após o carregamento da página, roda com latência zero e respeita sua privacidade por padrão.

O que você pode fazer

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

Construído com

O MakeMyPalette é construído com Next.js, TypeScript e Tailwind CSS. O código-fonte é mantido por File-Toolkits no GitHub.

Feedback

Encontrou um bug ou tem uma solicitação de recurso? Abra uma issue no GitHub repository. Pull requests são bem-vindas.