Grow your CSS skills. Land your dream job.

Sass color idea module

  • # October 27, 2013 at 6:54 am

    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%);
    
    # October 27, 2013 at 9:14 am

    Nice

    # October 29, 2013 at 1:28 pm

    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.

    NIX
    # October 29, 2013 at 8:55 pm

    I agree with @Alen. I don’t think it would make me code faster. I started out as a designer so I pretty much know hex codes and their abreviations like the back of my hand.

    Besides, the biggest thing that holds me back as far as coding speed is making decisions on the overall look. This might make me even slower! Ha ha.

    # October 31, 2013 at 11:53 am

    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;
    
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".