Last updated: 12 March 2026

Tailwind CSS Accent Color

Customize checkbox, radio button, and range slider colors in Tailwind CSS with accent-{color} utilities. Apply brand colors to native form controls easily.

The accent-* utilities in Tailwind CSS let you change the color of native browser form controls — checkboxes, radio buttons, range sliders, and progress bars. Instead of building custom components or using JavaScript, you can apply your brand colors to native HTML inputs with a single class.

How to Set Tailwind Accent Color

Apply an accent color with accent-{color}:

html
<input type="checkbox" class="accent-blue-500" checked />
<input type="radio" class="accent-pink-500" checked />
<input type="range" class="accent-green-500" />

Preview

Supported Form Controls

The accent-* utility works on these native HTML elements:

| Element | HTML | Effect | |---------|------|--------| | Checkbox | <input type="checkbox"> | Changes check mark and fill color | | Radio button | <input type="radio"> | Changes selected dot and fill color | | Range slider | <input type="range"> | Changes the thumb and track fill color | | Progress bar | <progress> | Changes the filled portion color |

html
<progress class="accent-blue-500" value="70" max="100"></progress>

All Color Options

You can use any Tailwind color with the accent utility:

html
<input type="checkbox" class="accent-red-500" checked />
<input type="checkbox" class="accent-orange-500" checked />
<input type="checkbox" class="accent-yellow-500" checked />
<input type="checkbox" class="accent-green-500" checked />
<input type="checkbox" class="accent-blue-500" checked />
<input type="checkbox" class="accent-indigo-500" checked />
<input type="checkbox" class="accent-purple-500" checked />
<input type="checkbox" class="accent-pink-500" checked />

Preview

Color Shades

Like all Tailwind color utilities, accent supports the full shade scale:

html
<input type="checkbox" class="accent-blue-200" checked />  <!-- Light -->
<input type="checkbox" class="accent-blue-500" checked />  <!-- Medium -->
<input type="checkbox" class="accent-blue-800" checked />  <!-- Dark -->

Preview

Auto Accent Color

Use accent-auto to reset to the browser's default accent color:

html
<input type="checkbox" class="accent-auto" checked />

Settings / Preferences Form Pattern

A real-world use case — a settings form with branded checkboxes:

html
<div class="space-y-4">
  <label class="flex items-center gap-3">
    <input type="checkbox" class="accent-indigo-600 w-4 h-4" checked />
    <span>Email notifications</span>
  </label>
  <label class="flex items-center gap-3">
    <input type="checkbox" class="accent-indigo-600 w-4 h-4" />
    <span>SMS notifications</span>
  </label>
  <label class="flex items-center gap-3">
    <input type="checkbox" class="accent-indigo-600 w-4 h-4" checked />
    <span>Marketing emails</span>
  </label>
</div>

Preview

Notification Preferences

Dark Mode Accent Color

Switch accent colors in dark mode:

html
<input type="checkbox" class="accent-blue-500 dark:accent-blue-400" checked />

Responsive Accent Color

Change accent colors at breakpoints (uncommon but possible):

html
<input type="range" class="accent-gray-500 md:accent-blue-500" />

✏️ Arbitrary Value Usage

Use any custom color:

html
<input type="checkbox" class="accent-[#ff6b35]" checked />
<input type="range" class="accent-[hsl(200,100%,50%)]" />

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe