CSS - accent-color Property

CSS accent-color property determines the accent color applied to user-interface controls created by certain elements.

This property allows browsers to automatically adjust certain elements (like form inputs, buttons, etc.) to use the specified color as the accent color, typically for user interface elements where the browser can adjust the color to match the theme or user preferences.

The following HTML elements are currently affected by accent-color in browsers that support it:

The accent color assigned to each user agent varies to ensure readability and contrast. This color is only applied to particular user interface controls in states where it is applicable.

Possible Values

  • auto − Represents a UA-chosen color that should match the platform's accent color.

  • <color> − Defines which color will be used as the accent color.

Applies To

All elements.

Syntax

Keyword Values

accent-color: auto;

<color> Values

accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

CSS accent-color - auto Value

The following example demonstrates the accent-color: auto property automatically applies an appropriate accent color −

<html>
<head>
<style> 
   input {
      accent-color: auto;
   }
</style>
</head>
<body>
   <input type="checkbox" id="check" checked>
   <label for="check">accent-color: auto</label>
</body>
</html>

CSS accent-color - <color> Value

The following example demonstrates how to use accent-color property to set different accent colors for checkboxes. The first checkbox has red color and the second one with yellow color −

<html>
<head>
<style> 
   #check1 {
      accent-color: red;
   }
   #check2 {
      accent-color: yellow;
   }
</style>
</head>
<body>
   <input type="checkbox" id="check1" checked>
   <label for="check1">Red</label></br>
   <input type="checkbox" id="check2" checked>
   <label for="check2">Yellow</label>
</body>
</html>

CSS accent-color With Different HTML Element

The following example demonstrates how to use accent-color property for different HTML elements−

<html>
<head>
<style> 
   input[type=radio] {
      accent-color: red;
   }
   input[type=range] {
      accent-color: rgb(55, 255, 0);
   }
   progress {
      accent-color: violet;
   }
</style>
</head>
<body>
   <h3>accent-color for radio buttons</h3>
   <input type="radio" id="radio1" name="gender" checked>
   <label for="radio1">Male</label></br>
   <input type="radio" id="radio2" name="gender">
   <label for="radio2">Female</label>

   <h3>accent-color for a range</h3>
   <label for="ran">Range</label></br>
   <input type="range" id="ran" name="range_val" min="0" max="5">

   <h3>accent-color for a progress</h3>
   <label for="prog">Progress</label></br>
   <progress id="prog" name="prog_val"value="60" max="100">60%</progress>
</body>
</html>
Advertisements