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
- Generador de paletas de color — Genera armonías complementarias, análogas, triádicas y más a partir de cualquier color base. Exporta como variables CSS, configuración de Tailwind, SCSS o JSON.
- Convertidor de formatos de color — Pega cualquier valor de color y velo al instante en HEX, RGB, RGBA, HSL, HSLA y HSV. Copia cualquier formato con un clic.
- Verificador de contraste — Comprueba pares de colores de primer plano y fondo según los requisitos WCAG 2.1 AA y AAA para texto normal y grande.
- Mezclador de colores — Mezcla dos colores en cualquier proporción en el espacio RGB o HSL y copia al instante los valores hex, RGB y HSL resultantes.
- Paleta desde imagen — Suelta cualquier imagen y extrae sus colores dominantes con cuantificación median-cut. Exporta como variables CSS, configuración de Tailwind, SCSS o JSON.
- Simulador de daltonismo — Visualiza tu paleta a través de siete tipos de deficiencia de visión cromática. Detecta pares que chocan para el ~8% de usuarios con confusión rojo/verde.
- Buscador de nombres de color — Encuentra el color CSS nombrado más cercano a cualquier hex usando distancia perceptual Lab, o busca el hex exacto detrás de cualquier palabra clave CSS.
- Generador de paletas accesibles — Crea una escala tonal (50–950) a partir de cualquier color de marca y consulta las calificaciones de contraste WCAG AA/AAA de cada matiz frente a blanco, negro y el resto de la escala.
- Generador de degradados — Crea degradados CSS lineales, radiales y cónicos con múltiples paradas de color, control de ángulo y vista previa en tiempo real.
- Generador de box-shadow — Apila varias sombras con control total sobre desplazamiento, desenfoque, extensión, color e inset. Copia el CSS al instante.
- Generador de text-shadow — Apila capas de text-shadow para sombras arrojadas, brillos neón, tipografía 3D, letterpress y sombras largas. Previsualiza sobre texto real y copia el CSS.
- Generador de filtros CSS — Combina blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia en un único filtro CSS con vista previa en vivo sobre imagen o texto.
- Visualizador de cubic-bezier — Arrastra los dos puntos de control para diseñar curvas de easing cubic-bezier() personalizadas. Compáralas con ease, ease-in, ease-out y observa la curva animando en vivo.
- Previsualizador de border-radius — Ajusta las cuatro esquinas de forma independiente o utiliza la sintaxis elíptica de 8 valores. Observa cómo la forma se actualiza al instante.
- Creador de clip-path — Dibuja polígonos clip-path personalizados con un editor interactivo o parte de presets como triángulos, hexágonos y flechas.
- Generador de favicons — Sube una imagen o crea un icono con una letra y descarga todos los tamaños PNG que necesitas para navegadores modernos y manifiestos web.
Construido con
MakeMyPalette está construido con Next.js, TypeScript y Tailwind CSS. El código fuente es mantenido por MakeMy Toolkit 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.