← Todos los artículos

Tutoriales

Dale a cualquier sitio web un color de acento personalizado

17 mayo 2026 · por JustZix Team

Cada sitio elige un color de acento — el azul de sus enlaces, el verde de su botón principal. Si ese color choca con tu gusto, no tienes que vivir con él. Una regla CSS de JustZix puede repintar todo un sitio con tu tono favorito.

Encuentra qué anular

El color de acento suele vivir en tres lugares: enlaces, botones principales y estados de foco/selección. Los sitios modernos a menudo lo exponen como una propiedad personalizada de CSS, lo que hace tu trabajo trivial.

:root {
  --accent: #e8590c;
  --accent-hover: #d9480f;
}

Abre DevTools, inspecciona un botón y busca una variable como --primary, --brand o --link-color. Si ves una, anúlala directamente — todo el sitio se actualiza de una vez.

:root {
  --primary: #e8590c !important;
  --brand-color: #e8590c !important;
  --link: #e8590c !important;
}

Cuando no hay variables

Muchos sitios antiguos codifican los colores de forma fija. Entonces apuntas a los elementos directamente. Este bloque cubre los casos comunes.

a, a:visited {
  color: #e8590c !important;
}
a:hover {
  color: #d9480f !important;
}
button, .btn, .button,
input[type="submit"], [role="button"] {
  background-color: #e8590c !important;
  border-color: #e8590c !important;
  color: #fff !important;
}

Recolorea el foco y la selección

No te detengas en los enlaces. El resaltado de selección y los anillos de foco también llevan el acento — igualarlos hace que el resultado se sienta intencionado en lugar de remendado.

::selection {
  background: #e8590c;
  color: #fff;
}
:focus-visible {
  outline: 2px solid #e8590c !important;
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
  border-color: #e8590c !important;
  box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.25) !important;
}

Recolorea los iconos SVG

Los conjuntos de iconos a menudo heredan el color del texto, así que se actualizan gratis. Los que no lo hacen suelen usar fill o stroke — barrelos con una sola regla.

svg, svg path {
  fill: currentColor;
}
.icon, [class*="icon-"] {
  color: #e8590c !important;
}

Un flujo de trabajo práctico

• Elige un valor hexadecimal y reutilízalo en todas partes — la coherencia es lo que vende el aspecto.
• Comprueba primero las variables CSS; anular una línea supera a escribir veinte.
• Reserva un tono más oscuro para los estados hover para que los botones sigan sintiéndose interactivos.
• Verifica el contraste: un acento pálido sobre texto blanco es ilegible. Apunta a una proporción de 4,5:1.

El recoloreado de acento combina perfectamente con un tema oscuro — consulta crear un modo oscuro universal. Para más fragmentos listos para usar, visita nuestros ejemplos listos para usar, y si aún no has instalado la extensión, descarga JustZix para empezar.