Elige una paleta de colores partiendo de un color para el que tengas una razón real — un color de marca, un color de producto, algo de una fotografía que no puedes cambiar — y deriva de él todo lo demás. Una paleta que funciona es un tono dominante, un acento lo bastante lejos de él como para que se note, cinco o seis neutros que van a cubrir la mayor parte de la pantalla, y cuatro o cinco variantes de cada color para los estados hover, focus y disabled. Una regla de armonía decide exactamente una de esas cosas. Por eso una paleta que se ve segura de sí misma como fila de muestras puede deshacerse en cuanto se encuentra con una página real.
De dónde sale el primer color
Ningún generador responde a «¿de qué color debería ser mi cosa?». Respóndelo con una restricción en vez de con gusto personal, porque una restricción se puede defender seis meses después y una preferencia no:
- Un color de marca que ya tienes. Si existe uno, ese es la base, te guste o no.
- El color dominante de la fotografía junto a la que tiene que convivir el diseño. El color de la interfaz peleando con la fotografía de producto es una pelea que gana la fotografía.
- La convención de la categoría — las finanzas tiran al azul, la comida a los tonos cálidos, las herramientas para desarrolladores al oscuro. Romper una convención está bien, pero hazlo a propósito.
- Lo que tu competidor más cercano no haya tomado. Dos logos azules en el mismo mercado son un logo azul que la gente recuerda y otro que no.
Elijas la que elijas, elige una versión saturada. Siempre puedes quitarle saturación después. Lo que no puedes es rotar el tono de algo que ya está casi gris y esperar que el resto de las muestras se vean distintas: volverán como cinco colores casi idénticos con cinco códigos hex genuinamente diferentes, que es el modo de fallo más confuso que existe.
Qué regla de armonía elegir
Las seis reglas habituales son la misma operación: toma tu tono base, muévete un número fijo de grados por la rueda, conserva la saturación, ajusta la luminosidad. Los nombres suenan a teoría y describen aritmética.
| Regla | Qué hace | Úsala cuando |
|---|---|---|
| Monocromática | Un tono, varias luminosidades | Quieres calma y vas a tomar prestado un acento de otro lado |
| Análoga | Vecinos dentro de unos 60° | La coherencia importa más que destacar cualquier elemento concreto |
| Complementaria | El tono a 180° | Un elemento — normalmente un botón — tiene que gritar |
| Complementaria dividida | Los dos tonos a cada lado del opuesto | Quieres ese contraste sin el borde vibrante de los complementarios puros |
| Tríada / cuadrado | Tres o cuatro tonos, repartidos por igual | El color es contenido: ilustración, gráficos, una página de marketing |
Leer sobre ellas es más lento que mirarlas. Pon tu color base en el generador de paletas de aquí y recorre las seis reglas; vas a ver rápido cuáles dos vale la pena considerar, y el cuadro de exportación te da los hex como custom properties de CSS, variables de SCSS, un array JSON o una lista simple.
Espera una sorpresa. Estas reglas funcionan sobre la rueda RGB que usa tu pantalla, no sobre la rueda rojo-amarillo-azul de la clase de arte. Enfrente del azul sale amarillo, no naranja. Ninguna de las dos está mal — el pigmento y la luz se comportan distinto —, pero ese desajuste suele ser la razón de que un resultado complementario se vea poco familiar.
Cuántos colores necesitas de verdad
Cinco muestras son un resultado, no un plan. Casi toda interfaz que se lee como bien diseñada funciona con dos tonos: uno dominante y un acento, y todo lo demás lo cargan los neutros.
La guía habitual es más o menos un 60% de la superficie en el color dominante, un 30% en un secundario y un 10% en el acento. Tomes o no esas cifras exactas, lo que hay detrás es real: una paleta son proporciones, y una fila de muestras del mismo tamaño esconde la proporción por completo. Dos colores que se ven equilibrados uno al lado del otro pueden ser insoportables cuando uno es el fondo de la página y el otro es cada título.
La prueba barata es pintar la cosa real: fondo, una tarjeta, un título, un párrafo, un botón, un enlace. Cinco minutos de eso le ganan a una hora mirando muestras.
La mayor parte de tu paleta es gris
Cuenta los píxeles realmente coloreados de cualquier producto que admires. Texto, bordes, separadores, fondos, controles disabled, texto de placeholder: todo neutro, y ninguna regla de armonía genera uno solo de ellos. Por eso «elegir una paleta» se siente terminado mucho antes de estarlo.
Construye seis, y dales roles en vez de números: fondo de página, superficie elevada, borde, texto atenuado, texto de cuerpo, títulos. Dos cosas hacen que se vean deliberados:
- Tíñelos. Mezcla unos pocos puntos de tu tono base en cada uno: entre un 4 y un 8% de saturación basta para que se note y no llega a leerse como color. El
#808080puro es el equivalente visual de Times New Roman. - No uses negro puro para el texto. Algo alrededor de
#1A1A1Asobre blanco sigue superando el umbral de 4.5:1 con margen de sobra, y se lee como una decisión y no como un valor por defecto que nadie cambió. El negro puro es una convención de la imprenta, donde el papel no te está emitiendo luz.
Cada color necesita cuatro o cinco versiones
Un botón no es un color. Es un color en reposo, un color de hover, un color activo, un anillo de focus y un estado disabled, y si solo definiste el primero, los otros cuatro se los va a inventar a última hora quien esté escribiendo el componente.
Derívalos moviendo la luminosidad, no el tono: de 6 a 10 puntos más oscuro para el hover en un tema claro, un poco más para el activo. Mantén fijos el tono y la saturación, o el botón cambia de identidad cuando lo tocas. El anillo de focus es el que necesita planificación, porque tiene que verse contra el botón y contra lo que haya detrás del botón — muchas veces eso significa un color aparte en vez de un tono del acento.
Los estados disabled son donde las paletas fallan en accesibilidad sin hacer ruido. Atenuar un control es una señal legítima; una etiqueta que nadie puede leer es un bug que pasó la revisión porque todos ya sabían lo que decía el botón.
Comprueba el contraste antes de encariñarte
Las reglas de armonía saben de tono y nada de legibilidad. Dos colores pueden ser un par complementario de manual y aun así ser ilegibles como texto uno sobre el otro.
Los umbrales son lo bastante cortos como para memorizarlos: 4.5:1 para el texto de cuerpo, 3:1 para el texto grande y para componentes de interfaz como bordes e indicadores de focus. Pasa cada par de texto y fondo que pienses usar por un verificador de contraste antes de que la paleta se endurezca, no después de construir los componentes.
El par que falla más a menudo es un acento de tono medio con texto blanco encima. Toma un azul medio, #3B82F6: contra blanco mide 3.7:1, que pasa para un título de 24 px y no pasa para una etiqueta de 14 px. Su luminosidad HSL es de un 60% aproximadamente: bájala a 50% y obtienes #0B64F4 con 5.1:1, que pasa las dos. Los verdes son peores, porque tu ojo lee el verde como mucho más brillante que el azul: un #22C55E saturado con blanco encima da solo 2.3:1. Diez puntos de luminosidad lo llevan a 3.6:1, que sigue sin pasar; necesita unos quince. Si quieres el detalle de qué cuenta como texto grande y de dónde engaña la propia relación de contraste, los umbrales de la relación de contraste explicados lo cubre como corresponde.
Por qué siempre hay una muestra que parece demasiado brillante
Los generadores de armonía trabajan en HSL, y la luminosidad de HSL es aritmética, no percepción. Un amarillo al 50% de luminosidad se ve cegadoramente más brillante que un azul al 50% de luminosidad, porque la visión humana pondera el verde mucho más que el azul. En cualquier paleta que incluya un amarillo o un cian, esa muestra va a parecer que brilla junto a las otras aunque los números digan que coinciden.
Aquí no hay truco. Ajústalo a mano, o trabaja en un espacio de color perceptual — la diferencia entre HEX, RGB y HSL entra en por qué la luminosidad de HSL se comporta así y en qué hace OKLCH al respecto.
Tres comprobaciones antes de comprometerte
- Pásalo a escala de grises. Haz una captura de tu mockup y desatúrala. Si el botón ya no destaca, nunca destacaba por contraste: dependía del tono, y el tono es lo primero que se pierde.
- Asume que alguien no ve la diferencia. La deficiencia de visión de color rojo-verde es común: alrededor de un hombre de cada doce y una mujer de cada doscientas de ascendencia del norte de Europa, y menos pero lejos de ser rara en otras poblaciones. Dos muestras separadas 120° en la rueda pueden seguir siendo indistinguibles para esas personas.
- Nunca dejes que el color cargue solo con el significado. Un estado de error es rojo y tiene un ícono, o rojo y dice qué salió mal. El rojo por sí solo es decoración que parte de tus usuarios se va a perder.
Ninguna de esas cosas lleva un minuto, y cada una atrapa una clase de problema que sale cara de arreglar una vez que los componentes existen.
La forma más rápida de atravesar la primera mitad de esto es meter tu color base en el generador de paletas de colores, recorrer las reglas de armonía hasta que dos parezcan plausibles y copiar los hex como custom properties de CSS — y luego dedicar el resto del tiempo a los neutros y los estados que deliberadamente no produce.
En el momento en que dos de esos colores acaban en el mismo degradado aparece un problema nuevo: el punto medio a menudo se vuelve gris y turbio por razones que no tienen nada que ver con tu elección de tonos. Por qué los degradados CSS se ven turbios en el medio explica qué hace el navegador entre tus dos stops y cómo evitarlo.
Preguntas frecuentes
¿Cómo elijo una paleta de colores para un sitio web?
Empieza por un color para el que tengas una razón: un color de marca que ya existe, el color dominante de tu fotografía o un tono que tus competidores no hayan reclamado. Usa una regla de armonía para derivar de él un acento, y luego construye aparte cinco o seis neutros, porque los neutros van a cubrir la mayor parte de la pantalla. Comprueba el contraste de cada par de texto sobre fondo antes de comprometerte con nada de eso.
¿Qué es la regla 60-30-10 en diseño?
Es una guía aproximada de proporción: alrededor del 60% de una superficie en el color dominante, el 30% en uno secundario y el 10% en el acento. Los números exactos importan menos que la idea que hay detrás, que es que una paleta son proporciones y no un conjunto de muestras. Una fila de fichas de color del mismo tamaño esconde la proporción por completo, así que maqueta una pantalla real antes de decidir.
¿Cuántos colores debería usar un sitio web?
Dos tonos son suficientes para casi cualquier interfaz: uno dominante y un acento. De lo que de verdad necesitas más es de neutros — cinco o seis grises para fondos, bordes y texto — más cuatro o cinco variantes de cada tono para los estados hover, activo, focus y disabled. Añadir un tercer tono más tarde es mucho más fácil que quitar uno que ya está en todas partes.
¿Cómo elijo colores que combinen bien?
Fija un color y muévete un número determinado de grados por la rueda de tonos: 180 grados para un par complementario, 30 o 60 grados para vecinos análogos, 120 grados para una tríada. Mantén la misma saturación en todo el conjunto para que los colores se lean como una familia. Ten en cuenta que esta es la rueda RGB, donde el opuesto del azul es el amarillo y no el naranja que esperaría alguien que pinta.
¿Cómo sé si mi paleta de colores es accesible?
Prueba cada par de texto y fondo contra los umbrales de WCAG: 4.5:1 para el texto de cuerpo y 3:1 para el texto grande y los componentes de interfaz como bordes y anillos de focus. Después desatura una captura de pantalla y comprueba que los elementos importantes siguen destacando, ya que la deficiencia de visión de color rojo-verde afecta aproximadamente a un hombre de cada doce de ascendencia del norte de Europa. El color nunca debería ser lo único que carga con un significado.
Última actualización 19 de septiembre de 2026