Crea paletas de color armónicas a partir de un color base. Exporta como CSS custom properties, config de Tailwind, SCSS o JSON. Verificación WCAG de accesibilidad incluida.
Escala de tonos (50-950)
Título de tarjeta
Texto descriptivo de la tarjeta mostrando la paleta de colores activa.
De elegir el color de marca a exportar la paleta lista para producción.
El espacio de color HSL (Hue, Saturation, Lightness) es el más intuitivo para diseño web. El tono (Hue) va de 0° a 360° en la rueda de colores: 0° es rojo, 120° es verde, 240° es azul. La saturación controla la viveza (0% es gris, 100% es el color más puro). La luminosidad controla el brillo (0% es negro, 100% es blanco, 50% es el color base).
CSS moderno acepta directamente HSL: color: hsl(224, 76%, 53%). Esto facilita crear variaciones claras y oscuras simplemente ajustando el tercer parámetro.
Colores opuestos en la rueda de colores (diferencia de 180°). Produce el mayor contraste visual. Ideal para CTAs que deben destacar sobre el color primario. Ejemplo: azul + naranja, rojo + verde.
Úsalo para: botones de acción, badges de alerta, elementos de énfasis.
Colores adyacentes en la rueda (diferencia de 30°). Produce combinaciones suaves y profesionales. Es el esquema más usado en diseño corporativo y SaaS. Ejemplo: azul + azul-verde + verde-azul.
Úsalo para: paletas de marca corporativa, dashboards, sitios B2B.
Tres colores equidistantes en la rueda (120° cada uno). Más equilibrado que el complementario pero más dinámico que el análogo. Requiere cuidado para no resultar excesivo. Ejemplo: rojo + amarillo + azul.
Úsalo para: paletas de marca creativa, sitios de entretenimiento, marketing.
Variaciones de un solo tono (mismo matiz, diferentes saturación y luminosidad). Produce diseños cohesivos y elegantes. Muy popular en diseño minimalista y de lujo. Ejemplo: 5 variantes de azul del 200 al 900.
Úsalo para: landing pages premium, marcas de lujo, diseño minimalista.
Cuatro colores en pares complementarios (90° entre sí). Ofrece la mayor variedad de colores pero es difícil de equilibrar. Uno debe dominar como primario. Ejemplo: azul + naranja + verde + rojo.
Úsalo con cuidado, solo si tienes experiencia en composición de color.
El color primario más los dos colores adyacentes a su complementario. Tiene alto contraste como el complementario pero es más fácil de manejar. Ejemplo: azul + amarillo-naranja + amarillo-verde.
Úsalo cuando quieras contraste sin la tensión del complementario directo.
El color primario debe reflejar los valores de tu marca. Azul transmite confianza y profesionalismo. Verde transmite crecimiento y sustentabilidad. Morado transmite creatividad e innovación. Usa el selector de color o escribe el HEX directamente.
Para marcas corporativas y SaaS, el esquema análogo produce la combinación más profesional y cohesiva. Genera colores secundarios para acentos, iconos y elementos de apoyo.
Activa "Generar escala de tonos" para crear las variaciones del 50 al 950. Usa los tonos claros (50-200) para fondos y bordes, los medios (400-600) para elementos interactivos, y los oscuros (700-950) para texto.
Revisa el panel de Accesibilidad WCAG en el panel izquierdo. Asegúrate de que los colores que uses para texto sobre fondos tengan al menos ratio 4.5:1 (AA) o 7:1 (AAA). Nunca uses texto en colores que fallan WCAG AA.
Usa el panel de Export para copiar la paleta como CSS Variables (para cualquier proyecto), Tailwind config (para proyectos Tailwind), SCSS variables (para Sass) o JSON (para herramientas de diseño).
El contraste de color es crítico para la accesibilidad web. Las WCAG 2.1 definen tres niveles de conformidad. Para texto normal (menos de 18px regular o 14px bold), los requisitos son:
| Nivel WCAG | Texto normal | Texto grande | Descripción |
|---|---|---|---|
| Falla | < 4.5:1 | < 3:1 | No cumple ningún estándar de accesibilidad |
| AA (mínimo) | 4.5:1 | 3:1 | Requerido por ley en muchos países |
| AAA (óptimo) | 7:1 | 4.5:1 | Máxima accesibilidad, recomendado |
Colores por industria
Regla de 60-30-10
La regla clásica del diseño de interiores aplica igual en web: 60% color dominante (fondos, espacios), 30% color secundario (secciones, elementos), 10% color de acento (botones, CTA, badges). Limita tu paleta activa a 2-3 colores.
Evita negro y blanco puros
El negro puro (#000000) y el blanco puro (#ffffff) sobre fondos contrastantes pueden causar fatiga visual. Usa slate-900 (#0f172a) en lugar de #000 y slate-50 (#f8fafc) en lugar de #fff para un look más suave y profesional.
