Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
Comienza con los valores de tu marca y tu público objetivo. Usa la psicología del color como guía: el azul transmite confianza y profesionalismo, el verde sugiere crecimiento y naturaleza, el rojo señala urgencia o pasión, el morado implica lujo o creatividad. Limita tu paleta principal a 3-5 colores. Asegura suficiente contraste (ratio 4.5:1) para accesibilidad.
La regla 60-30-10 es un principio de diseño para el uso equilibrado de colores: 60% color dominante (fondos, áreas grandes), 30% color secundario (tarjetas, barras laterales, elementos UI), 10% color de acento (botones, resaltados, llamadas a la acción). Esto crea jerarquía visual manteniendo la armonía. Los colores neutros suelen formar la base del 60% en el diseño UI moderno.
WCAG 2.1 requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande. Usa herramientas como WebAIM Contrast Checker o las DevTools del navegador para verificar. No dependas únicamente del color para transmitir información (usa también íconos/texto), prueba con simuladores de daltonismo y asegúrate de que los elementos interactivos tengan estados de enfoque visibles.
Para desarrollo web: códigos hex (#RRGGBB) para CSS, valores RGB/HSL para manipulación dinámica y propiedades personalizadas CSS para temas. Para herramientas de diseño: la mayoría acepta códigos hex; Figma y Sketch admiten bibliotecas de colores. Para Tailwind CSS: define colores en tailwind.config.js bajo theme.extend.colors. Para branding: incluye valores Pantone (impresión), CMYK (impresión) y RGB (pantalla).