Sass color idea module

[Mateusz Rybin]

Hey guys. I just have done a cool color module to help me code faster. Sharing is caring right :)))

It works like this:
1. You choose five colors you will use on your website. (I choose to have three plates to choose from)
2. When you want to color your element you just typ:

$c11: for first color on plate 1.
$c12: for the second color on plate 1.
$c23: for the third color on plate 2.

The point is to easily change color by just switching a nr.
– $c11 naa looks bad.
– $c12 maybe better.
– $c13 this looks great.

1. Then when you know what color it is you can make it darker and lighter with just a new number.

– $c13 naa little too dark.
– $c131 maybe a little more.
– $c134 yes!

So $c [c stands for color] +** 1** [1,2,3 stand for palette] + 2 [1,2,3,4,5 stands for color in palette] + 1 [1,2,3… or -1,-2,-3 stands for how dark or lighten]

If you have any ideas how to improve it, don’t be shy!

//pallet 1
$c11 : #779CC6;
$c12 : #000000;
$c13 : #000000;
$c14 : #000000;
$c15 : #000000;

//pallet 2
$c21 : #000000;
$c22 : #000000;
$c23 : #000000;
$c24 : #000000;
$c25 : #000000;

//pallet 3
$c31 : #000000;
$c32 : #000000;
$c33 : #000000;
$c34 : #000000;
$c35 : #000000;

//lighten c11
$c111 : lighten($c11, 3%);
$c112 : lighten($c11, 6%);
$c113 : lighten($c11, 9%);
$c114 : lighten($c11, 11%);
$c115 : lighten($c11, 16%);
$c116 : lighten($c11, 19%);
$c117 : lighten($c11, 25%);
$c118 : lighten($c11, 31%);
$c119 : lighten($c11, 41%);

//lighten c12
$c121 : lighten($c12, 3%);
$c122 : lighten($c12, 6%);
$c123 : lighten($c12, 9%);
$c124 : lighten($c12, 11%);
$c125 : lighten($c12, 16%);
$c126 : lighten($c12, 19%);
$c127 : lighten($c12, 25%);
$c128 : lighten($c12, 31%);
$c129 : lighten($c12, 41%);

//lighten c13
$c131 : lighten($c13, 3%);
$c132 : lighten($c13, 6%);
$c133 : lighten($c13, 9%);
$c134 : lighten($c13, 11%);
$c135 : lighten($c13, 16%);
$c136 : lighten($c13, 19%);
$c137 : lighten($c13, 25%);
$c138 : lighten($c13, 31%);
$c139 : lighten($c13, 41%);

//lighten c14
$c141 : lighten($c14, 3%);
$c142 : lighten($c14, 6%);
$c143 : lighten($c14, 9%);
$c144 : lighten($c14, 11%);
$c145 : lighten($c14, 16%);
$c146 : lighten($c14, 19%);
$c147 : lighten($c14, 25%);
$c148 : lighten($c14, 31%);
$c149 : lighten($c14, 41%);

//lighten c15
$c151 : lighten($c15, 3%);
$c152 : lighten($c15, 6%);
$c153 : lighten($c15, 9%);
$c154 : lighten($c15, 11%);
$c155 : lighten($c15, 16%);
$c156 : lighten($c15, 19%);
$c157 : lighten($c15, 25%);
$c158 : lighten($c15, 31%);
$c159 : lighten($c15, 41%);

//======================

//lighten c21
$c211 : lighten($c21, 3%);
$c212 : lighten($c21, 6%);
$c213 : lighten($c21, 9%);
$c214 : lighten($c21, 11%);
$c215 : lighten($c21, 16%);
$c216 : lighten($c21, 19%);
$c217 : lighten($c21, 25%);
$c218 : lighten($c21, 31%);
$c219 : lighten($c21, 41%);

//lighten c22
$c221 : lighten($c22, 3%);
$c222 : lighten($c22, 6%);
$c223 : lighten($c22, 9%);
$c224 : lighten($c22, 11%);
$c225 : lighten($c22, 16%);
$c226 : lighten($c22, 19%);
$c227 : lighten($c22, 25%);
$c228 : lighten($c22, 31%);
$c229 : lighten($c22, 41%);

//lighten c23
$c231 : lighten($c23, 3%);
$c232 : lighten($c23, 6%);
$c233 : lighten($c23, 9%);
$c234 : lighten($c23, 11%);
$c235 : lighten($c23, 16%);
$c236 : lighten($c23, 19%);
$c237 : lighten($c23, 25%);
$c238 : lighten($c23, 31%);
$c239 : lighten($c23, 41%);

//lighten c24
$c241 : lighten($c24, 3%);
$c242 : lighten($c24, 6%);
$c243 : lighten($c24, 9%);
$c244 : lighten($c24, 11%);
$c245 : lighten($c24, 16%);
$c246 : lighten($c24, 19%);
$c247 : lighten($c24, 25%);
$c248 : lighten($c24, 31%);
$c249 : lighten($c24, 41%);

//lighten c25
$c251 : lighten($c25, 3%);
$c252 : lighten($c25, 6%);
$c253 : lighten($c25, 9%);
$c254 : lighten($c25, 11%);
$c255 : lighten($c25, 16%);
$c256 : lighten($c25, 19%);
$c257 : lighten($c25, 25%);
$c258 : lighten($c25, 31%);
$c259 : lighten($c25, 41%);

//=========================

//lighten c31
$c311 : lighten($c31, 3%);
$c312 : lighten($c31, 6%);
$c313 : lighten($c31, 9%);
$c314 : lighten($c31, 11%);
$c315 : lighten($c31, 16%);
$c316 : lighten($c31, 19%);
$c317 : lighten($c31, 25%);
$c318 : lighten($c31, 31%);
$c319 : lighten($c31, 41%);

//lighten c32
$c321 : lighten($c32, 3%);
$c322 : lighten($c32, 6%);
$c323 : lighten($c32, 9%);
$c324 : lighten($c32, 11%);
$c325 : lighten($c32, 16%);
$c326 : lighten($c32, 19%);
$c327 : lighten($c32, 25%);
$c328 : lighten($c32, 31%);
$c329 : lighten($c32, 41%);

//lighten c33
$c331 : lighten($c33, 3%);
$c332 : lighten($c33, 6%);
$c333 : lighten($c33, 9%);
$c334 : lighten($c33, 11%);
$c335 : lighten($c33, 16%);
$c336 : lighten($c33, 19%);
$c337 : lighten($c33, 25%);
$c338 : lighten($c33, 31%);
$c339 : lighten($c33, 41%);

//lighten c34
$c341 : lighten($c34, 3%);
$c342 : lighten($c34, 6%);
$c343 : lighten($c34, 9%);
$c344 : lighten($c34, 11%);
$c345 : lighten($c34, 16%);
$c346 : lighten($c34, 19%);
$c347 : lighten($c34, 25%);
$c348 : lighten($c34, 31%);
$c349 : lighten($c34, 41%);

//lighten c35
$c351 : lighten($c35, 3%);
$c352 : lighten($c35, 6%);
$c353 : lighten($c35, 9%);
$c354 : lighten($c35, 11%);
$c355 : lighten($c35, 16%);
$c356 : lighten($c35, 19%);
$c357 : lighten($c35, 25%);
$c358 : lighten($c35, 31%);
$c359 : lighten($c35, 41%);

//:::::::::::::::::::::::::

//darken c11
$c11-1 : darken($c11, 3%);
$c11-2 : darken($c11, 6%);
$c11-3 : darken($c11, 9%);
$c11-4 : darken($c11, 11%);
$c11-5 : darken($c11, 16%);
$c11-6 : darken($c11, 19%);
$c11-7 : darken($c11, 25%);
$c11-8 : darken($c11, 31%);
$c11-9 : darken($c11, 41%);

//darken c12
$c12-1 : darken($c12, 3%);
$c12-2 : darken($c12, 6%);
$c12-3 : darken($c12, 9%);
$c12-4 : darken($c12, 11%);
$c12-5 : darken($c12, 16%);
$c12-6 : darken($c12, 19%);
$c12-7 : darken($c12, 25%);
$c12-8 : darken($c12, 31%);
$c12-9 : darken($c12, 41%);

//darken c13
$c13-1 : darken($c13, 3%);
$c13-2 : darken($c13, 6%);
$c13-3 : darken($c13, 9%);
$c13-4 : darken($c13, 11%);
$c13-5 : darken($c13, 16%);
$c13-6 : darken($c13, 19%);
$c13-7 : darken($c13, 25%);
$c13-8 : darken($c13, 31%);
$c13-9 : darken($c13, 41%);

//darken c14
$c14-1 : darken($c14, 3%);
$c14-2 : darken($c14, 6%);
$c14-3 : darken($c14, 9%);
$c14-4 : darken($c14, 11%);
$c14-5 : darken($c14, 16%);
$c14-6 : darken($c14, 19%);
$c14-7 : darken($c14, 25%);
$c14-8 : darken($c14, 31%);
$c14-9 : darken($c14, 41%);

//darken c15
$c15-1 : darken($c15, 3%);
$c15-2 : darken($c15, 6%);
$c15-3 : darken($c15, 9%);
$c15-4 : darken($c15, 11%);
$c15-5 : darken($c15, 16%);
$c15-6 : darken($c15, 19%);
$c15-7 : darken($c15, 25%);
$c15-8 : darken($c15, 31%);
$c15-9 : darken($c15, 41%);

//=======================

//darken c21
$c21-1 : darken($c21, 3%);
$c21-2 : darken($c21, 6%);
$c21-3 : darken($c21, 9%);
$c21-4 : darken($c21, 11%);
$c21-5 : darken($c21, 16%);
$c21-6 : darken($c21, 19%);
$c21-7 : darken($c21, 25%);
$c21-8 : darken($c21, 31%);
$c21-9 : darken($c21, 41%);

//darken c22
$c22-1 : darken($c22, 3%);
$c22-2 : darken($c22, 6%);
$c22-3 : darken($c22, 9%);
$c22-4 : darken($c22, 11%);
$c22-5 : darken($c22, 16%);
$c22-6 : darken($c22, 19%);
$c22-7 : darken($c22, 25%);
$c22-8 : darken($c22, 31%);
$c22-9 : darken($c22, 41%);

//darken c23
$c23-1 : darken($c23, 3%);
$c23-2 : darken($c23, 6%);
$c23-3 : darken($c23, 9%);
$c23-4 : darken($c23, 11%);
$c23-5 : darken($c23, 16%);
$c23-6 : darken($c23, 19%);
$c23-7 : darken($c23, 25%);
$c23-8 : darken($c23, 31%);
$c23-9 : darken($c23, 41%);

//darken c24
$c24-1 : darken($c24, 3%);
$c24-2 : darken($c24, 6%);
$c24-3 : darken($c24, 9%);
$c24-4 : darken($c24, 11%);
$c24-5 : darken($c24, 16%);
$c24-6 : darken($c24, 19%);
$c24-7 : darken($c24, 25%);
$c24-8 : darken($c24, 31%);
$c24-9 : darken($c24, 41%);

//darken c25
$c25-1 : darken($c25, 3%);
$c25-2 : darken($c25, 6%);
$c25-3 : darken($c25, 9%);
$c25-4 : darken($c25, 11%);
$c25-5 : darken($c25, 16%);
$c25-6 : darken($c25, 19%);
$c25-7 : darken($c25, 25%);
$c25-8 : darken($c25, 31%);
$c25-9 : darken($c25, 41%);

//=========================

//darken c31
$c31-1 : darken($c31, 3%);
$c31-2 : darken($c31, 6%);
$c31-3 : darken($c31, 9%);
$c31-4 : darken($c31, 11%);
$c31-5 : darken($c31, 16%);
$c31-6 : darken($c31, 19%);
$c31-7 : darken($c31, 25%);
$c31-8 : darken($c31, 31%);
$c31-9 : darken($c31, 41%);

//darken c32
$c32-1 : darken($c32, 3%);
$c32-2 : darken($c32, 6%);
$c32-3 : darken($c32, 9%);
$c32-4 : darken($c32, 11%);
$c32-5 : darken($c32, 16%);
$c32-6 : darken($c32, 19%);
$c32-7 : darken($c32, 25%);
$c32-8 : darken($c32, 31%);
$c32-9 : darken($c32, 41%);

//darken c33
$c33-1 : darken($c33, 3%);
$c33-2 : darken($c33, 6%);
$c33-3 : darken($c33, 9%);
$c33-4 : darken($c33, 11%);
$c33-5 : darken($c33, 16%);
$c33-6 : darken($c33, 19%);
$c33-7 : darken($c33, 25%);
$c33-8 : darken($c33, 31%);
$c33-9 : darken($c33, 41%);

//darken c34
$c34-1 : darken($c34, 3%);
$c34-2 : darken($c34, 6%);
$c34-3 : darken($c34, 9%);
$c34-4 : darken($c34, 11%);
$c34-5 : darken($c34, 16%);
$c34-6 : darken($c34, 19%);
$c34-7 : darken($c34, 25%);
$c34-8 : darken($c34, 31%);
$c34-9 : darken($c34, 41%);

//darken c35
$c35-1 : darken($c35, 3%);
$c35-2 : darken($c35, 6%);
$c35-3 : darken($c35, 9%);
$c35-4 : darken($c35, 11%);
$c35-5 : darken($c35, 16%);
$c35-6 : darken($c35, 19%);
$c35-7 : darken($c35, 25%);
$c35-8 : darken($c35, 31%);
$c35-9 : darken($c35, 41%);

[magicspon]

Nice

[Alen]

I don’t see how this would help me code faster. I mean how often do you need to change brand colors. Just by looking at the code couple of months down the line will you know what color this variable is $c345 or will you have to hunt trough your variable declarations and go up the chain. Another thing is that you are now introducing color inconsistencies throughout your brand.

I think this would be cool as a stand alone project where you’re using all the variables to create something presentational, I would not however use this for my brand colors.

[Josh]

I tend to use a similar concept, but with clearly identifiable names instead of colors. Where I work, Branding is very picky about color usage, and there a lot of colors in our palette. It looks something like this (using Bootstrap):

// Grays
// -------------------------

$gray-darker:              lighten(#000, 13.5%) !default; // #222
$gray-dark:                lighten(#000, 20%) !default;   // #333
$gray:                     lighten(#000, 33.5%) !default; // #555
$gray-light:               lighten(#000, 60%) !default;   // #999
$gray-lighter:             lighten(#000, 93.5%) !default; // #eee

// Brand colors
// -------------------------

// Primary Colors
$brand-red:                #da291c;
$brand-gray:               #63666a;

// Light Primary Colors
$brand-red-light:          lighten($brand-red, 10%);
$brand-gray-light:         lighten($brand-gray, 10%);

// Dark Primary Colors
$brand-red-dark:           darken($brand-red, 10%);
$brand-gray-dark:          darken($brand-gray, 10%);

// Secondary Colors
$brand-base-purple:        #614b79;
$brand-purple:             lighten($brand-base-purple, 5%);
$brand-green:              #789d4a;
$brand-blue:               #407ec9;
$brand-burnt-orange:       #cb6015;
$brand-orange:             #d3710f;
$brand-base-nectarine:     #f1b434;
$brand-nectarine:          #d9ac4c; // 75% saturation
$brand-pea-green:          #b7bf10;

// Light Secondary Colors (by 10%)
$brand-purple-light:       lighten($brand-purple, 10%);
$brand-green-light:        lighten($brand-green, 10%);
$brand-blue-light:         lighten($brand-blue, 10%);
$brand-orange-light:       lighten($brand-orange, 10%);
$brand-nectarine-light:    lighten($brand-nectarine, 10%);

// Dark Secondary Colors (by 10%)
$brand-purple-dark:        darken($brand-purple, 10%);
$brand-green-dark:         darken($brand-green, 10%);
$brand-blue-dark:          darken($brand-blue, 10%);
$brand-orange-dark:        darken($brand-orange, 10%);
$brand-nectarine-dark:     darken($brand-nectarine, 10%);

// Tertiary Colors (Neutral Palette)
$brand-cream:              #d2ce9e;
$brand-tan:                #b3a369;
$brand-cool-gray:          #d0d0ce;
$brand-light-gray:         #bac5b9;
$brand-medium-gray:        #776e64;

// Light tertiary Colors
$brand-cream-light:        lighten($brand-cream, 10%);
$brand-tan-light:          lighten($brand-tan, 10%);
$brand-medium-gray-light:  lighten($brand-medium-gray, 10%);
$brand-cool-gray-light:    lighten($brand-cool-gray, 10%);

// Dark Tertiary Colors
$brand-cream-dark:         darken($brand-cream, 10%);
$brand-tan-dark:           darken($brand-tan, 10%);
$brand-medium-gray-dark:   darken($brand-medium-gray, 10%);
$brand-cool-gray-dark:     darken($brand-cool-gray, 10%);


// Digital Colors
$brand-digital-orange:     #ed9e00;
$brand-digital-green:      #b9c704;
$brand-yellow:             #f7e06e;
$brand-yellow-dark:        darken($brand-yellow, 10%);
$brand-yellow-light:       lighten($brand-yellow, 10%);

// Text Colors
$dark-text:                #363636;
$border-dark:              #363636;
$border-medium:            #cdcdcd;
$border-light:             #e5e5e5;

// Button, table, default colors
$brand-primary:            $brand-blue !default;
$brand-success:            $brand-green !default;
$brand-warning:            $brand-yellow !default;
$brand-danger:             $brand-red !default;
$brand-info:               $brand-blue-light !default;

[Author]

Posts