La versión corta
- Un color de acento es un color contrastado que se usa en poca cantidad para llamar la atención sobre el elemento más importante, como un botón, un precio o una palabra del titular.
- En la regla 60 30 10 el acento es el diez por ciento, y es su escasez lo que lo hace eficaz.
- Un buen acento se diferencia de los colores base al menos en un aspecto marcado: tono, luminosidad o saturación.
- Un acento que se usa para muchas tareas distintas deja de señalar nada, así que dale una función principal.
- En CSS, la propiedad accent-color tiñe las casillas de verificación, los botones de opción, los deslizadores y las barras de progreso nativos.
En esta página
Un color de acento es el color pequeño y contrastado de una paleta que señala lo que importa: el botón que hay que pulsar, el precio, la palabra clave de un titular. Para elegir uno que funcione, parte de tus colores base y escoge algo que se diferencie claramente de ellos en tono, luminosidad o saturación, y luego úsalo con moderación. En el conocido reparto 60 30 10 es el diez por ciento. Cuanto menos aparece, más significa cada aparición.
Para qué sirve un color de acento
La mayor parte de un diseño es color base y color secundario: fondos, paneles, texto. El acento es la excepción que le dice al ojo adónde ir. Eso lo convierte en el color más funcional que tienes. En una web marca la acción principal; en un póster cae sobre la fecha; en una marca se convierte en el detalle que la gente recuerda, un punto final de color o una única franja brillante.
La regla 60 30 10 da las proporciones: alrededor de un sesenta por ciento de color dominante, un treinta de secundario y un diez de acento. Trata ese diez como un techo, no como un objetivo. Muchos de los mejores diseños usan bastante menos.
En una publicación como esta, el acento va en un solo sitio, como la etiqueta pequeña sobre el titular, y en ningún otro.
El mismo principio en una publicación de lista: si aparece el acento, marca solo el encabezado.
Cómo elegir un color de acento
El contraste lo es todo. Mira tus colores base y secundarios, pregúntate en qué se parecen y haz que el acento sea distinto al menos en un aspecto marcado.
- 1
Contraste de tono
Elige del lado opuesto del círculo cromático. Las paletas azul marino y verde azulado aceptan acentos cálidos como coral o ámbar; las cálidas, azul o verde. Los colores complementarios son la elección clásica.
- 2
Contraste de luminosidad
Sobre una base oscura, un acento claro; sobre una base pálida, uno profundo. Una paleta apagada de grises admite un acento negro tan bien como uno brillante.
- 3
Contraste de saturación
Entre colores suaves y empolvados, un color saturado se lee como acento aunque comparta su tono. Una paleta arcilla con un acento bermellón puro es un buen ejemplo.
- 4
Pruébalo a su tamaño real
Un acento suele ser pequeño. Compruébalo como texto de un botón o como un subrayado fino, no como una muestra grande, porque las áreas pequeñas de color se ven más oscuras y apagadas.
Dónde usar el acento y dónde no
Mantenlo fuera de
Mantenlo fuera de
Mantenlo fuera de
Mantenlo fuera de
Mantenlo fuera de
Los acentos brillantes como el lima, el amarillo o el menta suelen fallar como texto sobre blanco. Úsalos como rellenos con texto oscuro encima y comprueba cada combinación con las pautas de contraste de color: al menos 4,5:1 para el texto de lectura y 3:1 para texto grande y elementos de interfaz.
Si el acento se ha colado por todas partes, una revisión rápida ayuda. Haz una captura de tu página de inicio o de una semana de publicaciones, desenfócala un poco y mira dónde aparece el acento. Si el ojo se va a tres o cuatro sitios a la vez, pasa todos menos el más importante a un color secundario. Si no se va a ninguno, probablemente el acento se parece demasiado a la base y necesita más contraste de tono o de luminosidad.
La propiedad CSS accent-color
En la web, accent-color tiñe los controles de formulario nativos con una sola línea: casillas de verificación, botones de opción, deslizadores y barras de progreso. Funciona en las versiones actuales de los principales navegadores; la referencia de MDN tiene los detalles.
:root {
--accent: #d42a35;
}
/* Native checkboxes, radios, sliders and progress bars */
body {
accent-color: var(--accent);
}
/* The same accent on your own components */
.button-primary {
background: var(--accent);
color: #ffffff;
}
a {
color: #b3202a; /* a deeper shade for text links on white */
}Los navegadores pueden ajustar el color de la marca de verificación o del tirador dentro de un control para que siga siendo legible sobre tu acento, así que prueba acentos claros y oscuros. Para el resto de colores de un sitio, consulta combinación de colores para web.
Acentos sobre degradados y fotografías
Sobre un fondo rico, el acento tiene más competencia. Sácalo de fuera de la familia de colores del fondo: un acento cálido sobre un degradado frío, o un casi blanco sobre uno colorido. En Gradiently, la tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, así que las palabras siguen siendo legibles mientras el fondo se mueve y tu acento solo tiene que hacer su único trabajo. Para más paletas construidas alrededor de un color fuerte, consulta paletas de colores tecnológicas.
Preguntas frecuentes
¿Qué es un color de acento en diseño?
Un color contrastado que se usa en poca cantidad para llamar la atención sobre el elemento más importante, como un botón, una palabra clave o un precio.
¿Qué parte de un diseño debería ser color de acento?
Como mucho, alrededor del diez por ciento, siguiendo la regla 60 30 10. Muchos diseños sólidos usan bastante menos.
¿Cómo elijo un color de acento para mi paleta?
Haz que se diferencie claramente de tus colores base en tono, luminosidad o saturación, y pruébalo al tamaño pequeño en el que de verdad aparecerá.
¿Qué hace accent-color en CSS?
Define el tono de las casillas de verificación, los botones de opción, los deslizadores y las barras de progreso nativos, para que los controles de formulario encajen con tu marca sin estilos personalizados.
¿Puede una marca tener más de un color de acento?
Puede, pero cada uno debería tener una función distinta, por ejemplo uno para acciones y otro para resaltes. Dos acentos haciendo el mismo trabajo se anulan entre sí.
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