{"id":278559,"date":"2018-12-07T08:24:24","date_gmt":"2018-12-07T15:24:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=278559"},"modified":"2021-12-03T14:51:06","modified_gmt":"2021-12-03T22:51:06","slug":"what-do-you-name-color-variables","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/what-do-you-name-color-variables\/","title":{"rendered":"What do you name color variables?"},"content":{"rendered":"<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">What naming scheme do you use for color variables?<br \/>\nHave you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?<br \/>\nI&#8217;ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. &#x2639;&#xfe0f;<\/p>\n<p>\u2014 Lea Verou (@LeaVerou) <a href=\"https:\/\/twitter.com\/LeaVerou\/status\/1051432487971373056?ref_src=twsrc%5Etfw\" rel=\"noopener\">October 14, 2018<\/a><\/p><\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>I remember the very first time I tried Sass on a project. The <em>first thing<\/em> I wanted to do was variablize my colors. From my naming-things-in-HTML skillz, I knew to avoid classes like <code>.header-blue-left-bottom<\/code> because the color and position of that element might change. It&#8217;s better for the to reflect it <em>what it is<\/em> than <em>what it looks like<\/em>.<\/p>\n<p><!--more--><\/p>\n<p>So, I tried to make my colors <em>semantic<\/em>, in a sense \u2014 what they <em>represent<\/em> not what they literally <em>are<\/em>:<\/p>\n<pre><code class=\"language-scss\">$mainBrandColor: #F060D6;\n$secondaryFocus: #4C9FEB;\n$fadedHighlight: #F1F3F4;<\/code><\/pre>\n<p>But I found that I <em>absolutely never remembered them<\/em> and had to constantly refer to where I defined them in order to use them. Later, in a &#8220;screw it&#8221; moment, I named colors more like&#8230;<\/p>\n<pre><code class=\"language-scss\">$orange: #F060D6;\n$red: #BB532E;\n$blue: #4C9FEB;\n\n$gray-1: #eee;\n$gray-2: #ccc;\n$gray-3: #555;<\/code><\/pre>\n<p>I found that to be much more intuitive with little if any negative side effects. After all, this isn&#8217;t crossing the HTML-CSS boundary here; this is all within CSS and developer-only-facing, which puts more of a narrow scope on the problem.<\/p>\n<p>In a similar fashion, I&#8217;ve tried keeping colors within a Sass map, like:<\/p>\n<pre><code class=\"language-scss\">$colors: (\n  light: #ccc,\n  dark: #333\n);<\/code><\/pre>\n<p>But the only vague goal there was to clean up the global namespace, which probably isn&#8217;t worth the hassle of needing to <code>map-get<\/code> all the time. Namespacing like <code>$-c-orange<\/code> is probably an easier approach if you need to do anything at all.<\/p>\n<p>I&#8217;ve largely stuck with that just-use-color-names approach today in Sass. As the shift toward CSS custom properties happens, I think having a <code>--c-orange<\/code> and <code>--c-gray-5<\/code> is similarly appropriate.<\/p>\n<pre><code class=\"language-css\">:root {\n  -c-orange: #F060D6;\n  -c-red: #BB532E;\n  -c-blue: #4C9FEB;\n\n  -c-gray-1: #eee;\n  -c-gray-2: #ccc;\n  -c-gray-3: #555;\n}<\/code><\/pre>\n<p>You could get a little more specific with those names with staying abstract, like <a href=\"https:\/\/twitter.com\/marcusortense\/status\/1051501276486356992\" rel=\"noopener\">Marcus Ortense says<\/a>:<\/p>\n<pre><code class=\"language-scss\">$color-primary:\n$color-primary-dark:\n$color-primary-light: <\/code><\/pre>\n<p>And <a href=\"https:\/\/twitter.com\/mikestreety\/status\/1051828032510550016\" rel=\"noopener\">variations on each base<\/a> like Mike Street says:<\/p>\n<pre><code class=\"language-scss\">$primary:\n$primaryLight: \n$primaryDark:\n\n$secondary:\n$secondaryLight:\n$secondaryDark:\n\n$neutralDarker:\n$neutralDark:\n$neutral:\n$neutralLight:\n$neutralLighter: \n$neutralLightest: <\/code><\/pre>\n<p>Silvestar Bistrovi\u0107 recently wrote about <a href=\"https:\/\/www.silvestarbistrovic.from.hr\/articles\/alpha-beta-gamma-naming-convention\/\" rel=\"noopener\">using abstract Greek numbering<\/a>:<\/p>\n<pre><code class=\"language-scss\">$color-alpha: #12e09f;\n$color-beta: #e01258;\n$color-gamma: #f5f5f5;\n$color-psi: #1f1f1f;\n$color-omega: #fff;<\/code><\/pre>\n<p>I&#8217;ve used that kind of thing for media query breakpoints before, as the numbering seems to make sense there (i.e. low numbers are smaller screens, big numbers are bigger screens). I could also see that being nice for tints or shades of the same color, but then why not regular numbers?<\/p>\n<p>Another approach I&#8217;ve often seen is to combine named colors with abstracted names. <a href=\"http:\/\/geoffgraham.me\/naming-sass-color-variables\/\" rel=\"noopener\">Geoff does that<\/a> and <a href=\"https:\/\/twitter.com\/johncarroll30\/status\/1051439159251017728\" rel=\"noopener\">John Carroll lists<\/a> that here:<\/p>\n<pre><code class=\"language-scss\">$color-danube: #668DD1;\n$color-cornflower: $6195ED;\n$color-east-bay: $3A4D6E;\n\n\/\/ theme1.scss\n$color-alpha: $color-danube;\n$color-bravo: $color-cornflower;\n$color-charlie: $color-east-bay;\n\n\/\/ theme2.scss\n$color-alpha: $color-cornflower;\n$color-bravo: $color-danube;\n$color-charlie: $color-east-bay;<\/code><\/pre>\n<p>That can get as verbose as you need it to, even <a href=\"https:\/\/twitter.com\/laaltoofan\/status\/1051439412351885312\" rel=\"noopener\">adding variations as you call from the palette<\/a>.<\/p>\n<pre><code>$table-row-background: lighten($color-background, 10%);<\/code><\/pre>\n<p><a href=\"https:\/\/twitter.com\/StuRobson\/status\/1051451912707563525\" rel=\"noopener\">Stuart Robson even gets a bit BEM-y<\/a> with the names, including the namespace:<\/p>\n<pre><code class=\"language-scss\">$ns-color__blue\u2014dark: rgb(25,25,112); \n$ns-brand__color\u2014primary: $ns-color__blue\u2014dark;\n\n\/\/ component.scss\n$ns-component__color\u2014text: $ns-brand__color\u2014primary;<\/code><\/pre>\n<p><a href=\"https:\/\/material.io\/design\/color\/the-color-system.html#color-usage-palettes\" rel=\"noopener\">Material Design<\/a> uses values that are similar to <code>font-weight<\/code>! That means you&#8217;d end up with something like a base range plus alternates:<\/p>\n<pre><code class=\"language-scss\">$light-green-100:\n$light-green-200:\n$light-green-300:\n\/\/ etc\n$light-green-900:\n$light-green-A200:\n$light-green-A400:\n\n$deep-purple-100:\n$deep-purple-200:\n$deep-purple-300:\n\/\/ etc\n$deep-purple-A900:<\/code><\/pre>\n<figure id=\"post-279310\" class=\"align-none media-279310\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Screen-Shot-2018-11-21-at-5.36.18-AM.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>How might you pick names for colors? You might get a kick out of what to call a <em>sunny<\/em> yellow versus a <em>sunflower<\/em> yellow, or you might just want some help. Here&#8217;s <a href=\"http:\/\/chir.ag\/projects\/name-that-color\/#63E515\" rel=\"noopener\">one project<\/a> for that, and here&#8217;s another:<\/p>\n<p class=\"codepen\" data-height=\"387\" style=\"height: 387px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"gBLMPE\" data-default-tab=\"result\" data-user=\"maneeshc\" data-pen-title=\"Color Namer\">See the Pen <a href=\"https:\/\/codepen.io\/maneeshc\/pen\/gBLMPE\/\" rel=\"noopener\">Color Namer<\/a> by Maneesh (<a href=\"https:\/\/codepen.io\/maneeshc\" rel=\"noopener\">@maneeshc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>There is even <a href=\"https:\/\/github.com\/bertdida\/DeclareThatColor\" rel=\"noopener\">a Sublime Text plugin<\/a> for converting them (to whatever syntax you want):<\/p>\n<figure id=\"post-279309\" class=\"align-none media-279309\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/preview.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>And since we&#8217;re on the topic of naming:<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/working-towards-better-naming\/\">Working Towards Better Naming<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/naming-things-is-only-getting-harder\/\">Naming Things is Only Getting Harder<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/naming-media-queries\/\">Naming Media Queries<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent? I&#8217;ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. &#x2639;&#xfe0f; \u2014 Lea Verou (@LeaVerou) [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":279437,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"What do you name color variables?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[837,890],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Untitled_Artwork-scaled.jpg?fit=2560%2C1071&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Untitled_Artwork-scaled.jpg?fit=1024%2C429&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278559"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=278559"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278559\/revisions"}],"predecessor-version":[{"id":358430,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278559\/revisions\/358430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/279437"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=278559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=278559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=278559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}