accent-color
Setting the accent color of user interface elements or controls.
Overview
| Class | Declarations |
|---|---|
accent-color:auto | accent-color: auto;
|
accent-color-current | accent-color: currentColor;
|
accent-color:transparent | accent-color: transparent;
|
accent-color:<color> | accent-color: <color>;
|
accent-color requests a highlight color for native controls. The property is inherited; the platform decides which parts and states use it. It does not recolor every kind of form element.
Basic usage
Set the accent color
Compare accent-color:auto with accent-color-blue on a fieldset. Its checkbox, radio buttons and range input inherit the request; try each control.
<!-- Platform accent --><form> <fieldset id="target" class="grid gap-md min-w:0 m:0 p:0 border-width:0 accent-color:auto"> <legend class="sr-only">Platform accent</legend> <label class="flex items-center gap-sm"> <input type="checkbox" checked> Snap to grid </label> <div class="flex flex-wrap gap-md"> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="canvas" checked> Canvas </label> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="layers"> Layers </label> </div> <label class="grid gap-xs w:240px max-w:100%"> Zoom <input type="range" min="25" max="100" value="65" class="w:100%"> </label> </fieldset></form><!-- Blue accent --><form> <fieldset id="target" class="grid gap-md min-w:0 m:0 p:0 border-width:0 accent-color-blue"> <legend class="sr-only">Blue accent</legend> <label class="flex items-center gap-sm"> <input type="checkbox" checked> Snap to grid </label> <div class="flex flex-wrap gap-md"> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="canvas" checked> Canvas </label> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="layers"> Layers </label> </div> <label class="grid gap-xs w:240px max-w:100%"> Zoom <input type="range" min="25" max="100" value="65" class="w:100%"> </label> </fieldset></form>Generated CSS
@layer theme { :root, :host { --color-blue: var(--color-blue-60); --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-50: oklch(58.22% .2279 263.9) } @media (prefers-color-scheme:light) { :root { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:light) { :host { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:dark) { :root { --color-blue: var(--color-blue-50) } } @media (prefers-color-scheme:dark) { :host { --color-blue: var(--color-blue-50) } }}@layer utilities { .accent-color-blue { accent-color: var(--color-blue) } .accent-color\:auto { accent-color: auto }}Browsers may adjust the accent or its contrasting foreground for legibility. The computed value describes the requested color, not every pixel of native control paint. Use auto to restore the platform choice.
Apply conditionally
Change a real control group from blue to violet at sm. Resize the viewport and interact with the controls; the same native media query also changes the inherited readout.
<!-- Responsive accent --><form> <fieldset id="target" class="grid gap-md min-w:0 m:0 p:0 border-width:0 accent-color-blue accent-color:auto@print accent-color-violet@screen@sm"> <legend class="sr-only">Responsive accent</legend> <label class="flex items-center gap-sm"> <input type="checkbox" checked> Snap to grid </label> <div class="flex flex-wrap gap-md"> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="canvas" checked> Canvas </label> <label class="flex items-center gap-sm"> <input type="radio" name="view" value="layers"> Layers </label> </div> <label class="grid gap-xs w:240px max-w:100%"> Zoom <input type="range" min="25" max="100" value="65" class="w:100%"> </label> </fieldset></form>The screen condition keeps print on auto. Theme tokens adapt to the current color scheme without replacing the native controls.