SCSS color palette mixin.

_colors.scss

$palettes: (
  'typo': (
    'base': (
      'normal': #E6ECF2,
      'light' : #ffffff,
      'dark'  : #dddddd

    ),
    'inverse': (
      'normal': #444444,
      'light' : #777777,
      'dark'  : #222222 
    )
  ),
  'anchor': (
    'base': (
      'normal' : #AACEF2,
      'hover'  : #73ACE6,
      'active' : #2E8AE6,
      'current': #242B33,
      'visited': #596C80
    ),
    'inverse': (
      'normal' : #2E7AE6,
      'hover'  : #4588E6,
      'active' : #0060E6,
      'current': #242B33,
      'visited': #553DCC
    ),
    'nav': (
      'normal' : #bdc5c7,
      'hover'  : #edf1f2,
      'active' : #ffffff,
      'current': #edf1f2
    )
  ),
  'bg': (
    'base': (
      'normal' : #242B33,
      'hover'  : #36414D,
      'active' : #475766,
      'current': #596C80,
      'visited': #12161A,
    ),
    'inverse' : (
      'normal' : #fafafa,
      'hover'  : #f5f5f5,
      'active' : #ffffff,
      'current': #eeeeee,
      'visited': #dddddd
    ),
    'gradation': (
      'start'  : #242B33,
      'end'    : #475766
    )
  ),
  'colors': (
    'red' : (
      'normal' : #E84E3C
    ),
    'orange' : (
      'normal' : #F29933
    ),
    'yellow' : (
      'normal' : #F2C10F
    ),
    'lime' : (
      'normal' : #99DE37
    ),
    'green' : (
      'normal' : #33D463
    ),
    'emerald' : (
      'normal' : #31DEA7
    ),
    'cyan' : (
      'normal' : #36CFE0
    ),
    'aqua' : (
      'normal' : #49AAE3
    ),
    'blue' : (
      'normal' : #427AE3
    ),
    'deepblue' : (
      'normal' : #4353E0
    ),
    'violet' : (
      'normal' : #8B41E0
    ),
    'purple' : (
      'normal' : #C34FE0
    ),
    'winered' : (
      'normal' : #EB497F
    )
  )
);

_palettes.scss

// Mixin to return the color code
// 
// $palette_list - Array containing the palette.
// $palette_name - The name of the palette.
// $tone_name    - (option) The name of the tone.
// $state_name   - (option) The name of the state of tone.
// 
@function palette( $palette_list, $palette_name, $tone_name: 'base', $state_name: 'normal' ) {
  $error_color: #cc0000;
  $palette    : '';
  $torn       : '';
  $color      : ''; 

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

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

  @if map-has-key( $torn, $state_name ) {

    $color: map-get( $torn, $state_name );
  } @else {
    @warn "Tone : #{$tone_name} to state : #{$state_name} is not defined.";
    @return $error_color;
  }

  @return $color;
}

style.scss

@import "palettes";
@import "colors";

div {
  background: palette( $palettes, 'bg' );
  //background: #242b33;
  
  color: palette( $palettes, 'typo', 'inverse' );
  //color: #eee;
}

a:hover {
  color: palette( $palettes, 'anchor', 'base', 'hover' );
  //color: #fff;
}