¿Cuántos colores debería usar mi sitio web? La regla 60-30-10 y cuando romperla
design · Oct 6, 2026 · 5 min read
la respuesta honesta es un número lo suficientemente pequeño como para ser un plan: un color que hace el trabajo, otro que lo apoya, un acento para la acción. además de los neutros: los blancos, casi negros y grises que técnicamente son colores pero funcionan como lienzo. todo lo demás es decoración que pide a los visitantes que mantengan en su cabeza más de lo que merece su mensaje.
Esto no es gusto, es aritmética: cada color adicional multiplica las combinaciones que tu página puede producir, y la mayoría de esas combinaciones son peores que la base. la moderación es lo que hace que las opciones restantes parezcan deliberadas.
la división 60-30-10, traducida para sitios web
La regla del diseño de interiores sobrevive porque funciona:
- 60 por ciento: el lienzo. fondo y neutros. aquí es donde vive el espacio en blanco de todo el sitio y por qué el área más grande es la más tranquila.
- 30 por ciento: el soporte. el color principal de tu marca: encabezados, tarjetas, los lugares que agrupan la información. establece la temperatura del sitio.
- 10 por ciento: el acento. Un color saturado reservado para las cosas que actúan: botones, enlaces, el estado actual. El objetivo de un acento es la escasez: en el momento en que cinco colores son igualmente fuertes, ninguno es un acento y nada apunta a ninguna parte.
Si has leído what makes a website look cheap, ya has visto el modo de fallo desde el otro lado: demasiados colores es uno de los indicios más fuertes que existen.
cómo elegir los colores reales
Empiece por la marca, no por la paleta de colores: si la empresa tiene un logotipo, ya posee un color. esos son tus 30. entonces:
- Elija el acento por trabajo, no por preferencia: es el color de hacer la cosa, por lo que debe contrastar fuertemente con el lienzo y el soporte. El azul y el naranja funcionan en mil mazos por una razón.
- extienda los neutrales primero. la mayoría de los momentos de "necesitamos más colores" son en realidad "nuestros grises no tienen rango": una buena escalera neutral (fondo, superficie, borde, texto) crea profundidad sin agregar tono.
- Verifique la legibilidad del emparejamiento: texto en cada fondo sobre el que se ubicará. El contraste es un número, no una opinión: el umbral de accesibilidad es 4,5:1 para el cuerpo del texto, y yo afino el mío barriendo la paleta como describe my color theory writeup.
texto oscuro sobre fondo claro, un acento, listo. Si parece demasiado sencillo, la solución es la fotografía y el espaciado, no un cuarto tono.
las excepciones: cuando más colores son correctos
la regla se dobla donde el contenido es el color:
- portafolio y fotografía. la obra aporta la paleta; el sitio retrocede a neutrales por lo que las imágenes crean todos los estados de ánimo.
- marcas que realmente poseen un arcoíris. una marca para niños, un festival, una tienda de artículos de arte: ahí los muchos colores son el mensaje, y la disciplina se traslada a otra parte: limitar el arcoíris a componentes específicos y mantener la tipografía y el diseño brutalmente consistentes.
- datos y categorías. los gráficos y las etiquetas obtienen un color por significado. La regla es la coherencia: un color significa una cosa en todas partes del sitio o no significa nada.
las excepciones comparten un rasgo: los colores son sistema elegido, no accidente acumulado. esa es la línea divisoria real, no el conteo.
Preguntas frecuentes: las preguntas que realmente recibo
¿El sitio web debería coincidir exactamente con mi logotipo?
el color del logotipo sí, todo el sitio no: el tono exacto del logotipo suele estar demasiado saturado para ocupar el 30 por ciento de una página. Tíñelo más oscuro o más suave para superficies grandes y mantén la versión pura para marcas pequeñas.
¿Qué pasa con el modo oscuro?
duplica las pruebas de superficie, no los colores: el mismo acento, neutros ajustados y las comprobaciones de contraste se ejecutan dos veces. Envío ambos, y el método de barrido en la publicación de teoría del color es cómo el tema oscuro gana sus números.
¿Puedo usar la paleta que viene con mi plantilla?
usted puede, y miles de sitios lo hacen, que es exactamente el problema. cambiar el color del acento de la plantilla es la hora de mayor apalancamiento en la personalización que puede hacer usted mismo.