Paletas de color para UI: lo que cada color puede y no puede hacer
Doce paletas de color para UI con códigos hex exactos, probadas rol por rol. Qué acentos funcionan como botón y como enlace, qué texto gris falla sobre una tarjeta tintada y por qué un acento pálido rellena pero nunca escribe.
Una paleta de color para UI no es un conjunto de colores bonitos. Es un conjunto de roles, y cada color puede hacer unos trabajos y otros no. Aquí tienes doce paletas, cada una probada en un rol que suele salir mal, con todos los códigos hex.
Los tres roles en una paleta de UI
La tinta escribe. Es el color de cada línea de texto, así que tiene que ser lo bastante oscura sobre la superficie, como Ink Navy #141238 sobre Indigo Mist #EEF0FB. También la usas para los enlaces cuando el acento no puede.
La superficie sostiene. Es la página o la tarjeta que hay detrás de todo lo demás. No tiene por qué ser blanca, y el tinte que elijas cambia cómo se comporta cualquier otro color.
El acento pulsa. Es el único color que dice "esto hace algo". Suena a un solo trabajo, y la siguiente sección demuestra que son dos.
Un acento tiene dos trabajos
En un botón, la etiqueta tiene que leerse sobre el acento, y el botón tiene que destacar de la página. En una frase, el mismo acento es un enlace, y un enlace es texto, así que tiene que leerse sobre esa misma página. Ambos trabajos usan el mismo par de colores, pero el segundo exige más.
Eso significa que un acento puede ser un buen botón y un mal enlace. Sky y Coral caen justo en ese hueco. Indigo y Berry pasan los dos.
Indigo
Indigo #4338CA, etiqueta blanca: pasa
Indigo como enlace sobre Indigo Mist #EEF0FB: pasa
Ink Navy #141238 como enlace: pasa
Indigo funciona como botón y como enlace. Un color, dos trabajos, nada que arreglar.
Berry
Berry #A61E4D, etiqueta blanca: pasa
Berry como enlace sobre Berry Milk #FBEAF0: pasa
Deep Berry #2A0A18 como enlace: pasa
Berry hace lo mismo: etiqueta blanca en el botón y un enlace legible sobre su superficie rosa pálido.
Sky
Sky #248AE4, etiqueta Harbor Ink: pasa
Sky como enlace sobre Sky Wash #EAF4FC: falla
Harbor Ink #021828 como enlace: pasa
Sky es un buen botón y un enlace difícil. Resérvalo para botones y pon los enlaces en Harbor Ink, subrayados.
Coral
Coral #E85446, etiqueta Burnt Clay: pasa
Coral como enlace sobre Coral Milk #FDEEEB: falla
Burnt Clay #290E0A como enlace: pasa
Coral tiene la misma división. Un botón que se ve y un enlace que desaparece en Coral Milk.
Reserva el acento para los botones
La solución sale barata. Reserva Sky y Coral para botones y pon los enlaces en la tinta, subrayados. Aquí tienes la misma frase de las dos maneras.
Contraseña
¿Olvidaste tu contraseña?
✕ Sky como enlace: difícil de leer
Contraseña
¿Olvidaste tu contraseña?
✓ Harbor Ink como enlace: fácil de leer
Texto gris sobre tarjetas tintadas
El texto secundario suele ser tu tinta a cerca del 65%. Sobre blanco se lee bien en las cuatro paletas, y sobre una superficie pálida apenas cambia. Sobre un tinte real puede quedar por debajo del límite.
Así que pruébalo sobre la superficie en la que está, no sobre blanco. Con un tinte fuerte, sube el gris al 70% y se recupera.
Red Panda
Sombre Night
Red Panda
#636772 sobre Sugar Milk #FAF7F0: pasa
La misma mezcla al 65% #656A77 sobre blanco: pasa
Sugar Milk es casi blanco, así que el gris apenas cambia. Pasa en la tarjeta y sobre blanco.
Warm Purple
English Walnut
Warm Purple
#606146 sobre Oh Pistachio #BCDBA4: falla
Al 70%, #59573F: pasa
Oh Pistachio es un tinte de verdad. El mismo gris que pasa sobre blanco queda aquí por debajo del límite, y el 70% lo devuelve.
Mango
Jedi Night
Mango
#5E6C68 sobre Heart of Ice #F2F5FA: pasa
La misma mezcla al 65% #626F6A sobre blanco: pasa
Heart of Ice es un tinte frío y pálido, así que el gris aguanta.
Viridian
Midnight Dreams
Viridian
#535D71 sobre Digital Lavender #D3CAEE: falla
Al 70%, #495467: pasa
Digital Lavender es un tinte lo bastante fuerte como para suspender el mismo gris. Súbelo al 70% y la tarjeta vuelve a leerse.
Un acento pálido rellena, nunca escribe
Un acento pálido es un relleno precioso y un color de texto inútil. En su propia página, ninguno de estos cuatro se puede leer como texto. Convierte el mismo color en relleno y funciona, siempre que elijas las palabras adecuadas.
Purple Estate
Blue Horizon #72AFCC como texto sobre Sunwashed Paper #F5EDCE: falla
Purple Estate #58287F sobre Blue Horizon: solo texto grande
Purple Estate sobre Sunwashed Paper: pasa
El azul pálido falla como texto sobre el papel. Como relleno admite Purple Estate, que sirve para una fecha grande y no para letra pequeña.
Blue Horizon
Blue Horizon #2FA4D7 como texto sobre Desert Cream #F5E9D8: falla
Cocoa Noir #3E2C23 sobre Blue Horizon: pasa
Cocoa Noir sobre Desert Cream: pasa
El azul más brillante también falla como texto sobre Desert Cream. Como relleno lleva Cocoa Noir sin esfuerzo.
Herb Garden
Herb Garden #BCD9A2 como texto sobre Sun Linen #FEFFD3: falla
Red Monarch #A82323 sobre Herb Garden: pasa
Red Monarch sobre Sun Linen: pasa
El más tenue de los cuatro sobre su página. Pon Red Monarch sobre el verde y el número se lee con claridad.
Nordic Sky
Nordic Sky #7288AE como texto sobre Manor Cream #EAE0CF: falla
Blanco #FFFFFF sobre Nordic Sky: solo texto grande
Velvet Indigo #4B5694 sobre Manor Cream: pasa
Nordic Sky solo admite blanco, y solo para texto grande: números sí, letra pequeña no. El texto de la página va en Velvet Indigo.
Así que comprueba el relleno y las palabras que lleva encima, no solo la página. Si las palabras sobre el relleno solo alcanzan el contraste de texto grande, mantenlas grandes.
Las doce paletas en una tabla
| Paleta | Colores | El rol que prueba |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Botón y enlace pasan |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Botón y enlace pasan |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | El botón pasa, el enlace falla |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | El botón pasa, el enlace falla |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | El gris pasa en la tarjeta |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | El gris falla en la tarjeta |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | El gris pasa en la tarjeta |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | El gris falla en la tarjeta |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Relleno azul pálido, solo texto grande |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | El relleno pasa con Cocoa Noir |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | El relleno pasa con Red Monarch |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | El relleno admite blanco, solo texto grande |
Los números, para quien defiende la elección
Cada combinación se midió con la fórmula de contraste de WCAG 2 contra la superficie en la que se apoya. Esta es la única tabla del paper con ratios.
| Paleta | Prueba | Ratio | Resultado |
|---|---|---|---|
| Indigo | Etiqueta blanca / botón sobre la página / enlace sobre la página | 7.90:1 / 6.96:1 / 6.96:1 | Pasa todo |
| Berry | Etiqueta blanca / botón sobre la página / enlace sobre la página | 7.21:1 / 6.22:1 / 6.22:1 | Pasa todo |
| Sky | Etiqueta en tinta / botón sobre la página / enlace sobre la página | 5.01:1 / 3.23:1 / 3.23:1 | Pasa, pasa, falla |
| Coral | Etiqueta en tinta / botón sobre la página / enlace sobre la página | 4.98:1 / 3.21:1 / 3.21:1 | Pasa, pasa, falla |
| Red Panda | Gris al 65% sobre la tarjeta / sobre blanco | 5.2:1 / 5.4:1 | Pasa ambos |
| Warm Purple | Gris al 65% sobre la tarjeta / sobre blanco / al 70% | 4.1:1 / 5.0:1 / 4.8:1 | Falla, pasa, pasa |
| Mango | Gris al 65% sobre la tarjeta / sobre blanco | 5.0:1 / 5.2:1 | Pasa ambos |
| Viridian | Gris al 65% sobre la tarjeta / sobre blanco / al 70% | 4.2:1 / 5.1:1 / 4.8:1 | Falla, pasa, pasa |
| Purple Estate | Acento pálido como texto / mejor texto sobre él / tinta sobre la página | 2.05:1 / 4.31:1 / 8.83:1 | Falla, texto grande, pasa |
| Blue Horizon | Acento pálido como texto / mejor texto sobre él / tinta sobre la página | 2.36:1 / 4.66:1 / 11.03:1 | Falla, pasa, pasa |
| Herb Garden | Acento pálido como texto / mejor texto sobre él / tinta sobre la página | 1.51:1 / 4.64:1 / 6.98:1 | Falla, pasa, pasa |
| Nordic Sky | Acento pálido como texto / blanco sobre él / tinta sobre la página | 2.75:1 / 3.59:1 / 5.25:1 | Falla, texto grande, pasa |
Cómo construir tu propia paleta de UI
- Empieza por la tinta y la superficie. Elige una tinta oscura y una superficie, tintada o blanca, y comprueba la tinta sobre la superficie. Harbor Ink #021828 sobre Sky Wash #EAF4FC es el caso fácil.
- Elige el acento pensando en la etiqueta. Decide si va texto blanco u oscuro encima, y comprueba la etiqueta sobre el acento.
- Prueba el acento como enlace. Ponlo sobre tu superficie como texto. Si falla, resérvalo para botones y pon los enlaces en la tinta.
- Prueba el texto secundario en cada superficie. Mezcla la tinta al 65% sobre el color de cada tarjeta. Sube al 70% donde se quede corto.
- Reserva los colores pálidos para rellenos. Elige las palabras que irán encima antes de comprometerte. Nuestros papers sobre errores de color en UI y contraste de color accesible profundizan en los umbrales.
Consigue los archivos de cada set
Cada set es un set de color gratuito en Forge, con códigos para copiar al toque, archivos de muestras para Figma y Adobe (ASE), variables CSS y design tokens.
Set de color gratis
Un acento tiene dos trabajos: Indigo, Berry, Sky, Coral
Todos los hex, más muestras ASE, variables CSS y design tokens.
Set de color gratis
Texto gris sobre tarjetas tintadas: Red Panda, Warm Purple, Mango, Viridian
Todos los hex, más muestras ASE, variables CSS y design tokens.
Set de color gratis
Un acento pálido rellena, nunca escribe: Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Todos los hex, más muestras ASE, variables CSS y design tokens.
FAQ
¿Qué colores debe tener una paleta de color para UI?
Al menos tres roles: una tinta para el texto, un acento para botones y enlaces, y una superficie para la página. Indigo #4338CA con Ink Navy #141238 e Indigo Mist #EEF0FB es un ejemplo completo.
¿De qué color deben ser los enlaces en una UI?
Del acento solo si pasa como texto sobre tu superficie. Indigo lo hace. Sky #248AE4 no, así que sus enlaces van en Harbor Ink #021828, subrayados.
¿De qué color debe ser el texto secundario?
De tu tinta a cerca del 65%, comprobado sobre la superficie en la que está. Con un tinte fuerte como Oh Pistachio #BCDBA4 puede fallar, y subirlo al 70% lo arregla.
¿Por qué cuesta leer el texto gris sobre una tarjeta de color?
Una tarjeta tintada es más oscura que el blanco, así que la distancia entre el gris y la tarjeta se reduce. El blanco esconde el problema, por eso se prueba sobre la superficie real.
¿Puedo usar un pastel como color de acento?
Como relleno, sí. Como texto, no. Herb Garden #BCD9A2 falla como texto sobre Sun Linen #FEFFD3 y funciona como relleno con Red Monarch #A82323 encima.
¿El color de un botón tiene que funcionar como color de enlace?
Tiene que hacerlo si lo usas para ambos. Un botón necesita destacar de la página y llevar su etiqueta. Un enlace es texto, así que exige más sobre esa misma página.
Fuentes
- Nombres de color y códigos hex de los sets de color de UX Brainy en Forge, vol 04, 08 y 12. El contraste se calculó con la fórmula de WCAG 2 contra la superficie en la que se apoya cada color.
- Los umbrales de texto y formas siguen W3C WCAG 2.2: Contrast (Minimum) y Non-text Contrast.
- El gris de cada tile es la tinta de la paleta mezclada con la superficie al 65%, o al 70% donde se indica, así que ese hex deriva de la paleta.
- Publicado por primera vez como tres carruseles en UX Brainy: Un color de acento tiene dos trabajos, El mismo gris puede pasar sobre blanco y fallar en tu tarjeta tintada y Tu acento pálido puede rellenar una forma.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
