🎨 CSS accent-color — Complete Tutorial

🌐 What Is accent-color?

The accent-color property allows you to easily customize the color of form controls such as:

  • ✔ Checkboxes
  • ✔ Radio buttons
  • ✔ Range sliders
  • ✔ Progress bars
  • ✔ Meter elements

Before accent-color, customizing these UI elements required complex techniques. Now, one line of CSS updates all the browser-defined accent UI parts.

>>“accent-color lets you brand native form controls with your theme color — effortlessly.”

Note

✔ Supported in all modern browsers
✔ Enhances UI consistency
✔ Works with both light and dark modes

📦 Syntax

Basic syntax

accent-color: auto | <color>;
ValueDescription
autoBrowser decides the accent color (default).
<color>Any valid CSS color (hex, rgb, hsl, color(), etc.).

📌 1. Apply Accent Color to Form Inputs

Simple accent color

input[type="checkbox"],
input[type="radio"] {
  accent-color: #ff5722; /* Orange */
}

All checkboxes and radio buttons adopt the orange accent.

📌 2. Use Accent Color on Range Sliders

Range slider

input[type="range"] {
  accent-color: #4caf50; /* Green */
}

The slider thumb and filled track portion use the custom accent color.

📌 3. Accent Color for Progress & Meter Elements

Progress styling

progress, meter {
  accent-color: hsl(220, 80%, 60%);
}

Applies theme colors to progress bars and meter indicators.

📌 4. Dark Mode Friendly Accent Colors

Dark mode UI

:root {
  accent-color: #00bcd4;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #80deea;
  }
}

Automatically adjusts accent color for dark mode.

📌 5. Using CSS Variables With Accent Color

CSS variable

:root {
  --brand-color: #9c27b0;
}

input[type="checkbox"] {
  accent-color: var(--brand-color);
}

Great for applying theme systems across applications.

📌 6. Accent Color for Theming UI Components

Themed form

.theme-red input[type="checkbox"] {
  accent-color: crimson;
}

.theme-blue input[type="checkbox"] {
  accent-color: royalblue;
}

Useful in dashboards, settings screens, and user-customizable UIs.

🧪 Real-World Examples

1️⃣ Settings Page UI

Settings panel

.settings input[type="checkbox"] {
  accent-color: #03a9f4;
}

2️⃣ Todo List App

Todo app

.todo-item input[type="checkbox"] {
  accent-color: #ff9800;
}

3️⃣ Survey Form Radio Buttons

Survey form

input[type="radio"] {
  accent-color: #4caf50;
}

⚠️ Common Mistakes

  • ❌ Expecting accent-color to style borders or backgrounds of inputs
  • ❌ Using accent-color on unsupported elements (like text inputs)
  • ❌ Applying accent-color but forgetting browser fallback styles

Note

accent-color only affects the browser-generated UI parts(e.g., checkbox ticks, radio dots, slider thumbs, progress fills).

🔥 Summary

The accent-color property is a powerful and simple way to theme built-in form controls to match your application's brand style. It improves UI consistency, accessibility, and aesthetics with minimal code.

>>“A single line of CSS can now style all your native form controls — beautifully.”

Learn more →MDN Docs 📘