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
- Gerador de paletas de cor — Gere harmonias complementares, análogas, triádicas e mais a partir de qualquer cor base. Exporte como variáveis CSS, configuração do Tailwind, SCSS ou JSON.
- Conversor de formatos de cor — Cole qualquer valor de cor e veja-o na hora em HEX, RGB, RGBA, HSL, HSLA e HSV. Copie qualquer formato com um clique.
- Verificador de contraste — Cheque pares de cor de primeiro plano e fundo em relação aos requisitos WCAG 2.1 AA e AAA para texto normal e grande.
- Misturador de cores — Misture duas cores em qualquer proporção no espaço RGB ou HSL e copie imediatamente os valores hex, RGB e HSL resultantes.
- Paleta a partir de imagem — Solte qualquer imagem e extraia suas cores dominantes com quantização median-cut. Exporte como variáveis CSS, configuração do Tailwind, SCSS ou JSON.
- Simulador de daltonismo — Veja sua paleta através de sete tipos de deficiência na visão de cores. Identifique pares que colidem para os ~8% de usuários com confusão vermelho/verde.
- Busca de nomes de cor — Encontre a cor nomeada CSS mais próxima de qualquer hex usando distância perceptual Lab, ou busque o hex exato por trás de qualquer palavra-chave CSS.
- Gerador de paletas acessíveis — Crie uma escala tonal (50–950) a partir de qualquer cor de marca e veja as classificações de contraste WCAG AA/AAA de cada tom contra branco, preto e o restante da escala.
- Gerador de gradientes — Crie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor, controle de ângulo e pré-visualização em tempo real.
- Gerador de box-shadow — Empilhe várias sombras com controle total sobre offset, blur, spread, cor e inset. Copie o CSS na hora.
- Gerador de text-shadow — Empilhe camadas de text-shadow para sombras, brilho neon, tipografia 3D, letterpress e sombras longas. Pré-visualize em texto real e copie o CSS.
- Gerador de filtros CSS — Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia em um único filtro CSS com pré-visualização em imagem ou texto.
- Visualizador de cubic-bezier — Arraste os dois pontos de controle para desenhar curvas de easing cubic-bezier() personalizadas. Compare com ease, ease-in, ease-out e veja a curva animar ao vivo.
- Pré-visualizador de border-radius — Ajuste os quatro cantos de forma independente ou use a sintaxe elíptica de 8 valores. Veja a forma atualizar ao vivo.
- Criador de clip-path — Desenhe polígonos clip-path personalizados com um editor interativo ou comece a partir de presets como triângulos, hexágonos e setas.
- Gerador de favicons — Envie uma imagem ou crie um ícone baseado em letra e baixe todos os tamanhos PNG que você precisa para navegadores modernos e manifestos web.
Construído com
O MakeMyPalette é construído com Next.js, TypeScript e Tailwind CSS. O código-fonte é mantido por MakeMy Toolkit 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.