A technique for organizing colors using Sass maps and a getter function

sass-color-maps.scss

// Color Definition
$colors: (
	primary: (
		light: #67A1E9,
		base: #428CE8,
		dark: #3478CD
	),
	status: (
		success: #50E39A,
		inactive: #B7BCC5,
		warning: #F8C71C,
		error: #FF388E,
		disabled: #B7BCC5
	),
	neutral: (
		lightest: #FFFFFF,
		lighter: #F8FAFE,
		light: #E7EAF1,
		base: #B7BCC5,
		dark: #494C50,
		darker: #1E2124,
		darkest: #000000
	)
);

// Getter Functions
@function color($palette: primary, $shade: base) {
	@return map-get(map-get($colors, $palette), $shade);
}

@function color-rgba($alpha, $palette: primary, $shade: base) {
	@return rgba(map-get(map-get($colors, $palette), $shade), $alpha);
}

// Usage Examples
h1 {
	color: color(neutral, darker);
}

button {
	background-color: getColor(primary);
}

.card {
	border: 1px solid getColor(neutral);
}

.error {
	color: color(status, error);
}

Thanks for this, I am now using a very similar implementation.
You could use a function here so avoid the double map get:

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

and you would call it like this:

@return map-deep-get($colors, $palette, $shade);
@return rgba(map-deep-get($colors, $palette, $shade), $alpha);