Enter any valid CSS color — HEX, RGB, HSL, or named color.
accent-color: #c8f135;
Supported in Chrome 93+, Firefox 92+, Safari 15.4+. Falls back to browser default.
// LIVE PREVIEW
// test accent-color on form controls before shipping
Preview and test the CSS accent-color property on checkboxes, radio buttons, range sliders, and progress bars instantly in your browser. Free, no sign-up.
Enter any valid CSS color — HEX, RGB, HSL, or named color.
accent-color: #c8f135;
Use the color picker or type any valid CSS color — HEX, RGB, HSL, or a named color like rebeccapurple.
Watch checkboxes, radios, sliders, and progress bars update instantly with your chosen accent color.
Click Copy CSS to grab the one-liner. Paste it into your stylesheet on any element or :root.
The CSS accent-color property lets you tint browser-native form controls — checkboxes, radio buttons, range inputs, and progress bars — with a single line of CSS. No custom components needed.
This tool lets you preview that color instantly across every supported control type, so you can ship confidently.
accent-color property?It's a CSS property that sets the tint color for browser-rendered UI controls including checkboxes, radio buttons, range inputs, and progress elements. Introduced in 2021, it lets you brand native controls without replacing them with custom components.
accent-color?Chrome 93+, Edge 93+, Firefox 92+, and Safari 15.4+ all support it. For older browsers, form controls simply fall back to the system default color — no breakage occurs.
Yes. accent-color accepts any valid CSS color — HEX, RGB, RGBA, HSL, HSLA, named colors (like tomato or rebeccapurple), and even currentColor. This tool supports HEX input and the native color picker; HSL/named values can be typed directly.
accent-color affect all form controls?It affects checkboxes, radio buttons, range sliders (<input type="range">), and progress bars (<progress>). It does not affect <select>, <input type="text">, or buttons — those need separate styling.
accent-color in my CSS?For a site-wide accent, apply it on :root or html. For scoped styling, apply it to any ancestor element or directly on the control. The value cascades like any inherited property.
It can. Browsers automatically adjust the control's foreground (e.g. the checkmark color) to maintain readability, but the background contrast of the control against the page is your responsibility. Always verify contrast ratios using a tool like our Contrast Checker.
Compare mode shows the browser's default control styling side-by-side with your chosen accent color. This is helpful for communicating the visual impact of the change to teammates or stakeholders.
The preview itself is entirely client-side JavaScript — no server calls are made after page load. However, you need an initial internet connection to load the page. For offline use, consider copying the CSS snippet and testing in a local HTML file.
accent-color: The One-Liner That Brands Your Form ControlsFor years, developers who wanted custom-colored checkboxes and radio buttons had two painful choices: hide the native control and layer a custom element on top, or reach for a JavaScript-heavy UI library. Both approaches carry real costs — accessibility regressions, maintenance overhead, inconsistent behavior across assistive technologies, and bloated bundle sizes.
Then in 2021, browsers shipped accent-color. A single CSS property. One line. Zero JavaScript. And suddenly, native form controls became brand-able.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out.
accent-color Works Under the HoodWhen you set accent-color: #3b82f6 on an element, the browser propagates that color to any descendant form controls that it knows how to tint. The browser — not CSS — decides exactly how to apply the color. For a checkbox, it fills the checked background. For a range input, it fills the track segment before the thumb. For a progress bar, it fills the filled portion.
Crucially, the browser also adjusts the foreground automatically. Set a dark accent and the checkmark stays white. Set a very light accent and the checkmark flips to dark. This is called "automatic foreground color" behavior and it's baked into the spec — you get accessible contrast on the control face itself for free.
The CSS accent-color property currently affects four control types:
<input type="checkbox">) — the filled background and checkmark when checked, and the indeterminate dash when in a mixed state.<input type="radio">) — the filled dot inside the ring when selected.<input type="range">) — the filled portion of the track (the segment from the minimum to the current thumb position).<progress>) — the filled value bar. Indeterminate progress animations are also tinted.Controls not currently affected include <select>, <input type="text">, <input type="date">, and <button>. Those require traditional styling techniques.
As of mid-2024, accent-color has over 93% global browser support according to caniuse.com. It's fully supported in:
Older browsers simply ignore the property and render controls in their system default color. No polyfill is needed — the fallback is graceful by nature.
accent-color in Your StylesheetThe most common pattern is to define it on :root so it cascades everywhere:
:root {
accent-color: #3b82f6;
}You can also scope it to a component or section:
.settings-panel {
accent-color: var(--brand-primary);
}
.danger-zone {
accent-color: #ef4444;
}Since accent-color is an inherited property, any form control inside the element will pick it up. This makes scoping intuitive and predictable.
accent-colorOne of the best patterns is to wire accent-color into your existing design token system. If you already have a --color-primary variable, it's as simple as:
:root {
--color-primary: #c8f135;
accent-color: var(--color-primary);
}Now your form controls automatically track your brand color. When the design token updates — say, for a seasonal campaign or white-label variant — your controls update too, with zero extra work.
While the browser handles foreground contrast on the control face automatically, you remain responsible for the control's background context. A very light accent color on a white page background may produce insufficient contrast between the control's idle state (unfilled ring or box) and the page background. Always run your chosen color through a WCAG contrast checker — particularly for the unfocused, unchecked state, where the control border is the only visual affordance.
For users who prefer reduced motion, the indeterminate progress animation respects prefers-reduced-motion in modern browsers automatically.
accent-color with Dark ModePairing accent-color with prefers-color-scheme lets you serve different accent colors for light and dark contexts:
:root {
accent-color: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
accent-color: #60a5fa;
}
}A lighter tint often works better in dark mode — it preserves contrast against the dark page background while keeping the brand relationship clear.
Custom checkbox libraries typically work by hiding the native input (appearance: none or opacity: 0) and styling a sibling element as the visible control. This approach has real drawbacks: the native input is still in the DOM for form submission, focus management must be replicated in CSS, screen reader behavior depends on correct ARIA attributes that many libraries get wrong, and you now own the rendering logic across every browser and OS theme.
With accent-color, the browser keeps ownership of rendering. Focus rings, high-contrast mode, indeterminate states, disabled states — all handled. You just set the color.