accent-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Try it 

accent-color: red;

accent-color: #74992e;

accent-color: rgb(255 255 128);

accent-color: hsl(250 100% 34%);

<section class="default-example container" id="default-example">
    <input checked="" id="example-element" type="checkbox" />
    <label for="example-element" id="example-label">Example Label</label>
</section>

.container > div {
  display: flex;
  align-items: center;
#example-element {
  width: 40px;
  height: 40px;
#example-label {
  margin-left: 10px;
  font-size: x-large;

Browsers that support accent-color currently apply it to the following HTML elements:


  • <input type="checkbox">
    • 

  • <input type="radio">
    • 

  • <input type="range">
    • 

  • <progress>
    • 

    Each user agent has an accent color, with variations to ensure legibility and
contrast. That accent color is not used by every user-interface control nor in
every state of the control. The accent-color is only applied to user-interface
controls that use an accent color in the states where it is applicable.

    Syntax

    css 
    /* 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%);
/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

    Values

    Represents a UA-chosen color, which should match the accent color of the platform, if any.

    <color>

    Specifies the color to be used as the accent color.

    Formal definition

    Initial value auto
    Applies to all elements
    Inherited yes
    Computed value auto is computed as specified and <color> values are computed as defined for the color property.
    Animation type by computed value type

    Formal syntax 

    accent-color = 
      auto     |
      <color>

    Examples

    Setting a custom accent color

    HTML

    html 
    <input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

    css
    input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
input.custom {
  accent-color: rebeccapurple;