SCSS Color Code Managemant Mixins.

_color_palettes_mixins.scss

// Mixin to return the color code
// 
// $property_name - The name of the property.
// $args          - Argments.
//   - name     : Component name.
//   - palettes : Palettes Array (Default: $PALETTES).
//   - state    : <Option> State Name (Default: normal).
//   - theme    : <Option> Theme Name (Default: base). 
// 
// EXAMPLE:
// $COMPONENT:  (
//   name: 'card'
// );
// background: palette( 'card', $COMPONENT );
// 
@function palette( $property_name, /* array */ $args ){
  // Argments
  $default     : (
    'palettes': $PALETTES,
    'name'    : '',
    'state'   : 'normal',
    'theme'   : 'base'  
  );
  $args: map-merge( $default, $args );

  // Set Valiables
  $palettes    : map-get( $args, 'palettes' );
  $palette_name: map-get( $args, 'name' );
  $theme_name  : map-get( $args, 'theme' );
  $state_name  : map-get( $args, 'state' );

  $error_color : #cc0000;
  $palette     : '';
  $property    : '';
  $tone        : '';
  $state       : '';
  $property    : '';

  // Get palette
  @if map-has-key( $palettes, $palette_name ) {
    $palette: map-get( $palettes, $palette_name );
  } @else {
    @warn "Name in the palette : #{$palette_name} is not defined.";
    @return $error_color;
  }

  // Get tone
  @if map-has-key( $palette, $theme_name ) {
    $tone: map-get( $palette, $theme_name );
  } @else {
    @warn "Tone in the palette : #{$theme_name} is not defined.";
    @return $error_color;
  }

  // Get property
  @if map-has-key( $tone, $state_name ) {
    $state: map-get( $tone, $state_name );
  } @else {
    @warn "State in the palette: #{$state_name} is not defined.";
    @return $error_color;
  }

  // Get property
  @if map-has-key( $state, $property_name ) {
    $property: map-get( $state, $property_name );
  } @else {
    @warn "Property in the palette: #{$property_name} is not defined.";
    @return $error_color;
  }

  @return $property;
}


@function set-palette-option($map, $key, $value) {
  $new: ($key: $value);
  @return map-merge($map, $new);
}

// http://scg.ar-ch.org/

// It is Mixin of that dark or bright colors.
// 
// $src_color     - Alters the color code.
// $tone_name     - The name of the tone.
//
// EXAMPLE:
// color: tone( #333333, '1x' );
//
@function brightness( $src_color, $tone_name: 'normal' ) {
  $dist_color: #cc0000;
  $tones: (
    '8x'        : ('darken',  64%),
    '7x'        : ('darken',  56%),
    '6x'        : ('darken',  48%),
    '5x'        : ('darken',  40%),
    '4x'        : ('darken',  32%),
    '3x'        : ('darken',  24%),
    '2x'        : ('darken',  16%),
    '1x'        : ('darken',   8%),
    '05x'       : ('darken',   4%),
    'normal'    : ('none',     0%),
    '-05x'      : ('lighten',  4%),
    '-1x'       : ('lighten',  8%),
    '-2x'       : ('lighten', 16%),
    '-3x'       : ('lighten', 24%),
    '-4x'       : ('lighten', 32%),
    '-5x'       : ('lighten', 40%),
    '-6x'       : ('lighten', 48%),
    '-7x'       : ('lighten', 56%),
    '-8x'       : ('lighten', 64%)
  );

  @if map-has-key( $tones, $tone_name ) {

    $tone:   map-get( $tones, $tone_name );
    $name:   nth( $tone, 1 );
    $amount: nth( $tone, 2 );

    @if $name == lighten {
      // return lighten
      $dist_color: lighten( $src_color, $amount );
    } @else if $name == darken {
      // darken
      $dist_color: darken( $src_color, $amount );
    } @else {
      // normal
      $dist_color: $src_color;
    }
    
  } @else {
    @warn "Tone: #{$tone_name} is not defined.";
  }

  @return $dist_color;
}




// It is Mixin of that dark or bright colors.
// 
// $src_color     - Alters the color code.
// $tone_name     - The name of the tone.
//
// EXAMPLE:
// color: saturation( #333333, '1x' );
//
@function saturation( $src_color, $tone_name: 'normal' ) {
  $dist_color: #cc0000;
  $tones: (
    '8x'        : ('saturate',   64%),
    '7x'        : ('saturate',   56%),
    '6x'        : ('saturate',   48%),
    '5x'        : ('saturate',   40%),
    '4x'        : ('saturate',   32%),
    '3x'        : ('saturate',   24%),
    '2x'        : ('saturate',   16%),
    '1x'        : ('saturate',    8%),
    '05x'       : ('saturate',    4%),
    'normal'    : ('none',        0%),
    '-05x'      : ('desaturate',  4%),
    '-1x'       : ('desaturate',  8%),
    '-2x'       : ('desaturate', 16%),
    '-3x'       : ('desaturate', 24%),
    '-4x'       : ('desaturate', 32%),
    '-5x'       : ('desaturate', 40%),
    '-6x'       : ('desaturate', 48%),
    '-7x'       : ('desaturate', 56%),
    '-8x'       : ('desaturate', 64%)
  );

  @if map-has-key( $tones, $tone_name ) {

    $tone:   map-get( $tones, $tone_name );
    $name:   nth( $tone, 1 );
    $amount: nth( $tone, 2 );

    @if $name == saturate {
      // saturate
      $dist_color: saturate( $src_color, $amount );
    } @else if $name == darken {
      // desaturate
      $dist_color: desaturate( $src_color, $amount );
    } @else {
      // normal
      $dist_color: $src_color;
    }
    
  } @else {
    @warn "Tone: #{$tone_name} is not defined.";
  }

  @return $dist_color;
}

_colors.scss

$COLOR__PRIMARY:        #fafafa;

$COLOR__TEXT-BASE:      #444444;
$COLOR__TEXT-INVERSE:   #eeeeee;

$COLOR__BG-BASE:        #fafafa;
$COLOR__BG-INVERSE:     #242B33;

$COLOR__THEME-RED:      #E84E3C;
$COLOR__THEME-ORANGE:   #F29933;
$COLOR__THEME-YELLOW:   #F2C10F;
$COLOR__THEME-LIME:     #99DE37;
$COLOR__THEME-GREEN:    #33D463;
$COLOR__THEME-EMERALD:  #31DEA7;
$COLOR__THEME-CYAN:     #36CFE0;
$COLOR__THEME-AQUA:     #49AAE3;
$COLOR__THEME-BLUE:     #427AE3;
$COLOR__THEME-DEEPBLUE: #4353E0;
$COLOR__THEME-VIOLET:   #8B41E0;
$COLOR__THEME-PURPLE:   #C34FE0;
$COLOR__THEME-WINERED:  #EB497F;

$COLOR__BRAND-FACEBOOK: #3B5998;
$COLOR__BRAND-TWITTER:  #00acee;
$COLOR__BRAND-HATENA:   #2c6ebd;
$COLOR__BRAND-POCKET:   #ee4056;
$COLOR__BRAND-GPLUS:    #dd4c39;
$COLOR__BRAND-FEEDLY:   #2bb24c;

_palettes.scss

$PALETTES: (
  'card': ( 
    'base': (
      'normal': (
        border:     transparent,
        color:      $COLOR__TEXT-BASE,
        background: $COLOR__BG-BASE,
        box-shadow: rgba( 0, 0, 0, .05 )
      ),
      'hover': (
        border:     $COLOR__THEME-DEEPBLUE,
        color:      brightness( $COLOR__TEXT-BASE, '-05x' ),
        background: brightness( $COLOR__BG-BASE, '05x' ),
        box-shadow: rgba( 0, 0, 0, .1 )
      ),
      'current': (
        border:     #333,
        color:      #fff,
        background: #444,
        box-shadow: rgba( 0, 0, 0, .05 )
      )
    )
  )
);

index.html

<div class="component-card">
  CARD
</div>

<div class="component-card state-current">
  CARD
</div>

style.scss

.component-card {
  $COMPONENT: (
    name: 'card'
  );

  margin    : 2rem auto;
  padding   : 3rem;
  min-width :  30%;
  max-width :  60%;

  border-radius : 2px;
  border        : 1px solid palette( 'border', $COMPONENT );

  text-align : center;
  color      : palette( 'color', $COMPONENT );

  background : palette( 'background', $COMPONENT );
  box-shadow : 0 .05rem .2rem palette( 'box-shadow', $COMPONENT );


  &:hover {
    $HOVER: set-palette-option( $COMPONENT, 'state', 'hover' );

    border     : 1px solid palette( 'border', $HOVER );
    color      : palette( 'color', $HOVER );
    background : palette( 'background', $HOVER );
    box-shadow : 0 .05rem .75rem palette( 'box-shadow', $HOVER );
  }


  &.state-current {
    $CURRENT: set-palette-option( $COMPONENT, 'state', 'current');

    border     : 1px solid palette( 'border', $CURRENT );
    color      : palette( 'color', $CURRENT );
    background : palette( 'background', $CURRENT );
    box-shadow : 0 .05rem .5rem palette( 'box-shadow', $CURRENT );
  }
}