Tailwind CSS Accent Color Cheatsheet

Q: Which HTML elements support accent-color?

The accent-color property works with checkboxes ( ), radio buttons ( ), range sliders ( ), and progress bars ( ).

Q: How do I use accent-color in Tailwind CSS?

Simply add an accent-{color} class to your form element. For example, accent-blue-500 will make a checkbox blue when checked. You can use any color from Tailwind's color palette.

Complete reference for accent-color utilities - style checkboxes, radio buttons, and range inputs.
Click any card to copy the class name.

What is accent-color?

The accent-color CSS property sets the accent color for user-interface controls generated by form elements. This is one of the easiest ways to brand your form controls without complex custom styling.

Works with:

- Checkboxes (<input type="checkbox">)
- Radio buttons (<input type="radio">)
- Range sliders (<input type="range">)
- Progress bars (<progress>)

Quick Navigation

Special Values Color Palette All Color Scales Visual Examples Use Cases FAQ

Common Use Cases

Basic Checkbox Styling

<input
  type="checkbox"
  class="accent-blue-500"
/>

{/* With label */}
<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="accent-purple-500 w-5 h-5"
  />
  <span>Accept terms</span>
</label>

Radio Button Group

<div class="space-y-2">
  <label class="flex items-center gap-2">
    <input
      type="radio"
      name="plan"
      class="accent-green-500 w-5 h-5"
    />
    <span>Free Plan</span>
  </label>
  <label class="flex items-center gap-2">
    <input
      type="radio"
      name="plan"
      class="accent-green-500 w-5 h-5"
    />
    <span>Pro Plan</span>
  </label>
</div>

Range Slider

<div>
  <label class="text-sm font-medium">
    Volume: 75%
  </label>
  <input
    type="range"
    min="0"
    max="100"
    value="75"
    class="w-full accent-pink-500"
  />
</div>

Progress Bar

<div>
  <div class="flex justify-between mb-1">
    <span class="text-sm">Upload Progress</span>
    <span class="text-sm">65%</span>
  </div>
  <progress
    value="65"
    max="100"
    class="w-full accent-indigo-500"
  />
</div>

Dark Mode Support

{/* Different colors for light/dark */}
<input
  type="checkbox"
  class="accent-blue-500 dark:accent-blue-400"
/>

{/* Brighter accent in dark mode */}
<input
  type="radio"
  class="accent-emerald-600 dark:accent-emerald-400"
/>

Brand Colors

{/* Using arbitrary values */}
<input
  type="checkbox"
  class="accent-[#1DB954]"
/>

{/* Spotify green */}
<input
  type="radio"
  class="accent-[rgb(29,185,84)]"
/>

Browser Support

The accent-color CSS property has excellent modern browser support.

Chrome

93+

Firefox

92+

Safari

15.4+

Edge

93+

For older browsers, form controls will fall back to their default browser colors.

Frequently Asked Questions

What is the accent-color property in Tailwind CSS?

The accent-color property in Tailwind CSS allows you to customize the color of form controls like checkboxes, radio buttons, and range sliders. It uses the CSS accent-color property under the hood, making it easy to brand form elements without complex custom styling.

Which HTML elements support accent-color?

The accent-color property works with checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), range sliders (<input type="range">), and progress bars (<progress>).

How do I use accent-color in Tailwind CSS?

Simply add an accent-{color} class to your form element. For example, accent-blue-500 will make a checkbox blue when checked. You can use any color from Tailwind's color palette including all shades (50-950).

Does accent-color work in all browsers?

The accent-color CSS property is supported in all modern browsers including Chrome 93+, Firefox 92+, Safari 15.4+, and Edge 93+. For older browsers, the form controls will fall back to their default colors.

Can I use custom colors with accent-color?

Yes! You can use Tailwind's arbitrary value syntax to use any custom color. For example, accent-[#1DB954] for a custom hex color, or accent-[rgb(255,0,100)] for RGB values.

What's the difference between accent-color and background-color for form controls?

The accent-color property specifically targets the browser-rendered UI elements of form controls (like the checkmark in a checkbox), while background-color affects the entire element's background. Using accent-color is the proper way to style native form controls without replacing them with custom elements.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including accent colors, form styles, and more. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →