CSS Accent Color Generator

Your design system uses indigo as the primary color, but every checkbox and radio button on the page is still the browser’s default blue. The traditional fix — hiding native controls with appearance: none and rebuilding them with pseudo-elements — adds 40+ lines of CSS per control type, breaks keyboard accessibility if done wrong, and still looks different across browsers. There’s a one-line solution that shipped in 2022 and you might have missed it.

Why This Generator (Not Writing the CSS by Hand)

accent-color is a single CSS property, so you could just type it. But picking the right color means checking contrast against both light and dark backgrounds, previewing how it looks on all four supported control types (checkbox, radio, range, progress), and testing the dark mode variant. This tool shows all four controls side by side with your chosen color, generates the CSS for global application (:root), scoped application (class-based), and dark mode override — and previews the result live. Everything runs in your browser; no color data leaves your device.

What Is the CSS accent-color Property?

The accent-color CSS property lets you apply a custom color to browser-native form controls — checkboxes, radio buttons, range sliders, and progress bars. Before accent-color, developers had to hide native controls and build custom replacements from scratch to brand them. Now a single CSS property does the job in every modern browser.

:root {
  accent-color: #6366f1;
}

That one line changes the checked state color of every <input type="checkbox">, <input type="radio">, <input type="range"> thumb, and <progress> fill on the page.

Which Form Elements Respond to accent-color?

Four standard HTML form controls respond to accent-color:

Other form elements (<input type="text">, <select>, <textarea>, buttons) are not affected by accent-color.

How to Apply accent-color

Apply globally with :root

The most common pattern is to set accent-color on :root so every form control on the page inherits the same brand color:

:root {
  accent-color: #6366f1;
}

Apply to specific elements only

You can scope accent-color to a class or a specific element type:

.checkout-form {
  accent-color: #10b981;
}

input[type="range"] {
  accent-color: #f59e0b;
}

Use with a CSS custom property

Combine accent-color with a CSS variable so you can update your brand color in one place:

:root {
  --brand: #6366f1;
  accent-color: var(--brand);
}

Work with dark mode

accent-color integrates naturally with color-scheme and prefers-color-scheme. The browser automatically adjusts text contrast on the control so it remains legible in both light and dark contexts:

:root {
  color-scheme: light dark;
  accent-color: #6366f1;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #818cf8; /* lighter shade for dark backgrounds */
  }
}

Accepted Color Values

accent-color accepts any valid CSS color value:

• Hex: #6366f1, #f00, #6366f1cc
• RGB / RGBA: rgb(99, 102, 241), rgba(99, 102, 241, 0.8)
• HSL: hsl(239, 84%, 67%)
• Named colors: tomato, rebeccapurple, dodgerblue
• CSS custom properties: var(--brand-color)
• oklch / oklab: oklch(0.62 0.19 264.1)
• auto (default): browser picks a color based on the OS accent color

The special value auto tells the browser to use the system accent color — useful if you want native integration without overriding the user’s preference.

Practical Use Cases

Brand consistency in forms

Apply your design system’s primary color to keep form controls visually consistent with the rest of your UI:

:root {
  accent-color: #6366f1; /* indigo — matches primary button color */
}

Multi-brand theming

Use data attributes to switch accent colors per theme:

[data-theme="green"] { accent-color: #10b981; }
[data-theme="rose"]  { accent-color: #f43f5e; }
[data-theme="amber"] { accent-color: #f59e0b; }

Settings and preference panels

Range inputs are especially common in settings panels for things like volume, brightness, or font size sliders. accent-color makes them instantly match your brand without extra CSS complexity.

Survey and form UIs

Checkboxes and radio buttons in survey pages, multi-step forms, or filter sidebars all benefit from consistent brand coloring.

Browser Support

accent-color is supported in all major modern browsers:

• Chrome 93+
• Firefox 92+
• Safari 15.4+
• Edge 93+

For older browsers the property is safely ignored — native form controls continue to render with the OS default appearance, so no JavaScript polyfill is needed.

Frequently Asked Questions

Does accent-color work on all input types? No. Only checkbox, radio, range, and progress respond to accent-color. Other input types, select elements, and buttons are not affected.

Can I use accent-color for the focus ring color? Partially. Browsers use the accent color for the focus ring on checkboxes and radio buttons, but for a fully controlled focus ring on all elements you still need outline CSS.

What is the difference between accent-color and color-scheme? color-scheme tells the browser whether to render form controls in light or dark mode (system palette). accent-color overrides the highlight color within whichever scheme is active. Both can be set on the same element.

Why does my range input track not change color? Only the filled portion of the track (from the minimum to the thumb) and the thumb itself respond to accent-color. The unfilled track uses the browser default. For full track control you still need the vendor-specific ::-webkit-slider-runnable-track and ::-moz-range-track pseudo-elements.

Does accent-color support transparency? Yes. You can pass any color value including those with an alpha channel. The browser handles the blend with the control’s background.

Does this tool send my color to a server? No. All CSS generation happens entirely in your browser. Nothing is transmitted.