# Color de acento: cómo elegir el que de verdad funciona

[Canonical HTML page](https://gradiently.design/es/guide/accent-color)

El acento es la parte más pequeña de una paleta y la primera que la gente nota. Así se elige uno que destaque sobre tu color base, se mantiene lo bastante escaso para que funcione y se define en CSS.

## The short version

- 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.

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](https://gradiently.design/es/guide/60-30-10-rule) 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.

Una publicación vertical que anuncia que el local abre hasta tarde los viernes, con una etiqueta pequeña sobre el titular

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.

Una publicación vertical de lista titulada Tres cosas que traer para un taller

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](https://gradiently.design/es/guide/color-wheel). Las paletas azul marino y verde azulado aceptan acentos cálidos como coral o ámbar; las cálidas, azul o verde. Los [colores complementarios](https://gradiently.design/es/guide/complementary-colors) 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.

- Base azul marino, acento coral: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Base arena, acento azul profundo: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Base verde bosque, acento azafrán: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Base gris lila, acento rojo: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Base negra, acento lima: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Base rosa empolvado, acento carbón: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Seis paletas dibujadas aproximadamente al 70, 20 y 10 por ciento. Cada acento se diferencia de su base en tono, en luminosidad o en ambos.

## Dónde usar el acento y dónde no

| Úsalo para | Mantenlo fuera de |
| --- | --- |
| El botón principal o la llamada a la acción | Botones secundarios y de cancelar |
| Una palabra clave, un precio o una fecha | Párrafos enteros de texto |
| Estados activos: la pestaña actual, un elemento seleccionado | Todos los iconos de una barra de herramientas |
| Pequeños detalles de marca: una línea, un punto, una pegatina | Fondos grandes detrás de textos largos |
| Resaltes en un gráfico: la serie que importa | Todas las series de un gráfico a la vez |

Un acento con una función principal conserva su significado. Cuando está en todo, nada destaca.

> **Un acento no es un color de error** Si tu acento es rojo, piensa en cómo convive con los mensajes de error. Los usuarios pueden leer un botón rojo como destructivo. Algunas marcas con acentos rojos usan otro rojo para los errores, o los muestran con un icono y texto además del color.

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](https://gradiently.design/es/guide/color-contrast-accessibility): 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](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) tiene los detalles.

```css
: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 */
}
```

Un único token de acento para los controles de formulario y el botón principal, con un tono más profundo para los enlaces de texto, de modo que cumplan el contraste sobre blanco.

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](https://gradiently.design/es/guide/website-color-scheme).

## 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](https://gradiently.design/es/guide/tech-color-palettes).

## FAQ

### ¿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í.