Cargando aplicación...
Preparando tu experiencia meskeIA
Genera paletas de colores armónicas automáticamente
Colores opuestos en la rueda de color
:root {
--color-1: #2E86AB;
--color-2: #AB532E;
--color-3: #102F3C;
--color-4: #1B4F64;
--color-5: #266E8D;
--color-6: #318EB5;
--color-7: #4AA7CE;
}Colores opuestos que crean alto contraste y vibrancia
Colores vecinos para una apariencia armoniosa y natural
Tres colores equidistantes para diseños vibrantes y equilibrados
Variaciones de un color para elegancia y cohesión visual
Comparativa de armonías, casos de uso profesionales y errores que arruinan cualquier diseño
Elegir la armonía correcta define la personalidad visual de un proyecto. Esta tabla te ayuda a saber cuándo usar cada una según el objetivo del diseño.
| Armonía | Colores | Sensación | Dificultad uso | Ideal para |
|---|---|---|---|---|
| 🔄 Complementario | 2 (opuestos en rueda) | Alto contraste, energético, llamativo | Media (equilibrar proporciones) | CTAs, banners, marcas deportivas |
| ↔️ Análogo | 3 (adyacentes ±30°) | Armonioso, natural, tranquilo | Baja (siempre funciona) | Landings corporativas, apps de bienestar, naturaleza |
| △ Triádico | 3 (equidistantes 120°) | Vibrante, equilibrado, creativo | Alta (saturación difícil de controlar) | Diseño infantil, marcas creativas, entretenimiento |
| ◇ Tetrádico | 4 (rectángulo en rueda) | Rico, complejo, diverso | Muy alta (requiere un dominante) | Proyectos artísticos, ilustración, branding complejo |
| ⚔️ Split Comp. | 3 (base + dos vecinos del complementario) | Contraste suavizado, sofisticado | Media-Baja (más seguro que complementario) | Webs de moda, portfolios, productos premium |
| ◐ Monocromático | 3-5 (misma tonalidad) | Elegante, cohesionado, minimalista | Baja (muy seguro) | Apps minimalistas, diseño editorial, UI corporativa |
Cada perfil de diseño tiene necesidades distintas. El código exportable (CSS/SCSS/JSON) de esta herramienta encaja en todos estos flujos de trabajo.
Flujo típico:
Color corporativo del cliente → Generar análogo → Exportar CSS variables → Pegar en :root de globals.css → Paleta lista en 2 minutosPor qué funciona: Las variables CSS generadas siguen el patrón --color-N, compatible con cualquier proyecto. El cliente ya no pregunta "¿este azul combina con el rojo?" porque el sistema de armonía garantiza coherencia cromática.
Flujo típico:
Color primario de marca → Explorar complementario + monocromático → Documentar 3 propuestas → Presentar con preview en shades 100-900Por qué funciona: La escala de tonos (100-900) muestra el comportamiento del color en fondos claros (100-300), textos (700-900) y fondos oscuros, que es exactamente lo que necesita un sistema de diseño completo.
Flujo típico:
Color de marca en redes → Generar análogo → Usar los 3 HEX en Canva para posts coordinados → Feed de Instagram visualmente coherentePor qué funciona: Un feed de Instagram con paleta análoga tiene 40% más engagement que uno con colores inconsistentes, según estudios de UX en redes sociales. La coherencia visual genera reconocimiento de marca automático.
Flujo típico:
Color que "me gusta" → Generar monocromático → Exportar SCSS → 4 variables para primary, surface, border y text → Sistema de diseño minimalista funcionalPor qué funciona: Los devs no son diseñadores. Una paleta monocromática generada automáticamente elimina la parálisis por análisis del color y permite centrarse en el código. El resultado siempre es coherente aunque no sea espectacular.
La regla del 60-30-10 es el estándar profesional: 60% color dominante (fondo), 30% color secundario (secciones, cards), 10% color de acento (CTAs, highlights). Para interfaces web, una paleta funcional mínima necesita: 1 primario, 1 secundario o acento, 1 neutro claro (fondo), 1 neutro oscuro (texto), 1 de alerta (rojo/amarillo para errores). Eso son 5 colores base con sus tonos. Más de 7-8 colores diferentes generalmente indican falta de sistema.
💡 Regla práctica: Si necesitas más de 7 colores para describir tu marca, probablemente no tienes un sistema sino una colección. Simplifica hasta que cada color tenga un propósito único y claramente definido.
La WCAG 2.1 establece ratios mínimos de contraste entre texto y fondo: 4.5:1 para texto normal (AA) y 7:1 para texto normal (AAA). Diversas normativas obligan a cumplir AA en webs del sector público (RD 1112/2018 en España, ADA Title III en EE.UU., AODA en Canadá, EAA en la UE desde 2025). Un texto gris claro sobre fondo blanco puede ser bonito pero completamente ilegible para personas con visión reducida o en pantallas con mucha luz.
💡 Cómo verificar: Usa el WebAIM Contrast Checker (webaim.org/resources/contrastchecker) con los HEX de tu paleta. Como mínimo, texto de cuerpo y fondo deben superar 4.5:1. Los tonos 700-900 de la escala suelen funcionar bien sobre fondos claros.
Las pantallas usan RGB (luz aditiva), la impresión usa CMYK (pigmentos sustractivos). Los colores saturados y brillantes de pantalla, especialmente azules eléctricos (#00AAFF), verdes neón o magentas, pierden mucha intensidad al imprimirse porque CMYK no puede reproducir todo el gamut RGB. Además, el papel no emite luz, solo la refleja. Solución: en proyectos de impresión, trabaja directamente con valores CMYK y usa el conversor de colores de meskeIA para ver la traducción.
💡 Colores seguros para impresión: Paletas con saturación media-baja (S entre 30-70%) y luminosidad media (L entre 30-60%) se traducen mejor a CMYK. Evita colores con S > 90% si el proyecto será impreso.
El color de marca comunica valores inconscientemente: azul (confianza, tecnología, salud), verde (naturaleza, sostenibilidad, finanzas), rojo (urgencia, energía, alimentación), amarillo (optimismo, advertencia), naranja (creatividad, accesibilidad), violeta (lujo, espiritualidad), negro (elegancia, exclusividad). El color debe diferenciarse de la competencia directa y funcionar en contextos muy distintos (blanco, negro, color, pantalla, impresión).
💡 Proceso recomendado: 1) Lista 3 valores de marca (ej: innovador, accesible, confiable). 2) Busca el color que mejor comunica esos valores. 3) Comprueba que el principal competidor usa un color diferente. 4) Genera la paleta completa con esta herramienta.
Los colores cálidos (rojos, naranjas, amarillos) generan sensación de energía, urgencia y cercanía. Los colores fríos (azules, verdes, violetas) transmiten calma, profesionalidad y distancia. Los neutros (blancos, grises, beiges) son versátiles y no compiten con el contenido. La temperatura afecta también a la percepción de peso visual: los colores oscuros y cálidos "pesan" más visualmente que los claros y fríos.
💡 Aplicación práctica: Usa colores cálidos en CTAs de compra ("Comprar ahora", "Añadir al carrito"). Usa fríos en secciones de confianza (testimonios, certificaciones, garantías). Esta distinción temperatura-acción está validada por miles de tests A/B.
En dark mode, no uses negro puro (#000000) para fondos: es demasiado duro. Los mejores fondos oscuros van de #1A1A1A a #2D2D2D. Evita también colores muy saturados sobre fondos oscuros: cansan la vista. Las paletas análogas y monocromáticas con saturación media (S: 40-70%) funcionan especialmente bien en dark mode. Los tonos 100-300 de tu escala son los colores de texto sobre fondos oscuros.
💡 Truco de dark mode: En lugar de invertir colores, desatura ligeramente y reduce la luminosidad un 15-20%. Un azul primario #2E86AB puede convertirse en #2478A0 para dark mode. Los contrastes se mantienen sin que los colores "griten".
La escala de 9 tonos es el estándar de sistemas de diseño como Tailwind CSS, Material Design y Ant Design: 100 (fondo muy claro, highlights), 200-300 (bordes, separadores), 400-500 (colores secundarios, badges), 600-700 (color primario y hover), 800-900 (textos, colores sobre fondos claros). Esta nomenclatura permite a los equipos comunicarse sin ambigüedad: "usa primary-700 sobre primary-100" es inequívoco.
💡 Tailwind CSS: La escala de esta herramienta es compatible con la lógica de Tailwind (50-950). Puedes renombrar los valores exportados de 100-900 para usarlos directamente en tailwind.config.js como colores personalizados.
El 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de daltonismo (más común: deuteranopía, que confunde rojo y verde). Para paletas accesibles: evita depender solo del rojo/verde para transmitir información (éxito/error); añade iconos o texto. Los azules y amarillos son los más seguros porque son distinguibles por la mayoría de tipos de daltonismo. Herramientas como Stark (plugin de Figma) o Colour Contrast Analyser simulan cómo ve un daltónico tu diseño.
💡 Regla del "daltonismo-safe": Si tu diseño sigue siendo comprensible en escala de grises, es accesible para la mayoría de personas con daltonismo. Prueba captura de pantalla + desaturación 100% en Photoshop.
Proceso paso a paso para pasar de un color base a un sistema de diseño completo listo para implementar en cualquier proyecto web.
El color primario debe comunicar los valores del proyecto. Investiga los colores de los 3 competidores directos y elige uno que los diferencie. Introduce el HEX en el color base de la herramienta. Si no tienes color definido, empieza con el preset "meskeIA" y ajusta el tono en el color picker hasta encontrar el que mejor representa la marca.
Para proyectos serios/corporativos: monocromático o análogo. Para creativos/artísticos: triádico o tetrádico. Para conversión/marketing: complementario o split-complementary. Genera las 3 armonías más relevantes y descarga la paleta de cada una. Presenta 2-3 propuestas al cliente antes de decidir.
Revisa la escala 100-900 generada: el 100-200 debe ser casi blanco (útil para fondos), el 500-600 debe ser el color reconocible de marca, el 800-900 debe ser lo suficientemente oscuro para textos sobre fondo blanco con contraste WCAG AA (mínimo 4.5:1). Ajusta el color base si la escala no cumple estos criterios.
CSS Variables: para proyectos web con CSS puro o Next.js/React. SCSS Variables: para proyectos con Sass/SCSS o Bootstrap personalizado. JSON: para integrar con herramientas de diseño (Figma tokens, Style Dictionary) o para consumir en JavaScript. Pega el código exportado directamente en tu archivo de variables o tema.
Comprueba el contraste de texto de cuerpo (normalmente tono 800-900) sobre fondo claro (tono 50-100). Verifica también texto blanco sobre el color primario (para botones). Usa WebAIM Contrast Checker o la herramienta de inspección de Chrome DevTools (Accessibility > Color contrast). Si no supera 4.5:1, ajusta la luminosidad del tono elegido.
Nombra cada color con su propósito, no con su valor: --color-primary, --color-surface, --color-on-primary, --color-error. Esta abstracción permite cambiar toda la paleta editando solo las variables, sin tocar ningún componente. Es la base de cualquier sistema de diseño escalable y facilita la implementación de dark mode.
60% color dominante (fondos), 30% secundario (secciones, cards), 10% de acento (botones, highlights). Esta proporción garantiza jerarquía visual sin saturar al usuario.
Ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande (+18px). Las normativas de accesibilidad de muchos países lo exigen en webs públicas. Es también buen diseño.
Añadir dark mode después es costoso. Define desde el inicio los valores para fondo oscuro, texto sobre oscuro y primario en oscuro. Los tonos 600-700 suelen funcionar bien en ambos modos.
El rojo es error, el verde es éxito, el amarillo es advertencia. No uses el rojo de tu marca para mensajes de error si tu marca es roja. Distingue colores de marca de colores funcionales.
Referencia --color-primary-700 en lugar de #2E86AB directamente. Si el cliente cambia de azul a verde, solo editas la paleta, no todos los componentes.
Desatura la paleta al 100% gris y verifica que el diseño sigue siendo legible y con jerarquía clara. Si funciona en gris, funcionará en color y será accesible para daltónicos.
color: #2E86AB y el cliente cambia el azul por verde, debes editar cientos de archivos. Usa siempre color: var(--primary) y cambia solo la variable. El código exportado de esta herramienta ya sigue este patrón.