Forums

  • # 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.

    # 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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag