Sass color organization

color.scss

@function vp-color($name, $variant: 'base', $alpha: 1) {
  
  $color-spectrum: map-get($vp-colors, $name);
  
  @if $color-spectrum {
    $color: map-get($color-spectrum, $variant);
  }
  
  @if $alpha {
    $color: rgba($color, $alpha);
  }
  
  @return $color;
}

$vp-colors: (
  'white': (
    'base': rgb(255, 255, 255)
  ),
  'black': (
    'base': rgb(0, 0, 0)
  ),
  'warm-gray': (
    'base': rgb(250, 248, 242),
    'dark': rgb(245, 240, 228),
    'darker': rgb(240, 233, 215),
    'darkest': rgb(214, 208, 192)
  ),
  'dark-gray': (
    'base': rgb(20, 53, 66),
    'light': rgb(32, 63, 75),
    'lighter': rgb(43, 73, 85)
  ),
  'yellow': (
    'base': rgb(250, 180, 0),
    'light': rgb(251, 191, 38),
    'lighter': rgb(251, 199, 64)
  ),
  'blue': (
    'base': rgb(0, 170, 224),
    'dark': rgb(0, 123, 180),
    'darkest': rgb(0, 75, 135)
  ),
  'teal': (
    'base': rgb(0, 195, 174),
    'dark': rgb(0, 120, 100)
  ),
  'green': (
    'base': rgb(132, 189, 0),
    'dark': rgb(101, 141, 27)
  ),
  'purple': (
    'base': rgb(144, 99, 205),
    'dark': rgb(88, 44, 131)
  ),
  'magenta': (
    'base': rgb(173, 26, 172),
    'dark': rgb(114, 36, 108)
  ),
  'orange': (
    'base': rgb(255, 102, 0),
    'dark': rgb(220, 71, 0)
  ),
  'red': (
    'base': rgb(245, 0, 60),
    'dark': rgb(164, 33, 72)
  )
);

/* Example use */
.example {
  background-color: vp-color('blue', 'dark');
}