← All posts

Tutorials

Give any website a custom accent color

17 May 2026 · by JustZix Team

Every site picks an accent color — the blue of its links, the green of its primary button. If that color clashes with your taste, you do not have to live with it. A JustZix CSS rule can repaint a whole site to your favorite hue.

Find what to override

Accent color usually lives in three places: links, primary buttons, and focus/selection states. Modern sites often expose it as a CSS custom property, which makes your job trivial.

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

Open DevTools, inspect a button, and look for a variable like --primary, --brand or --link-color. If you see one, override it directly — the entire site updates at once.

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

When there are no variables

Plenty of older sites hard-code colors. Then you target elements directly. This block covers the common cases.

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

Recolor focus and selection

Do not stop at links. Selection highlight and focus rings carry the accent too — matching them makes the result feel intentional rather than patched.

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

Recolor SVG icons

Icon sets often inherit text color, so they update for free. The ones that do not usually use fill or stroke — sweep them with one rule.

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

A practical workflow

• Pick one hex value and reuse it everywhere — consistency is what sells the look.
• Check for CSS variables first; overriding one line beats writing twenty.
• Keep a darker shade for hover states so buttons still feel interactive.
• Verify contrast: a pale accent on white text is unreadable. Aim for a 4.5:1 ratio.

Accent recoloring pairs beautifully with a dark theme — see building a universal dark mode. For more drop-in snippets, visit our ready-made examples, and if you have not installed the extension yet, download JustZix to get started.