La versión corta
- Una paleta de colores vivos usa colores muy saturados como rosa intenso, mandarina, limón, azul eléctrico y verde vivo.
- Los amarillos, verdes, cianes, verdes azulados y naranjas vivos son colores claros, así que necesitan texto oscuro y no blanco.
- Los rojos y rosas vivos miden alrededor de 3,5:1 frente al blanco, lo que no cumple WCAG AA para texto corrido, así que compón el texto pequeño sobre ellos en negro y reserva el blanco para titulares grandes.
- Dos colores vivos de luminosidad parecida puestos borde con borde parecen vibrar, así que sepáralos con un neutro o con una diferencia clara de luminosidad.
- Toda paleta de colores vivos necesita un ancla calmada, normalmente un casi negro o un blanco roto cálido, que lleve el texto y dé espacio al color.
En esta página
Una paleta de colores vivos sigue siendo legible cuando tratas cada color intenso por su luminosidad y no por su estridencia. El limón #FFD60A, el verde vivo #34C759, el aguamarina #00C2FF y la mandarina #FF7A00 son lo bastante claros como para necesitar texto casi negro. El rosa intenso #FF2D87 y el rojo amapola #FF3B30 están en un punto medio incómodo: el texto negro cumple, pero el blanco solo funciona en titulares grandes. Añade un color ancla calmado, da a cada color vivo su propio espacio y una paleta que parece una tienda de caramelos pasa a ser una sobre la que de verdad puedes componer palabras.
Qué colores vivos necesitan texto negro
La saturación hace que un color se sienta fuerte, pero la legibilidad depende de la luminosidad. Muchos colores vivos son mucho más claros de lo que parecen, por eso el texto blanco sobre verde vivo o amarillo resulta estridente y aun así difícil de leer. La tabla de abajo mide once colores vivos frente al blanco y frente al casi negro #111111.
#FFD60ACon texto blanco
Con texto negro
Hex
#00C2FFCon texto blanco
Con texto negro
Hex
#00D1B2Con texto blanco
Con texto negro
Hex
#34C759Con texto blanco
Con texto negro
Hex
#FF7A00Con texto blanco
Con texto negro
Hex
#FF3B30Con texto blanco
Con texto negro
Hex
#FF2D87Con texto blanco
Con texto negro
Hex
#E0115FCon texto blanco
Con texto negro
Hex
#8B3DFFCon texto blanco
Con texto negro
#1D4ED8Con texto blanco
Con texto negro
Hex
#C81D11Con texto blanco
Con texto negro
Una regla práctica útil: el lado claro del círculo, del naranja al cian pasando por amarillo y verde, lleva negro, y también los rosas y rojos más calientes; el lado profundo, del azul al carmesí pasando por el violeta, lleva blanco. Si diseñas para un público amplio, lee también paletas aptas para daltonismo, porque los colores vivos que solo difieren en el matiz pueden verse iguales para algunos lectores.
Seis paletas de colores vivos con códigos hex
- Fiesta en la piscina: aguamarina
#00C2FF, verde vivo#34C759, limón#FFD60A, blanco#FFFFFF, azul marino profundo#0B1F3Apara el texto. - Colegio: cobalto
#1D4ED8, rojo señal#C81D11, limón#FFD60A, papel#FAF7F0, tinta#111111. - Impresión riso: rosa fluorescente
#FF48B0, azul#0078BF, amarillo#FFE800, papel prensa#F2EFE6, negro#1A1A1A. - Tropical: frambuesa
#E0115F, mango#FFA51F, palmera#00A86B, arena#F6EBD9, cacao#2B1B14.
Cómo mantener legible una paleta de colores vivos
- 1
Elige primero un ancla
Elige un casi negro o un blanco roto cálido y deja que cubra la mayor parte de la superficie. El blanco cálido
#FFF8ECcon tinta#111111mide 17,89:1, así que toda palabra compuesta en tinta se lee. - 2
Compón el texto en el ancla, no en un color vivo
El texto corrido pertenece al color ancla. Los colores vivos pueden llevar un titular o una sola cifra grande, donde se aplica el umbral de 3:1 del texto grande.
- 3
Separa los colores vivos de igual luminosidad
El rosa intenso junto a un azul eléctrico como
#2F6BFFmide 1,28:1, y el borde parece centellear. Pon blanco, negro o espacio entre ellos, o combina un color vivo claro con uno profundo. - 4
Limita cuántos colores vivos tocan las palabras
Tres colores vivos en una paleta son más que suficientes, y solo uno debería estar detrás de cada bloque de texto. La regla 60 30 10 ayuda aquí: ancla 60, color vivo principal 30, acentos 10.
- 5
Compruébalo en un móvil al aire libre
Los colores vivos se lavan al sol y en pantallas con poco brillo. Si las palabras siguen leyéndose en un móvil atenuado, la paleta funciona.
Un fondo estridente con las palabras directamente encima: el titular sobrevive, la línea de detalle desaparece.
Los mismos colores, con el fondo asentándose detrás del texto. Sigue siendo vivo y se lee cada línea.
Esa versión de la derecha es lo que hace Gradiently por defecto. Un Mark sabe dónde están tus palabras, aparta de ellas su color más ruidoso y elige tipografía clara u oscura línea a línea, así que puedes mantener una paleta estridente sin caja ni sombra detrás del texto.
Degradados vivos sin centro gris
Mezcla dos colores vivos de lados opuestos del círculo en sRGB normal y el punto medio se vuelve gris o marrón. O eliges vecinos, o le pides al navegador que interpole en oklch, que mantiene saturado el centro. Interpolación de degradados explica la diferencia.
Para más combinaciones, mira degradados vibrantes y degradados neón. Para la guía completa de contraste, lee contraste de color.
Una advertencia si la paleta se va a imprimir: los colores de pantalla más eléctricos, sobre todo el aguamarina, el rosa intenso y el verde vivo, quedan fuera de lo que pueden reproducir las tintas CMYK estándar, y vuelven de la imprenta claramente más apagados. Pide una prueba o planea tintas planas o fluorescentes. RGB frente a CMYK explica qué esperar.
Preguntas frecuentes
¿Qué es una paleta de colores vivos?
Un conjunto de colores muy saturados como rosa intenso, mandarina, limón, aguamarina y verde vivo, normalmente equilibrado con un ancla neutra para el texto.
¿Debo usar texto blanco o negro sobre colores vivos?
Usa negro sobre los colores vivos claros como amarillo, naranja, verde, aguamarina y verde azulado, y también sobre rosa intenso y rojo amapola. Usa blanco sobre los colores vivos profundos como cobalto, violeta, frambuesa y rojo señal.
¿Por qué algunos colores vivos parecen vibrar?
Dos colores saturados de luminosidad parecida uno junto al otro, como el rosa intenso y el azul eléctrico, hacen centellear el borde entre ellos. Sepáralos con un neutro o cambia la luminosidad de uno.
¿Cuántos colores vivos debería tener una paleta?
Dos o tres colores vivos más uno o dos neutros son más que suficientes. Solo uno debería estar detrás de cada bloque de texto.
¿Son malos los colores vivos para la accesibilidad?
No en sí mismos. Los problemas vienen del texto sobre colores vivos con poco contraste, así que comprueba cada pareja de texto con WCAG y mantén el texto corrido en un ancla oscura o clara.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil