1. css
  2. /properties
  3. /accent-color

accent-color

Definition

The accent-color CSS property sets the accent color of user-interface controls in a web page. It is mainly applied to form checkboxes, radio buttons, and progress elements.

Examples

<!DOCTYPE html>
<html>
<head>
	<style>
		a {
			accent-color: red;
		}
	</style>
</head>
<body>
	<p>This is a paragraph with a <a href="#">hyperlink</a> in it.</p>
</body>
</html>

This will set the color of the hyperlink in the paragraph to red, if the browser supports the accent-color property. However, this property is not widely supported and should not be relied upon in production code. Instead, you should use the more widely supported color property to set the color of text, including accents and hyperlinks.

Values

ValueDescription
autoSpecifies the UA-chosen the accent color.
colorSpecifies the color that should be used to accent the element. This value can be formatted in various ways, such as hex, rgba, hsla, and so on).
initialSets property to default value.
inheritSets property to the value of its parent element.

Best Practices

  • Use a consistent accent color throughout the website or application to create a cohesive visual identity.
  • Choose an accent color that complements the overall color scheme of the design.
  • Use the accent color sparingly, as too much use can be overwhelming and visually distracting.
  • Use the accent color to highlight important elements or calls to action, such as buttons or links.
  • Consider using a slightly different shade or saturation of the accent color for hover or active states to add visual interest and hierarchy.
  • Use the accent color in moderation to avoid overwhelming or clashing with other design elements.
  • Test the use of the accent color in different design contexts to ensure it is effective and visually appealing.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes