← Tutti gli articoli

Tutorial

Dai a qualsiasi sito web un colore d'accento personalizzato

17 maggio 2026 · di JustZix Team

Ogni sito sceglie un colore d'accento — il blu dei suoi link, il verde del suo pulsante principale. Se quel colore stride con i tuoi gusti, non devi conviverci. Una regola CSS JustZix può ridipingere un intero sito con la tua tonalità preferita.

Trova cosa sovrascrivere

Il colore d'accento di solito vive in tre posti: i link, i pulsanti principali e gli stati di focus/selezione. I siti moderni spesso lo espongono come proprietà CSS personalizzata, il che rende il tuo lavoro banale.

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

Apri i DevTools, ispeziona un pulsante e cerca una variabile come --primary, --brand o --link-color. Se ne vedi una, sovrascrivila direttamente — l'intero sito si aggiorna in una volta.

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

Quando non ci sono variabili

Molti siti più vecchi codificano i colori in modo fisso. Allora miri agli elementi direttamente. Questo blocco copre i casi comuni.

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;
}

Ricolora focus e selezione

Non fermarti ai link. L'evidenziazione di selezione e gli anelli di focus portano anche loro l'accento — abbinarli fa sembrare il risultato intenzionale anziché rattoppato.

::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;
}

Ricolora le icone SVG

I set di icone spesso ereditano il colore del testo, quindi si aggiornano gratis. Quelle che non lo fanno di solito usano fill o stroke — spazzale con una sola regola.

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

Un flusso di lavoro pratico

• Scegli un valore esadecimale e riusalo ovunque — la coerenza è ciò che vende il look.
• Controlla prima le variabili CSS; sovrascrivere una riga batte scriverne venti.
• Tieni una tonalità più scura per gli stati hover così i pulsanti sembrano ancora interattivi.
• Verifica il contrasto: un accento pallido su testo bianco è illeggibile. Punta a un rapporto 4,5:1.

La ricolorazione dell'accento si sposa magnificamente con un tema scuro — vedi come creare una modalità scura universale. Per altri snippet pronti, visita i nostri esempi pronti all'uso, e se non hai ancora installato l'estensione, scarica JustZix per iniziare.