Managing color variables in front-end project

In every frontend code we use a lot of colours in scss.

First bit of optimisation is to put all the colour variables in a separate file, so that we can get all the colours used in our project at one place

Now second bit is about giving proper names to these colour variable so that we get an idea just by looking at the name.

So I consider two types of colours

1. gray colors (gray, black and white)
2. non-gray colors (rest other colors)

Below is an approach that I am following and finding helpful for gray colours

1. use rgb for black, gray and white colours and their name should follow an approach like if the colour is rgb(24,24,24) then it’s name would be $black-24
2. I put threshold on black till $black-80, further numbers would be gray and threshold on gray till $gray-223, further colour variables would be $white-224
3. if any color has to be used with opacity, -a<% of opacity> immediately after name like $black-a20, here 20 signifies, 20% opacity

/* --------------------- */
/** black colors till 80 */
$black-24: rgb(24, 24, 24);
$black-48: rgb(48, 48, 48);
$black-72: rgb(72, 72, 72);
$black-80: rgb(80, 80, 80);
$black-a20: rgba(0, 0, 0, 0.2);
$black-a20-72: rgba(72, 72, 72, 0.2);
/* --------------------- */
/** gray colors from 80 - 160 */
$gray-96: rgb(96, 96, 96);
$gray-112: rgb(112, 112, 112);
$gray-128: rgb(128, 128, 128);
$gray-136: rgb(136, 136, 136);
$gray-156: rgb(156, 156, 156);
/* --------------------- */
/** gray colors from 160 - 224 */
$gray-164: rgb(164, 164, 164);
$gray-184: rgb(184, 184, 184);
$gray-192: rgb(192, 192, 192);
$gray-208: rgb(208, 208, 208);
/* --------------------- */
/** white colors from 224 */
$white-224: rgb(224, 224, 224);
$white-240: rgb(240, 240, 240);
$white-250: rgb(250, 250, 250);

Approach for non-gray colors

I use hsl for colours other than gray, checkout this link for the reason

Now coming to naming these variable, following are the rules I useto put the name of the color.

1. for a color hsl(346, 77%, 44%) the name would be $red-346 because

• it looks red
• it’s degree is 346

2. for a color hsl(346, 76%, 10%) the name would be $brown-346 because

• it looks brown
• it’s degree is 346

3. for a color hsl(346, 76%, 60%) the name would be $red-346-2 because

• it looks red
• it’s degree is 346
• -2 because I already have one color with $red-346

4. for a color hsla(346, 76%, 60%,.2) the name would be $lightBrown-a20-346 because

• it looks lightBrownish
• it’s opacity is 20%
• it’s degree is 346

/** Blue colors*/
$cyan-189: hsla(189, 71%, 49%, 0.051);
$blue-190: hsl(190, 71%, 40%);
$blue-190-2: lighten($blue, 20%);
$cyan-191: hsl(191, 67%, 87%);
$blue-195: hsl(195, 66%, 40%);
$blue-195-2: hsl(195, 63%, 65%);
$blue-195-3: hsl(195, 100%, 44%);
$blue-207: hsl(207, 100%, 40%);
$blue-232: hsl(232, 48%, 24%);
$purple-243: hsl(243, 49%, 68%);
/* Green colors---------------------------------*/
$green-89: hsl(89, 84%, 39%);
$lightGreen-120: hsl(120, 68%, 67%);
$green-123: hsl(123, 38%, 57%);
$green-146: hsl(146, 58%, 54%);
/* Red colors------------------------------------*/
$lightBrown-a20-169: rgba(169, 137, 144, 0.2);
$red-240: rgb(240, 64, 51);
$red-13: hsl(13, 96%, 53%);
$pink-13: rgb(254, 220, 210);
$orange-30: hsl(30, 100%, 56%);

What do you think about these strategy, please let me know if you have any comments or suggestions!