Hay proyectos en los que el cliente llega con un solo color: el de su logo, el de su producto o uno que le gusta. A partir de ahí hay que construir todo lo demás: acentos, fondos, botones, gráficos. Y elegir esos colores «a ojo» suele acabar en muchas pruebas.
Un método que ayuda mucho es usar la proporción áurea para encontrar el color de acento y, a partir del mismo color base, el color de apoyo. En este artículo te explico de dónde sale el número mágico (137,5°), cómo aplicarlo paso a paso y cómo ajustar el resultado para que funcione de verdad.
Qué es la proporción áurea y qué tiene que ver con el color
La proporción áurea es un número, φ (phi), que vale aproximadamente 1,618. Aparece en geometría, en arquitectura y en la naturaleza, y se ha usado durante siglos en composición y diseño.
Si aplicas esa proporción a un círculo completo (360°), lo divides en dos arcos: uno de 222,5° y otro de 137,5°. Ese ángulo pequeño se llama ángulo áureo. Es, por ejemplo, el ángulo con el que muchas plantas colocan sus hojas o sus semillas para no taparse entre sí: el patrón que ves en el centro de un girasol.
La rueda de color también es un círculo de 360°. Así que si giras un color 137,5° obtienes un color que está lo bastante lejos para contrastar, pero sin ser el complementario exacto (que estaría a 180°). El resultado suele ser un acento con más tensión y menos previsible que el complementario de toda la vida.
La fórmula
- Proporción áurea: 1,618
- 360 ÷ 1,618 = 222,5
- 360 − 222,5 = 137,5° → el giro de tono que aplicamos al color base
Paso a paso: de un color a una paleta completa
Para hacerlo bien conviene trabajar en HSL (tono, saturación y luminosidad), que es como Figma, Photoshop y casi cualquier selector de color permiten editar un color. El tono (H) es justamente el ángulo en la rueda de color.
1. Elige el color base
Puede ser el color de tu marca, el de tu producto o el que te pida el proyecto. En el ejemplo uso un azul: #00ACE6, que en HSL es aproximadamente tono 195°, saturación 100 % y luminosidad 45 %.
2. Gira el tono 137,5°: tu color de acento
Mantén la saturación y la luminosidad, y resta (o suma) 137,5° al tono. En el ejemplo: 195° − 137,5° = 57,5°, que da un amarillo intenso, #E6DD00. Ese es tu color de acento: el que usarás para llamar la atención en botones, detalles o titulares.
Si giras en el otro sentido (195° + 137,5° = 332,5°) obtienes un magenta, #E60069. Las dos opciones son válidas: prueba ambas y quédate con la que encaje mejor con el tono de la marca.
3. Desatura la base un 60 %: tu color de apoyo
Ahora vuelve al color base y baja su saturación un 60 % (en el ejemplo, de 100 % a 40 %). Mismo tono, menos intensidad: #458AA1. Este será el color de apoyo para fondos, superficies y bloques grandes, donde un color muy saturado cansaría.
4. El resultado
Tres colores que conviven bien porque salen de la misma lógica: el principal, el acento y el apoyo. Si necesitas un cuarto color, repite el giro de 137,5° sobre el acento y tendrás otra opción coherente con el resto.
Cómo repartir la paleta: la regla 60-30-10
Una forma sencilla de aplicar estos tres colores es la regla 60-30-10, muy usada en interiorismo y en diseño:
- 60 % para el color de apoyo (fondos y superficies).
- 30 % para el color principal (bloques, ilustraciones, elementos de marca).
- 10 % para el acento (botones, enlaces, detalles que deben destacar).
Ajusta a ojo: la fórmula es el punto de partida
La matemática te da una buena base, pero no la última palabra. Hay tres ajustes que casi siempre hago después:
- Luminosidad. El ojo no percibe igual de claros todos los tonos con la misma luminosidad HSL: un amarillo parece mucho más claro que un azul. Retoca la luminosidad del acento hasta que el conjunto se vea equilibrado.
- Contraste para texto. Comprueba el contraste antes de usar un color con texto. En el ejemplo, el amarillo #E6DD00 sobre blanco tiene un contraste de 1,4:1, muy por debajo del 4,5:1 que recomienda la WCAG para texto normal; sobre negro supera el 13:1. Úsalo sobre fondos oscuros o como color de fondo con texto negro.
- Contexto de marca. Un acento puede ser correcto matemáticamente y no encajar con lo que transmite la marca. Si es así, prueba el giro en el otro sentido o mueve el tono unos pocos grados.
Cómo hacerlo en Figma o Photoshop
- Abre el selector de color y cambia el modo a HSL (en Figma) o HSB (en Photoshop).
- Anota el tono del color base y réstale 137,5. Si el resultado es negativo, súmale 360.
- Crea el acento con ese tono y la misma saturación y luminosidad.
- Duplica el color base y baja su saturación un 60 %.
- Guarda los tres como estilos o variables para usarlos en todo el proyecto.
Un detalle: HSL y HSB no son lo mismo y dan resultados algo distintos. No es un problema; lo importante es hacer todos los cálculos en el mismo modelo.
Si te interesa el color como recurso visual, en el blog también tienes cómo crear el efecto dithering online y una selección de combinaciones tipográficas gratuitas para completar la identidad.
Preguntas frecuentes
¿Qué es el ángulo áureo?
Es el ángulo que resulta de dividir un círculo según la proporción áurea: aproximadamente 137,5°. En color, se usa para girar el tono de un color base y encontrar un acento armónico.
¿Por qué 137,5° y no 180°?
A 180° está el color complementario, que contrasta al máximo pero puede resultar muy previsible o estridente. Con 137,5° obtienes un acento con contraste, pero con una relación menos obvia con la base.
¿Sirve con cualquier color?
Sí, aunque con colores muy apagados o muy oscuros el acento también saldrá apagado. En esos casos sube la saturación o la luminosidad del acento después del giro.
¿Cuántos colores debería tener una paleta de marca?
Con tres colores bien elegidos (principal, acento y apoyo) más un neutro claro y uno oscuro se cubre la mayoría de aplicaciones.
¿Quieres una identidad de color pensada para tu marca?
Una fórmula te da un punto de partida rápido, pero una paleta de marca tiene que funcionar en web, redes, packaging y campañas. Si necesitas construirla o revisarla, puedo ayudarte como director de arte freelance.