6

Organizing CSS Color Palettes

over 8 years ago from , Artist, Designer and Programmer

I’m still figuring our a sane color management strategy, but my top tip I’ve picked up along the way would have to be:

Pre-processor Variables

// Dark values $black = #272B37 $navy = #333847 $slate = #5D6478 $pewter = #737A8D // Light values $soft-gray = #F7F8FA $soft-slate = #E3EBF3 $soft-green = #C6ECE7 $soft-blue = #F8FBFE

I’ve tried various naming conventions, (e.g. $white, $offwhite-1, $offwhite-2, etc.) but pre-fixing descriptive names has proven my favorite so far, especially when combined with…

Color Functions

border 1px solid alpha( $slate, 30% )

I usually derive a color palette by manipulating the opacity of existing colors (in Photoshop, Sketch, etc.), so color functions seem to be a natural fit.

Taking It Further

It’s still a little wonky. Sometimes I find color function combinations that explode when their root color changes, and nesting color functions makes seems to make CSS less scannable.

Has anyone picked up some good CSS color palette management practices?

22 comments

  • Craig Coles, over 8 years ago (edited over 8 years ago )

    We have opted for using Sass maps to organise our colours.

    $palettes: ( gold: ( base: #c6a454, dark: #d6b462, light: #edd18d ) );

    Which can be then used as so:

    • background-color: palette(gold);
    • background-color: palette(gold, dark);
    • background-color: palette(gold, light);

    Erskine Design wrote an article about this approach, which is where our implementation came from.

    3 points
  • Simon CoudevilleSimon Coudeville, over 8 years ago (edited over 8 years ago )

    I very much like the hsl() function. It let's you take the hue of a color and manipulaite the saturation and the lightness. This way I create grays based on my primary colors.

    $alpha-ui-color: #1442cc;

    • $alpha-grey-color : hsl(hue($alpha-ui-color),5,20);
    • $beta-grey-color : hsl(hue($alpha-ui-color),5,30);
    • $gamma-grey-color : hsl(hue($alpha-ui-color),5,45);
    • ...
    3 points
  • Gavin JonesGavin Jones, over 8 years ago (edited over 8 years ago )

    I group things initially by the brand, taken from the guidelines/brand book. If they already have names there, I'll just use what's already been written down.

    This way If I need to add additional colours throughout a project, I've always got an at-a-glance view of anything I've included which isn't in the guidelines. After that it's just colour, opaque, light, med, dark

    • $brand-primary: #6a2d8a;
      • $brand-primary-dark: darken($brand-primary,10%);
        • ...
    • $brand-secondary: #02a99e;
      • $brand-secondary-light: lighten($brand-secondary,10%);
      • ...
    • $brand-grey-dark: #;
    • $brand-grey-medium: #;
    • $brand-grey-light: #;
    • ...
    • After that I just stick to:
      • $colour:
      • $colour-opaque:rgba()
      • $colour-light:#
      • $colour-medium: #
      • $colour-dark: #
    1 point
    • Matt SoriaMatt Soria, over 8 years ago

      I like combining this approach with the use of color-name variables, so if brand colors end up changing (for instance, if the value of blue is adjusted, or the designers switch the secondary color from green to yellow halfway through the project) I can just switch out the variable and keep the $brand variables consistent:

      // Color Variables $blue: #006EFF; $yellow: #FFF521;

      // Brand Colors $brand-primary: $blue; $brand-secondary: $yellow;

      I definitely like the use or darken and lighten for the dark/light variations!

      1 point
  • Jordan IsipJordan Isip, over 8 years ago (edited over 8 years ago )

    Lately I've been using something like this for each color in my color palette:

    • $navy-lightest
    • $navy-light
    • $navy
    • $navy-dark
    • $navy-darker
    • $navy-darkest

    While I could use Sass functions, I prefer using these variables to keep colors consistent throughout the app and not have to remember which percentage I used each time I call the function. Added benefit is that I can add these colors to a list in a live style guide so other devs know which colors are available.

    Google Material docs use something similar but number based (eg red-100) http://www.google.com/design/spec/style/color.html

    1 point
    • Julian LloydJulian Lloyd, over 8 years ago (edited over 8 years ago )

      I prefer using these variables to keep colors consistent throughout the app and not have to remember which percentage I used each time I call the function.

      I know what you mean. I’ve tried both, and I just end up running into friction—just in different places.

      :/

      1 point
  • Hannes DampfHannes Dampf, over 8 years ago (edited over 8 years ago )

    I declare my variables like font-weights

    Pre-processor Variables

    `@type-color-200: #;

    @type-color-300: #;

    @type-color-400: #;

    @type-color: #;

    @type-color-600: #;

    @type-color-700: #;

    @type-color-800: #;

    `

    Elements

    color: alpha( $type-color-500, 50% );

    0 points
  • Carlos MañasCarlos Mañas, over 8 years ago (edited over 8 years ago )

    I use something like this

    Pre-procesor // Colors $c-black: #000; $c-blue: #002c52; $c-gray: #666; $c-light-gray: #c4c4c4;

    // Elements $c-title: $c-black; $c-link: $c-blue; $c-text: $c-gray; $c-border: $c-light-gray;

    Color application border: 1px solid $c-border; border: 1px solid mix( $c-blue, $c-border, 30% )

    0 points
  • ポール ウェッブポール ウェッブ, over 8 years ago

    I think your color function is the best way to go about dealing with derivative colors, like grays. I normally have black, white, and my main colors. If I need a gray, I'll just use Sass' rgba function, and document the percentage I used.

    0 points
    • Thibault MaekelberghThibault Maekelbergh, over 8 years ago

      isn't lighten() or darken() easier?

      0 points
      • Brian FryerBrian Fryer, over 8 years ago

        My favorite is to use a combination of tint/shade and blend mode functions for creating color palette derivatives in my projects.

        0 points
        • Julian LloydJulian Lloyd, over 8 years ago

          Intriguing. I haven‘t tried blend modes…

          0 points
          • Brian FryerBrian Fryer, over 8 years ago

            I'll usually explore a number of color palettes in Illustrator before moving things into code.

            My current workflow goes something like this...

            • Pick a base color scheme from colourlovers.com
            • In Illustrator, draw a 100x100 rectangle for each color
            • Make four copies of each rectangle overlayed on top of the base rectangle (screenshot)
            • Adjust the blend mode for each corner (screenshot)

            With that ^ established, I can get a good sense of the variety of colors that I can get out of a color palette and start playing with things from there (screenshot).

            0 points
      • Hawke BassignaniHawke Bassignani, over 8 years ago

        I think it's better to use Sass's mix function with black than to darken. (And similarly for white-vs.-lighten).

        This outstanding CodePen demonstrates why: http://codepen.io/flipstewart/pen/IofeD

        Tl;dr: the darken function goes to black very fast. Mixing with black means that only mix(..., black, 100%) gets you solid #000. Much easier to get a range of values.

        2 points
        • Julian LloydJulian Lloyd, over 8 years ago (edited over 8 years ago )

          Also for what it’s worth, I joined a team that used Stylus and found that its color functions produced different results than what I was used to with Sass.

          I might even say they produced more desirable results.

          1 point
        • ポール ウェッブポール ウェッブ, over 8 years ago

          OOH! Mix looks amazing, I never knew about that. Thanks for sharing! (:

          1 point
      • ポール ウェッブポール ウェッブ, over 8 years ago

        It's neither easier nor harder. If I could make Sass darken by my own specification of black (instead of #000), I would use it. AFAIK, that's not possible, so I use rgba.

        0 points
        • Chris LeeChris Lee, over 8 years ago (edited over 8 years ago )

          Actually, you can: mix($your-black, $color, $percent);

          Abstracting that further:

          $your-black: #333;

          @function shade($color, $percent){ @return mix($your-black, $color, $percent); }

          color: shade(#800085, 10%);

          1 point