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.
Interactive Accent Color Playground
Try each class live and inspect the CSS output.
accent-emerald-500accent-color: rgb(16 185 129);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}:
1<input type="checkbox" class="accent-blue-500" checked />2<input type="radio" class="accent-pink-500" checked />3<input type="range" class="accent-green-500" />
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 |
1<progress class="accent-blue-500" value="70" max="100"></progress>
All Color Options
You can use any Tailwind color with the accent utility:
1<input type="checkbox" class="accent-red-500" checked />2<input type="checkbox" class="accent-orange-500" checked />3<input type="checkbox" class="accent-yellow-500" checked />4<input type="checkbox" class="accent-green-500" checked />5<input type="checkbox" class="accent-blue-500" checked />6<input type="checkbox" class="accent-indigo-500" checked />7<input type="checkbox" class="accent-purple-500" checked />8<input type="checkbox" class="accent-pink-500" checked />
Color Shades
Like all Tailwind color utilities, accent supports the full shade scale:
1<input type="checkbox" class="accent-blue-200" checked /> <!-- Light -->2<input type="checkbox" class="accent-blue-500" checked /> <!-- Medium -->3<input type="checkbox" class="accent-blue-800" checked /> <!-- Dark -->
Auto Accent Color
Use accent-auto to reset to the browser's default accent color:
1<input type="checkbox" class="accent-auto" checked />
Settings / Preferences Form Pattern
A real-world use case — a settings form with branded checkboxes:
1<div class="space-y-4">2 <label class="flex items-center gap-3">3 <input type="checkbox" class="accent-indigo-600 w-4 h-4" checked />4 <span>Email notifications</span>5 </label>6 <label class="flex items-center gap-3">7 <input type="checkbox" class="accent-indigo-600 w-4 h-4" />8 <span>SMS notifications</span>9 </label>10 <label class="flex items-center gap-3">11 <input type="checkbox" class="accent-indigo-600 w-4 h-4" checked />12 <span>Marketing emails</span>13 </label>14</div>
Notification Preferences
Dark Mode Accent Color
Switch accent colors in dark mode:
1<input type="checkbox" class="accent-blue-500 dark:accent-blue-400" checked />
Responsive Accent Color
Change accent colors at breakpoints (uncommon but possible):
1<input type="range" class="accent-gray-500 md:accent-blue-500" />
✏️ Arbitrary Value Usage
Use any custom color:
1<input type="checkbox" class="accent-[#ff6b35]" checked />2<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!
