


I’ve largely stuck with that just-use-color-names approach today in Sass. Namespacing like $-c-orange is probably an easier approach if you need to do anything at all. In a similar fashion, I’ve tried keeping colors within a Sass map, like: $colors: (īut the only vague goal there was to clean up the global namespace, which probably isn’t worth the hassle of needing to map-get all the time. The RYB Color Wheel The RYB (Red, Yellow, Blue) color wheel is used by painters, artists and designers for blending pigment colors. The 12 Main Colors of CYM: Read more about CMYK. After all, this isn’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. Secondary colors are created by mixing primary colors: Cyan and Magenta Blue Magenta and Yellow Red Yellow and Cyan Green. I found that to be much more intuitive with little if any negative side effects. Later, in a “screw it” moment, I named colors more like… $orange: #F060D6 So, I tried to make my colors semantic, in a sense - what they represent not what they literally are: $mainBrandColor: #F060D6 īut I found that I absolutely never remembered them and had to constantly refer to where I defined them in order to use them. It’s better for the to reflect it what it is than what it looks like. header-blue-left-bottom because the color and position of that element might change. From my naming-things-in-HTML skillz, I knew to avoid classes like. The first thing I wanted to do was variablize my colors.

I remember the very first time I tried Sass on a project. I’ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent? What naming scheme do you use for color variables?
