Managing color variables in front-end project

  1. gray colors (gray, black and white)
  2. non-gray colors (rest other colors)
  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);
  1. for a color hsl(346, 77%, 44%) the name would be $red-346 because
  • it looks red
  • it’s degree is 346
  • it looks brown
  • it’s degree is 346
  • it looks red
  • it’s degree is 346
  • -2 because I already have one color with $red-346
  • 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%);

--

--

--

I love learning

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Switching to dev.to

How to deploy React App to Github pages in Five steps!

🚀 Unleash the Power of DI Functions in Angular

Winston: A Better Way To Log

My Top React Interview Questions

10 Tips to Make Your Node.js Web App Faster

All the fundamental React.js concepts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshay Jain

Akshay Jain

I love learning

More from Medium

SASS — Syntactically Awesome StyleSheets

Let’s Talk CSS and Responsive Design

CSS Box Model Explained

CSS Box model,Padding ,Margin,Borders,Content

Flexbox vs Grid: when and where to use.