{"id":350365,"date":"2021-08-26T15:08:00","date_gmt":"2021-08-26T22:08:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=350365"},"modified":"2022-08-25T08:13:39","modified_gmt":"2022-08-25T15:13:39","slug":"accent-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/accent-color\/","title":{"rendered":"accent-color"},"content":{"rendered":"\n<p>The <code>accent-color<\/code> property in CSS is capable of re-tinting the accented color of form controls provided by the browser&#8217;s default styles with a custom color value.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  accent-color: #f8a100;\n}<\/code><\/pre>\n\n\n\n<p><code>accent-color<\/code> is defined in <a href=\"https:\/\/www.w3.org\/TR\/css-ui-4\/#widget-accent\" rel=\"noopener\">CSS Basic User Interface Module Level 4<\/a>, which is currently in Working Draft. That means the details are still a work in progress and could change between now and when the spec becomes a formal recommendation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">accent-color: auto | &lt;color>;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-e916a65e\"><li><strong>Initial value:<\/strong> auto<\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Computed value:<\/strong> the keyword <code>auto<\/code> or a computed color<\/li><li><strong>Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword *\/\naccent-color: auto;\n\n\/* &lt;color> *\/\naccent-color: red;\naccent-color: #f8a100\naccent-color: rgba(102, 100, 70, 1);\naccent-color: hsla(180, 100%, 70%, 1);\n\n\/* Global*\/\naccent-color: inherit;\naccent-color: initial;\naccent-color: revert;\naccent-color: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-finally-an-easy-way-to-style-forms\">Finally, an &#8220;easy&#8221; way to style forms!<\/h3>\n\n\n<p>Styling forms has traditionally been&#8230; well, awful. No need to look further than <a href=\"https:\/\/css-tricks.com\/some-innocent-fun-with-html-video-and-progress\/\">customizing the <code>&lt;progress&gt;<\/code> element<\/a> to see just how difficult it is to style controls. What that generally leads to is a decision between accepting the browser&#8217;s default styles or a major lift to reset and recreate them from scratch.<\/p>\n\n\n\n<p>Here&#8217;s what it usually takes to get a custom <code>&lt;progress&gt;<\/code> color:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PomMMEO\" src=\"\/\/codepen.io\/anon\/embed\/PomMMEO?height=575&amp;theme-id=1&amp;slug-hash=PomMMEO&amp;default-tab=css,result\" height=\"575\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PomMMEO\" title=\"CodePen Embed PomMMEO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><code>accent-color<\/code> allows us to change the color used in form controls with just one line of CSS:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwVXzqW\" src=\"\/\/codepen.io\/anon\/embed\/RwVXzqW?height=450&amp;theme-id=1&amp;slug-hash=RwVXzqW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwVXzqW\" title=\"CodePen Embed RwVXzqW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"it-works-with-specific-form-controls\">It works with specific form controls<\/h3>\n\n\n<p>Before you go off adding accent colors to all the things, it&#8217;s worth noting that four specific form controls support the <code>accent-color<\/code> property:<\/p>\n\n\n\n<ul><li>checkboxes (<code>&lt;input type=\"checkbox\"&gt;<\/code>)<\/li><li>radio buttons (<code>&lt;input type=\"radio\"&gt;<\/code>)<\/li><li>range (<code>&lt;input type=\"range\"&gt;<\/code>)<\/li><li>progress (<code>&lt;progress&gt;<\/code>)<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvewwXL\" src=\"\/\/codepen.io\/anon\/embed\/wvewwXL?height=650&amp;theme-id=1&amp;slug-hash=wvewwXL&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvewwXL\" title=\"CodePen Embed wvewwXL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-works-with-preferred-color-schemes\">It works with preferred color schemes<\/h3>\n\n\n<p>The <code>accent-color<\/code> property respects color schemes. If a user has their preferred color scheme set to, say, light in their OS settings then the browser has to evaluate the <code>accent-color<\/code> value and determine an appropriate UI color for it. This way, we&#8217;re assured an accessible color contrast between the browser&#8217;s UI and the accent. There&#8217;s no putting up with a light accent color that sits against light form control UI.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?resize=239%2C150&#038;ssl=1\" alt=\"\" class=\"wp-image-350380\" width=\"239\" height=\"150\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?w=956&amp;ssl=1 956w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/radio-buttons-accent-color-ui.jpg?resize=768%2C482&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Each browser has its own way of calculating what color to use. <a href=\"https:\/\/accent-color.glitch.me\" rel=\"noopener\">This demo on Glitch<\/a> shows a series of checkbox controls with various accent colors. View it in a browser that <a href=\"#browser-support\">supports<\/a> <code>accent-color<\/code> to see how that browser pairs UI color with different accent colors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1664\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=1600%2C1664&#038;ssl=1\" alt=\"\" class=\"wp-image-350377\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=288%2C300&amp;ssl=1 288w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=985%2C1024&amp;ssl=1 985w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=768%2C799&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=1477%2C1536&amp;ssl=1 1477w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/DJhB56n10Eh8O29RsRdE.webp?resize=1000%2C1040&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Chrome&#8217;s color algorithm, left, compared to Firefox (Credit: <a href=\"https:\/\/accent-color.glitch.me\/\" rel=\"noopener\">web.dev<\/a>)<\/figcaption><\/figure>\n\n\n\n<p>And, if we have an accent color that we love but it just ain&#8217;t working with the browser&#8217;s choice of UI color, we can reach for the <code>color-scheme<\/code> property to override it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdmNNXw\" src=\"\/\/codepen.io\/anon\/embed\/mdmNNXw?height=1050&amp;theme-id=1&amp;slug-hash=mdmNNXw&amp;default-tab=result\" height=\"1050\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdmNNXw\" title=\"CodePen Embed mdmNNXw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Buuuuuut,<\/em> you might not wanna question the browser&#8217;s choice even if it ends up a little inconsistent between browsers. That&#8217;s a lot to juggle and you might do more harm to the UI&#8217;s accessibility than good.<\/p>\n\n\n\n<p class=\"is-style-explanation\">The browser will not override an <code>accent-color<\/code> in dark mode <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/#handling-user-agent-styles\">like it sometimes does in other situations<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-different-approach-is-required-for-other-form-controls\">A different approach is required for other form controls<\/h3>\n\n\n<p>Again, only a few form controls currently support accent colors. That means we still need to resort to traditional <s>hacks<\/s> approaches to styling other types of form controls. But, hey, Adam Argyle and Joey Arhar have your back with a <a href=\"https:\/\/web.dev\/accent-color\/#extra:-more-tinting\" rel=\"noopener\">nice snippet<\/a> that helps bring an accent color to other form controls as well as list markers, selection, and visible focus:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html { \n  --brand: hotpink;\n  scrollbar-color: hotpink Canvas;\n}\n\n:root { accent-color: var(--brand); }\n:focus-visible { outline-color: var(--brand); }\n::selection { background-color: var(--brand); }\n::marker { color: var(--brand); }\n\n:is(\n  ::-webkit-calendar-picker-indicator,\n  ::-webkit-clear-button,\n  ::-webkit-inner-spin-button, \n  ::-webkit-outer-spin-button\n) {\n  color: var(--brand);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">93<\/td><td class=\"has-text-align-center\" data-align=\"center\">92<\/td><td class=\"has-text-align-center\" data-align=\"center\">93<\/td><td class=\"has-text-align-center\" data-align=\"center\">15.4<\/td><td class=\"has-text-align-center\" data-align=\"center\">79<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">15.4<\/td><td class=\"has-text-align-center\" data-align=\"center\">104<\/td><td class=\"has-text-align-center\" data-align=\"center\">101<\/td><td class=\"has-text-align-center\" data-align=\"center\">104<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><figcaption><p>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_accent-color\" rel=\"noopener\">caniuse<\/a><br><\/p><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-video-accent-color-on-shoptalk\">Video: <code>accent-color<\/code> on ShopTalk<\/h3>\n\n\n<p>Chris and Dave show off not just the basics of <code>accent-color<\/code>, but how it can be used to write leaner CSS, account for color schemes, and even some tricks that would have been difficult to pull off without it.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"accent-color\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/F17DzJYysWM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n<ul><li><a href=\"https:\/\/web.dev\/accent-color\/\" rel=\"noopener\">CSS accent-color<\/a> (web.dev)<\/li><li><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/5187\" rel=\"noopener\">CSSWG Pull Request #5187<\/a> (GitHub)<\/li><li><a href=\"https:\/\/chromestatus.com\/feature\/4752739957473280\" rel=\"noopener\">accent-color CSS property<\/a> (Chrome Platform Status)<\/li><li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1705605\" rel=\"noopener\">Firefox Bug Ticket #1705605<\/a> (Mozilla Bugzilla)<\/li><li><a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=227587\" rel=\"noopener\">Safari Bug Ticket #227587<\/a> (Safari Bugzilla)<\/li><li><a href=\"https:\/\/lists.webkit.org\/pipermail\/webkit-dev\/2021-June\/031885.html\" rel=\"noopener\">Request for position: accent-color CSS property<\/a> (Chromium message to Safari)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser&#8217;s default styles with a custom color value. accent-color is defined in CSS Basic User Interface Module Level 4, which is currently in Working Draft. That means the details are still a work in progress and could [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":300990,"parent":13712,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":376465,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","url_meta":{"origin":350365,"position":0},"title":"color-scheme","date":"January 27, 2023","format":false,"excerpt":"You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have \"dark\" and \"light\" color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling. :root { color-scheme: light\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6490,"url":"https:\/\/css-tricks.com\/snippets\/html\/glyphs\/","url_meta":{"origin":350365,"position":1},"title":"Glyphs","date":"May 29, 2010","format":false,"excerpt":"Special Characters &quot; &#34; \" quotation mark u+0022 ISOnum p:before { content:\"\\0022\"; } alert(\"\\42\") &amp; &#38; & ampersand u+0026 ISOnum p:before { content:\"\\0026\"; } alert(\"\\46\") &lt; &#60; < less-than sign u+003C ISOnum p:before { content:\"\\003c\"; } alert(\"\\74\"); &gt; &#62; > greater-than sign u+003E ISOnum p:before { content:\"\\003e\"; } alert(\"\\76\"); Latin-1\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259152,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-color\/","url_meta":{"origin":350365,"position":2},"title":"caret-color","date":"August 18, 2017","format":false,"excerpt":"The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like: input, textarea, [contenteditable] { caret-color: red; } The color of the caret generally matches the color of the text, but this property allows you to change those\u2026","rel":"","context":"In \"caret-color\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3702,"url":"https:\/\/css-tricks.com\/snippets\/css\/browser-specific-hacks\/","url_meta":{"origin":350365,"position":3},"title":"Browser Specific Hacks","date":"September 3, 2009","format":false,"excerpt":"\/***** Selector Hacks ******\/ \/* IE6 and below *\/ * html #uno { color: red } \/* IE7 *\/ *:first-child+html #dos { color: red } \/* IE7, FF, Saf, Opera *\/ html>body #tres { color: red } \/* IE8, FF, Saf, Opera (Everything but IE 6,7) *\/ html>\/**\/body #cuatro {\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3342,"url":"https:\/\/css-tricks.com\/snippets\/css\/change-text-selection-color\/","url_meta":{"origin":350365,"position":4},"title":"Change Text Selection Color","date":"August 10, 2009","format":false,"excerpt":"::selection { background-color: #FFA; color: #000; } (More info)","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":285700,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-color\/","url_meta":{"origin":350365,"position":5},"title":"scrollbar-color","date":"April 2, 2019","format":false,"excerpt":"The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group's Scrollbars Module Level 1 draft, which is still a work in progress as of this writing. Prior to scrollbar-color, developers had no standard way to\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350365"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365\/revisions"}],"predecessor-version":[{"id":372901,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350365\/revisions\/372901"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350365"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}