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%);

--

--

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