Paletas de color de acento: 16 acentos y la etiqueta que necesita cada uno
Dieciséis paletas de color de acento con códigos hex exactos, cada una probada en lo único que un acento tiene que hacer: llevar una etiqueta legible en un botón. Mira qué acentos aceptan blanco, cuáles aceptan oscuro y cuáles no aceptan ninguno.
Un color de acento es el único color de tu interfaz que significa "toca aquí". Solo funciona si las palabras que lleva encima se pueden leer, así que la etiqueta decide qué acento es bueno. Aquí van dieciséis acentos en cuatro pruebas, con cada código hex y la etiqueta que acepta cada uno.
Qué tiene que superar un acento
Un acento se juzga por lo que pasa cuando le pones una palabra encima. La etiqueta tiene que ser legible, y el botón tiene que destacar de la página que tiene detrás.
Eso da cuatro pruebas. ¿Acepta una etiqueta blanca o una oscura, o cae en el medio donde ninguna funciona? ¿Puede llevar texto pequeño de tag? ¿Es demasiado pálido para ser botón, como Butterscotch Gold #F7C873?
Cada paleta de abajo es una tinta, un acento y una superficie, y el último tile muestra la prueba.
Qué etiqueta acepta el acento
Teal, Cobalt y Rose son lo bastante oscuros como para que una etiqueta blanca se lea desde el otro lado de la habitación. Amber #C88A16 no.
Teal
Deep Sea
Teal
Chalk
Blanco sobre Teal
Un teal profundo que lleva una etiqueta blanca con margen de sobra.
Cobalt
Navy Ink
Cobalt
Mist
Blanco sobre Cobalt
El más fuerte de los cuatro. Blanco sobre Cobalt se lee desde el otro lado de la habitación.
Rose
Plum Ink
Rose
Shell
Blanco sobre Rose
Rose es el más claro de los tres acentos con etiqueta blanca, así que es el que tiene menos margen. No lo aclares más.
Amber
Bark
Amber
Oat
Bark sobre Amber
Amber es el honesto. El blanco sobre él falla, y la solución no es un ámbar más oscuro: pon la etiqueta en Bark y deja el color exactamente como está.
Ese es todo el trabajo de un acento: tiene que sobrevivir a las palabras que le pones encima. Amber demuestra que la solución rara vez es otro color. Cambia la etiqueta, conserva la marca.
La zona muerta de los tonos medios
Algunos acentos están en mitad de la escala de luminosidad: demasiado claros para texto blanco, demasiado oscuros para texto oscuro. Dos de estos cuatro escapan en direcciones opuestas, y dos se quedan atascados.
French Winery
French Winery
Blanco sobre French Winery: pasa
Midnight Express #1D2433 sobre French Winery: falla
Magnolia Petal
Lo bastante oscuro para que el texto blanco funcione. French Winery sale de la zona muerta oscureciéndose.
Wild Forest
Wild Forest
Blanco sobre Wild Forest: falla
Nightwalker #2B1A35 sobre Wild Forest: falla
Vintage Porcelain
Un verde fresco que cae justo en el medio. El blanco falla y el oscuro también. Un tono más oscuro y el blanco pasa, así que ajusta el verde antes de diseñar un solo botón.
Glowing Lantern
Glowing Lantern
Blanco sobre Glowing Lantern: falla
Aztec #153023 sobre Glowing Lantern: pasa
Silent Snowfall
Lo bastante claro para que el texto oscuro funcione. Glowing Lantern sale de la zona muerta por el otro lado, aclarándose, así que su etiqueta es Aztec, nunca blanca.
Pink Orchid
Pink Orchid
Blanco sobre Pink Orchid: falla
Royal Neptune #0F2E30 sobre Pink Orchid: falla
Snowflake
Un rosa de tono medio con el mismo problema que Wild Forest. Un tono más oscuro y el blanco pasa.
El texto grande tiene un listón más bajo que la letra pequeña, así que un titular grande puede verse bien sobre estos colores mientras la etiqueta del botón falla. Comprueba el texto más pequeño que vas a poner sobre el acento. Si el acento de tu marca cae en el medio, ajústalo antes de construir el set de botones.
Un botón no es un badge
Un badge suele ser el acento al 15% como fondo, con el acento completo como texto. Ese tinte aclara el fondo, así que el texto encima pierde contraste. Un acento puede llevar una etiqueta de botón blanca y aun así fallar dentro de su propio badge. El tercer tile es el acento al 15% sobre la superficie.
Peacock Pride
Peacock Pride
Etiqueta de botón blanca: pasa
Peacock Pride sobre tinte #D5E1D2: pasa
Wood Bark #2A2320 sobre tinte: pasa
Un verde azulado profundo que supera ambos trabajos sobre Cosmic Latte #FBF7E6.
Furnace
Furnace
Etiqueta de botón blanca: pasa
Furnace sobre tinte #EAD9D1: falla
Elite Teal #13302A sobre tinte: pasa
Un botón rojo anaranjado potente que se vuelve débil como tag. Sobre White Glove #EEF4F0, pon el texto del tag en la tinta y el badge se lee bien.
Purple Heart
Purple Heart
Etiqueta de botón blanca: pasa
Purple Heart sobre tinte #E6D3DF: pasa
Black Velvet #1B2838 sobre tinte: pasa
Lo bastante oscuro como para que el tinte de detrás, sobre Vanilla Blush #FDF1EC, no importe.
French Blue
French Blue
Etiqueta de botón blanca: pasa
French Blue sobre tinte #D9E3E3: falla
Nightly Voyager #2A1630 sobre tinte: pasa
La misma historia que Furnace: un botón que funciona y un badge que no. Sobre Powdered #FFF6E8, la tinta rescata el texto del badge.
Si tu acento es un tono medio, pon el texto de badges y tags en tu tinta. Los tags de Furnace y los badges de French Blue se vuelven fáciles de leer en cuanto el texto pasa a la tinta.
El brillante no es el botón
Un botón tiene que destacar con claridad de la página donde está. Un acento pálido y brillante sobre una página crema no lo hace, aunque sea el color más bonito de la paleta.
Así que intercambia los trabajos. El color oscuro pasa a ser el botón, y el brillante pasa a ser el tag, el badge y el estado seleccionado. Dos de estas paletas lo hacen, y las otras dos tienen un acento lo bastante oscuro para tocarlo.
Butterscotch
Storm Graphite #434343 botón, Butter Canvas #FAEBCD etiqueta: pasa
Butterscotch Gold #F7C873 tag: pasa
Butterscotch Gold sobre la página: apenas se ve
Butterscotch Gold se ve precioso y desaparece como botón sobre Butter Canvas. Intercambia los trabajos: Storm Graphite se toca, el dorado pasa a ser el tag.
Ocean Breeze
Midnight Navy #0C2C55 botón, Vanilla Linen #EDEDCE etiqueta: pasa
Ocean Breeze #629FAD tag: pasa
Ocean Breeze sobre la página: apenas se ve
Un azul verdoso suave sobre un lino pálido. Misma solución: Midnight Navy es el botón, Ocean Breeze es el tag y el estado seleccionado.
Silent Grove
Silent Grove #215E61 botón: pasa
Enlace sobre Morning Paper #F5FBE6: pasa
Blue Monolith #233D4D
Este lo hace todo. Un teal oscuro es a la vez el botón y el enlace sobre Morning Paper, con una etiqueta blanca que se lee fácil.
Wild Berry
Wild Berry #CF4173 botón: pasa
Enlace Wild Berry sobre Peach Cashmere #F6D8BD: falla
Enlace Deep Berry Plum #5D3140: pasa
Wild Berry solo llega justo como botón con etiqueta blanca. Como texto sobre Peach Cashmere se queda corto, así que sus enlaces van en Deep Berry Plum.
Un enlace son palabras, así que tiene que superar el listón del texto, no solo el del botón. Cuando el acento apenas pasa como botón, pon los enlaces en la tinta.
Los dieciséis acentos en una tabla
| Paleta | Acento | Etiqueta que funciona | Ojo con |
|---|---|---|---|
| Teal | Teal #0E7C6B | Blanco | Ninguno de los cuatro trabajos |
| Cobalt | Cobalt #2F4BD6 | Blanco | Ninguno de los cuatro trabajos |
| Rose | Rose #C2445F | Blanco | El menor margen de los tres, no lo aclares |
| Amber | Amber #C88A16 | Bark #2C2415 | El blanco falla |
| French Winery | French Winery #9A0A2C | Blanco | El texto oscuro falla |
| Wild Forest | Wild Forest #009041 | Ninguna, hasta bajar un tono | Fallan ambas etiquetas |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | El blanco falla |
| Pink Orchid | Pink Orchid #C157AD | Ninguna, hasta bajar un tono | Fallan ambas etiquetas |
| Peacock Pride | Peacock Pride #006262 | Blanco | Ninguno de los cuatro trabajos |
| Furnace | Furnace #D23D20 | Blanco | Texto de badge, usa Elite Teal #13302A |
| Purple Heart | Purple Heart #652A97 | Blanco | Ninguno de los cuatro trabajos |
| French Blue | French Blue #0075C9 | Blanco | Texto de badge, usa Nightly Voyager #2A1630 |
| Butterscotch | Butterscotch Gold #F7C873 | Texto oscuro, como tag | Demasiado pálido para ser el botón |
| Ocean Breeze | Ocean Breeze #629FAD | Texto oscuro, como tag | Demasiado pálido para ser el botón |
| Silent Grove | Silent Grove #215E61 | Blanco | Ninguno de los cuatro trabajos |
| Wild Berry | Wild Berry #CF4173 | Blanco | Enlaces, usa Deep Berry Plum #5D3140 |
Los números, para quien defiende la elección
Cada par de arriba se midió con la fórmula de contraste de WCAG 2. Esta es la única tabla del paper con ratios.
| Paleta | Prueba | Ratio | Resultado |
|---|---|---|---|
| Teal | Etiqueta blanca sobre el acento | 5.10:1 | Pasa |
| Cobalt | Etiqueta blanca sobre el acento | 6.78:1 | Pasa |
| Rose | Etiqueta blanca sobre el acento | 4.90:1 | Pasa |
| Amber | Etiqueta blanca sobre el acento | 2.96:1 | Falla |
| French Winery | Etiqueta blanca | 8.5:1 | Pasa |
| French Winery | Etiqueta oscura | 1.8:1 | Falla |
| Wild Forest | Etiqueta blanca | 4.1:1 | Falla |
| Wild Forest | Etiqueta oscura | 3.8:1 | Falla |
| Wild Forest | Etiqueta blanca, un tono más oscuro | 4.6:1 | Pasa |
| Glowing Lantern | Etiqueta oscura | 8.4:1 | Pasa |
| Glowing Lantern | Etiqueta blanca | 1.6:1 | Falla |
| Pink Orchid | Etiqueta blanca | 4.0:1 | Falla |
| Pink Orchid | Etiqueta oscura | 3.6:1 | Falla |
| Pink Orchid | Etiqueta blanca, un tono más oscuro | 4.6:1 | Pasa |
| Peacock Pride | Etiqueta de botón / texto de badge | 7.1:1 / 5.3:1 | Pasa ambos |
| Furnace | Etiqueta de botón / texto de badge / texto de badge en tinta | 4.7:1 / 3.4:1 / 10.3:1 | Pasa, falla, pasa |
| Purple Heart | Etiqueta de botón / texto de badge | 9.0:1 / 6.3:1 | Pasa ambos |
| French Blue | Etiqueta de botón / texto de badge / texto de badge en tinta | 4.7:1 / 3.6:1 / 12.7:1 | Pasa, falla, pasa |
| Butterscotch | Dorado sobre la página / texto oscuro sobre el tag dorado | 1.32:1 / 6.34:1 | Falla, pasa |
| Ocean Breeze | Acento sobre la página / texto oscuro sobre el tag del acento | 2.49:1 / 4.7:1 | Falla, pasa |
| Silent Grove | Etiqueta blanca sobre el acento | 7.4:1 | Pasa |
| Wild Berry | Etiqueta blanca sobre el acento | 4.51:1 | Pasa por poco |
Cómo probar tu propio acento
- Prueba primero el blanco. Si el blanco pasa sobre el acento, como en Cobalt #2F4BD6, tu etiqueta está resuelta.
- Prueba después tu tinta más oscura. Si el blanco falla y la tinta pasa, pon todas las etiquetas en la tinta, como en Amber y Glowing Lantern.
- Si fallan ambos, mueve el acento. Un tono más oscuro o más claro te saca del medio.
- Prueba el tag por separado. Haz el tinte al 15% y comprueba el acento como texto sobre él. Si falla, pon los tags en la tinta.
- Comprueba el botón contra la página. Un acento pálido es un tag, no un botón. Nuestros papers sobre contraste de color accesible y errores de color en UI cubren los umbrales.
Consigue los archivos de cada set
Cada set es un set de color gratuito en Forge, con códigos para copiar con un toque, archivos de swatches para Figma y Adobe (ASE), variables CSS y design tokens.
Set de color gratuito
Tinta, superficie, una cosa que tocar: Teal, Cobalt, Rose, Amber
Todos los hex, más swatches ASE, variables CSS y design tokens.
Set de color gratuito
La zona muerta: French Winery, Wild Forest, Glowing Lantern, Pink Orchid
Todos los hex, más swatches ASE, variables CSS y design tokens.
Set de color gratuito
Un botón no es un badge: Peacock Pride, Furnace, Purple Heart, French Blue
Todos los hex, más swatches ASE, variables CSS y design tokens.
Set de color gratuito
El brillante no es el botón: Butterscotch, Ocean Breeze, Silent Grove, Wild Berry
Todos los hex, más swatches ASE, variables CSS y design tokens.
FAQ
¿Qué color de texto va en un botón de color de acento?
Blanco si el acento es lo bastante oscuro, tinta oscura si es claro. Teal #0E7C6B acepta blanco. Amber #C88A16 acepta Bark #2C2415. Si ninguno funciona, el acento está en el medio y hay que moverlo un tono.
¿Por qué falla el texto blanco en algunos botones de color?
Porque el botón es demasiado claro. Amber, Glowing Lantern #FFBB40 y Butterscotch Gold #F7C873 son brillantes, así que el texto blanco sobre ellos se ve tenue. Los tonos medios como Wild Forest #009041 fallan tanto con texto blanco como con oscuro.
¿Cómo elijo un color de acento para una paleta de UI?
Elige primero la etiqueta. Decide si el acento llevará texto blanco u oscuro y luego escoge un color claramente a un lado del medio. Compruébalo como botón, como texto de badge y contra la página.
¿Por qué mi color de acento se ve bien como botón pero mal como badge?
Un badge pone el acento como texto sobre un tinte claro de sí mismo, lo que baja el contraste. Furnace #D23D20 y French Blue #0075C9 llevan una etiqueta de botón blanca sin problema y fallan como texto de badge. Pon el texto del badge en tu tinta.
¿Puede un color de acento claro ser un botón?
Rara vez. Tiene que destacar de la página que tiene detrás, y un acento pálido sobre una página crema apenas lo logra. Haz que un color oscuro sea el botón y usa el acento pálido como tag o estado seleccionado.
Fuentes
- Nombres de color y códigos hex de los sets de color de UX Brainy en Forge, vol 02, 06, 07 y 11. El contraste se calculó con la fórmula de WCAG 2 contra la superficie sobre la que está cada color.
- Los umbrales de contraste para texto y para formas siguen W3C WCAG 2.2: Contrast (Minimum) y Non-text Contrast.
- El hex del tinte en cada tile de badge es el acento al 15% sobre la superficie, derivado de la paleta.
- Publicado por primera vez como cuatro carruseles en UX Brainy: Tu acento decide de qué color tiene que ser la etiqueta que lleva, La zona muerta, Un botón no es un badge y El brillante no es el botón.
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
