La regla 60-30-10
Es la regla más útil para repartir colores. Viene del diseño de interiores, pero sirve para cualquier proyecto.
- 60 %: color dominante. Suele ser un neutro o un tono suave. Ocupa fondos y áreas grandes.
- 30 %: color secundario. Aporta personalidad. Se usa en bloques, menús o muebles.
- 10 %: color de acento. Es el más llamativo. Se usa en botones, iconos o detalles.
Por ejemplo: blanco roto al 60 %, azul marino al 30 % y naranja al 10 %.
No hace falta medir con exactitud. La idea es que un color mande, otro acompañe y otro destaque.
El papel de los neutros
Los neutros son blanco, negro, gris, beige, crema y marrones claros. Combinan con casi todo.
Sirven para dar descanso a la vista y para que los colores fuertes destaquen. Una paleta sin neutros suele resultar cansada.
- Blanco y blanco roto: limpieza y espacio.
- Gris: moderno y sobrio. Elige grises cálidos o fríos según el resto de la paleta.
- Beige y arena: calidez y naturalidad.
- Negro o casi negro: elegancia y contraste. Para texto, un gris muy oscuro suele ser más cómodo que el negro puro.
Combinar por temperatura
Los colores se dividen en cálidos (rojos, naranjas, amarillos) y fríos (azules, verdes, violetas). Hay tres formas sencillas de combinarlos:
- Todo cálido: resulta acogedor y enérgico. Ideal para restaurantes o marcas cercanas.
- Todo frío: resulta tranquilo y profesional. Ideal para salud, tecnología o finanzas.
- Base fría con acento cálido: la opción más versátil. El acento cálido atrae la mirada sobre un fondo calmado.
Lo que suele fallar es mezclar muchos cálidos y fríos intensos a la vez, sin un color dominante.
Contraste para textos
Un color bonito no sirve si el texto no se lee. El contraste entre el texto y el fondo es clave para la lectura y la accesibilidad.
- Usa texto oscuro sobre fondo claro, o texto claro sobre fondo oscuro.
- Evita texto amarillo, verde claro o gris claro sobre blanco.
- Evita poner colores complementarios saturados uno sobre otro, como rojo sobre verde. Vibran y cansan.
- Las normas WCAG piden una relación mínima de 4,5:1 para texto normal y 3:1 para texto grande.
Puedes comprobar cualquier pareja de colores con nuestro verificador de contraste.
15 combinaciones de colores que siempre funcionan
Estas parejas son seguras para empezar. Úsalas como base y añade un neutro o un acento según lo necesites.
- Azul marino y crema: clásica, seria y fácil de leer.
- Negro y dorado: lujo y elegancia.
- Azul y naranja: complementarios con mucha energía.
- Verde bosque y beige: natural y tranquila.
- Rosa y gris carbón: moderna y equilibrada.
- Amarillo y negro: máximo contraste, ideal para avisos.
- Burdeos y arena: cálida y sofisticada.
- Turquesa y coral: fresca y veraniega.
- Morado y lila claro: monocromática y creativa.
- Marrón y verde salvia: tierra, ideal para marcas naturales.
- Gris y melocotón: suave y amable.
- Azul petróleo y amarillo pálido: serena con un toque de luz.
- Terracota y blanco roto: cálida y mediterránea.
- Verde azulado oscuro y mostaza: retro y con personalidad.
- Blanco y rojo: directa, enérgica y muy visible.
Encontrarás muchas más ideas, con sus códigos HEX, en nuestra página de combinaciones de colores.
Qué combina con cada color
Si ya tienes un color principal, esta lista te da un punto de partida rápido:
- Rojo: blanco, negro, gris, azul marino y beige. Para algo atrevido, rosa o naranja.
- Naranja: azul marino, turquesa, blanco, crema y marrón.
- Amarillo: gris, negro, azul marino y blanco. El amarillo mostaza combina bien con verde oscuro.
- Verde: beige, blanco, marrón, dorado y rosa suave.
- Azul: blanco, naranja, gris, amarillo y coral. El azul marino funciona casi como un neutro.
- Morado: gris, lila, dorado, verde salvia y blanco.
- Rosa: gris, azul marino, verde oliva, blanco y dorado.
- Marrón: crema, verde, azul petróleo, naranja y blanco roto.
Fíjate en que los neutros aparecen en casi todas las listas. Son la forma más segura de acompañar un color fuerte.
Cómo crear tu propia combinación
- Elige un color principal según lo que quieras transmitir.
- Busca un color secundario en el círculo cromático: un vecino para algo tranquilo, un opuesto para algo llamativo.
- Añade uno o dos neutros.
- Elige un solo color de acento para lo más importante.
- Prueba la paleta en un ejemplo real: una página, una diapositiva o una foto de la habitación.
Si dudas, quédate con menos colores. Tres a cinco colores son suficientes para casi cualquier proyecto.
Errores comunes al combinar colores
- Usar demasiados colores. El resultado parece desordenado y nada destaca.
- Dar el mismo peso a todos. Sin un color dominante, la vista no sabe dónde mirar.
- Olvidar el contraste. Textos que no se leen o botones que no se ven.
- Saturar todo. Los colores muy vivos cansan. Combínalos con tonos suaves.
- Ignorar el contexto. Un color se ve distinto con luz natural, en pantalla o impreso.
- Copiar sin adaptar. Una paleta que funciona en una marca puede no encajar con tu público.
- Mezclar neutros de distinta temperatura. Un gris frío junto a un beige cálido puede verse sucio. Elige neutros de la misma familia.
- No probar en varias pantallas. Un color puede verse bien en tu ordenador y apagado en un móvil. Revisa siempre en más de un dispositivo.