Using a color palette

colors.scss

$palettes: (
  black: (
    lightest: hsl(0, 0%, 40%),
    lighter:  hsl(0, 0%, 35%),
    light:    hsl(0, 0%, 30%),
    base:     hsl(0, 0%, 25%),
    dark:     hsl(0, 0%, 20%),
    darker:   hsl(0, 0%, 15%),
    darkest:  hsl(0, 0%, 10%)
  ),
  beige: (
    lightest: hsl(36, 45%, 100%),
    lighter:  hsl(36, 45%, 95%),
    light:    hsl(36, 45%, 90%),
    base:     hsl(36, 45%, 85%),
    dark:     hsl(36, 45%, 80%),
    darker:   hsl(36, 45%, 75%),
    darkest:  hsl(36, 45%, 70%)
  ),
  slate: (
    lightest: hsl(217, 8%, 35%),
    lighter:  hsl(217, 8%, 30%),
    light:    hsl(217, 8%, 25%),
    base:     hsl(217, 8%, 20%),
    dark:     hsl(217, 8%, 15%),
    darker:   hsl(217, 8%, 10%),
    darkest:  hsl(217, 8%, 5%)
  ),
  gray: (
    lightest: hsl(210, 7%, 100%),
    lighter:  hsl(210, 7%, 95%),
    light:    hsl(210, 7%, 92%),
    base:     hsl(210, 7%, 90%),
    dark:     hsl(210, 7%, 85%),
    darker:   hsl(210, 7%, 80%),
    darkest:  hsl(210, 7%, 75%)
  ),
  cloud: (
    lightest: hsl(210, 7%, 80%),
    lighter:  hsl(210, 7%, 75%),
    light:    hsl(210, 7%, 70%),
    base:     hsl(210, 7%, 65%),
    dark:     hsl(210, 7%, 60%),
    darker:   hsl(210, 7%, 55%),
    darkest:  hsl(210, 7%, 50%)
  ),
  white: (
    lightest: hsl(40, 0%, 100%),
    lighter:  hsl(40, 0%, 99%),
    light:    hsl(40, 10%, 98%),
    base:     hsl(40, 20%, 97%),
    dark:     hsl(40, 30%, 96%),
    darker:   hsl(40, 40%, 95%),
    darkest:  hsl(40, 40%, 90%)
  ),
  sky: (
    lightest: hsl(212, 30%, 100%),
    lighter:  hsl(212, 30%, 95%),
    light:    hsl(212, 30%, 90%),
    base:     hsl(212, 30%, 85%),
    dark:     hsl(212, 30%, 80%),
    darker:   hsl(212, 30%, 75%),
    darkest:  hsl(212, 30%, 70%)
  ),
  cyan: (
    lightest: hsl(192, 61%, 67%),
    lighter:  hsl(192, 61%, 62%),
    light:    hsl(192, 61%, 57%),
    base:     hsl(192, 61%, 52%),
    dark:     hsl(192, 61%, 47%),
    darker:   hsl(192, 61%, 42%),
    darkest:  hsl(192, 61%, 37%)
  ),
  blue: (
    lightest: hsl(200, 67%, 66%),
    lighter:  hsl(200, 67%, 61%),
    light:    hsl(200, 67%, 56%),
    base:     hsl(200, 67%, 51%),
    dark:     hsl(200, 67%, 46%),
    darker:   hsl(200, 67%, 41%),
    darkest:  hsl(200, 67%, 36%)
  ),
  cobalt: (
    lightest: hsl(209, 42%, 38%),
    lighter:  hsl(209, 42%, 33%),
    light:    hsl(209, 42%, 28%),
    base:     hsl(209, 42%, 23%),
    dark:     hsl(209, 42%, 18%),
    darker:   hsl(209, 42%, 13%),
    darkest:  hsl(209, 42%, 8%)
  ),
  denim: (
    lightest: hsl(212, 23%, 56%),
    lighter:  hsl(212, 23%, 51%),
    light:    hsl(212, 23%, 46%),
    base:     hsl(212, 23%, 41%),
    dark:     hsl(212, 23%, 36%),
    darker:   hsl(212, 23%, 31%),
    darkest:  hsl(212, 23%, 26%)
  ),
  navy: (
    lightest: hsl(205, 61%, 35%),
    lighter:  hsl(205, 61%, 30%),
    light:    hsl(205, 61%, 25%),
    base:     hsl(205, 61%, 20%),
    dark:     hsl(205, 61%, 15%),
    darker:   hsl(205, 61%, 10%),
    darkest:  hsl(205, 61%, 5%)
  ),
  purple: (
    lightest: hsl(240, 33%, 82%),
    lighter:  hsl(240, 33%, 77%),
    light:    hsl(240, 33%, 72%),
    base:     hsl(240, 33%, 67%),
    dark:     hsl(240, 33%, 62%),
    darker:   hsl(240, 33%, 57%),
    darkest:  hsl(240, 33%, 52%)
  ),
  teal: (
    lightest: hsl(175, 46%, 62%),
    lighter:  hsl(175, 46%, 57%),
    light:    hsl(175, 46%, 52%),
    base:     hsl(175, 46%, 47%),
    dark:     hsl(175, 46%, 42%),
    darker:   hsl(175, 46%, 37%),
    darkest:  hsl(175, 46%, 32%)
  ),
  green: (
    lightest: hsl(146, 41%, 68%),
    lighter:  hsl(146, 41%, 63%),
    light:    hsl(146, 41%, 58%),
    base:     hsl(146, 41%, 53%),
    dark:     hsl(146, 41%, 48%),
    darker:   hsl(146, 41%, 43%),
    darkest:  hsl(146, 41%, 38%)
  ),
  yellow: (
    lightest: hsl(42, 100%, 87%),
    lighter:  hsl(42, 100%, 82%),
    light:    hsl(42, 100%, 77%),
    base:     hsl(42, 100%, 72%),
    dark:     hsl(42, 100%, 67%),
    darker:   hsl(42, 100%, 62%),
    darkest:  hsl(42, 100%, 57%)
  ),
  orange: (
    lightest: hsl(37, 96%, 71%),
    lighter:  hsl(37, 96%, 66%),
    light:    hsl(37, 96%, 61%),
    base:     hsl(37, 96%, 56%),
    dark:     hsl(37, 96%, 51%),
    darker:   hsl(37, 96%, 46%),
    darkest:  hsl(37, 96%, 41%)
  ),
  pink: (
    lightest: hsl(332, 90%, 90%),
    lighter:  hsl(332, 90%, 85%),
    light:    hsl(332, 90%, 80%),
    base:     hsl(332, 90%, 75%),
    dark:     hsl(332, 90%, 70%),
    darker:   hsl(332, 90%, 65%),
    darkest:  hsl(332, 90%, 60%)
  ),
  red: (
    lightest: hsl(0, 72%, 68%),
    lighter:  hsl(0, 72%, 63%),
    light:    hsl(0, 72%, 58%),
    base:     hsl(0, 72%, 53%),
    dark:     hsl(0, 72%, 48%),
    darker:   hsl(0, 72%, 43%),
    darkest:  hsl(0, 72%, 38%)
  )
);

@function palette($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}