diff --git a/packages/core/src/components/graphs/radar.ts b/packages/core/src/components/graphs/radar.ts
index 8bf79cbe6d..a9cf40e166 100644
--- a/packages/core/src/components/graphs/radar.ts
+++ b/packages/core/src/components/graphs/radar.ts
@@ -506,7 +506,7 @@ export class Radar extends Component {
 						.attr("opacity", 1)
 						.attr("transform", `translate(${c.x}, ${c.y})`)
 						.attr("d", (group) => radialLineGenerator(group.data))
-				);
+				)
 			},
 			(exit) =>
 				exit.call((selection) =>
diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
index c5fdcd7644..635cb893ac 100644
--- a/packages/core/src/model.ts
+++ b/packages/core/src/model.ts
@@ -652,6 +652,12 @@ export class ChartModel {
 		const options = this.getOptions();
 		const userProvidedScale = Tools.getProperty(options, "color", "scale");
 
+		Object.keys(userProvidedScale).forEach(dataGroup => {
+			if (!this.allDataGroups.includes(dataGroup)) {
+				console.warn(`"${dataGroup}" does not exist in data groups.`);
+			}
+		})
+
 		/**
 		 * Go through allDataGroups. If a data group has a color value provided
 		 * by the user, add that to the color range
diff --git a/packages/core/src/styles/color-palatte.scss b/packages/core/src/styles/color-palatte.scss
new file mode 100644
index 0000000000..6a24f7e2b1
--- /dev/null
+++ b/packages/core/src/styles/color-palatte.scss
@@ -0,0 +1,243 @@
+@function getColorValue($color, $scale) {
+	@return map-get(map-get($ibm-color-map, $color), $scale);
+}
+
+$white-theme-colors: (
+	"1": (
+		"1": (
+			"1": getColorValue("purple", 70)
+		),
+		"2": (
+			"1": getColorValue("blue", 80)
+		),
+		"3": (
+			"1": getColorValue("cyan", 50)
+		),
+		"4": (
+			"1": getColorValue("teal", 60)
+		)
+	),
+	"2": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("teal", 50)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("red", 90)
+		),
+		"3": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 90)
+		),
+		"4": (
+			"1": getColorValue("cyan", 50),
+			"2": getColorValue("teal", 70)
+		),
+		"5": (
+			"1": getColorValue("teal", 50),
+			"2": getColorValue("blue", 80)
+		)
+	),
+	"3": (
+		"1": (
+			"1": getColorValue("magenta", 50),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("purple", 70)
+		),
+		"2": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 50),
+			"3": getColorValue("red", 90)
+		),
+		"3": (
+			"1": getColorValue("purple", 50),
+			"2": getColorValue("teal", 70),
+			"3": getColorValue("blue", 80)
+		),
+		"4": (
+			"1": getColorValue("purple", 50),
+			"2": getColorValue("teal", 70),
+			"3": getColorValue("magenta", 70)
+		),
+		"5": (
+			"1": getColorValue("cyan", 90),
+			"2": getColorValue("purple", 70),
+			"3": getColorValue("teal", 50)
+		)
+	),
+	"4": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 90),
+			"3": getColorValue("teal", 50),
+			"4": getColorValue("magenta", 50)
+		),
+		"2": (
+			"1": getColorValue("magenta", 70),
+			"2": getColorValue("red", 50),
+			"3": getColorValue("red", 90),
+			"4": getColorValue("purple", 50)
+		),
+		"3": (
+			"1": getColorValue("teal", 50),
+			"2": getColorValue("blue", 80),
+			"3": getColorValue("purple", 50),
+			"4": getColorValue("magenta", 70)
+		)
+	),
+	"5": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("teal", 70),
+			"4": getColorValue("magenta", 70),
+			"5": getColorValue("red", 90)
+		),
+		"2": (
+			"1": getColorValue("blue", 80),
+			"2": getColorValue("teal", 50),
+			"3": getColorValue("magenta", 70),
+			"4": getColorValue("red", 90),
+			"5": getColorValue("purple", 50)
+		)
+	),
+	"14": (
+		"1": (
+			"1": getColorValue("purple", 70),
+			"2": getColorValue("cyan", 50),
+			"3": getColorValue("teal", 70),
+			"4": getColorValue("magenta", 70),
+			"5": getColorValue("red", 50),
+			"6": getColorValue("red", 90),
+			"7": getColorValue("green", 60),
+			"8": getColorValue("blue", 80),
+			"9": getColorValue("magenta", 50),
+			"10": #b28600, //yellow 50, update when available in carbon color
+			"11": getColorValue("teal", 50),
+			"12": getColorValue("cyan", 90),
+			"13": #8a3800, //orange 70, update when available in carbon color
+			"14": getColorValue("purple", 50)
+		)
+	)
+);
+
+$dark-theme-colors: (
+	"1": (
+		"1": (
+			"1": getColorValue("purple", 30)
+		),
+		"2": (
+			"1": getColorValue("blue", 50)
+		),
+		"3": (
+			"1": getColorValue("cyan", 40)
+		),
+		"4": (
+			"1": getColorValue("teal", 40)
+		)
+	),
+	"2": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("magenta", 40)
+		),
+		"3": (
+			"1": getColorValue("magenta", 40),
+			"2": getColorValue("red", 10)
+		),
+		"4": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("cyan", 20)
+		),
+		"5": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("green", 30)
+		)
+	),
+	"3": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20)
+		),
+		"2": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("magenta", 40),
+			"3": getColorValue("red", 10)
+		),
+		"3": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30)
+		),
+		"4": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("green", 30),
+			"3": getColorValue("red", 10)
+		),
+		"5": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("green", 30),
+			"3": getColorValue("cyan", 20)
+		)
+	),
+	"4": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20),
+			"4": getColorValue("blue", 50)
+		),
+		"2": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30),
+			"4": getColorValue("red", 10)
+		),
+		"3": (
+			"1": getColorValue("teal", 60),
+			"2": getColorValue("red", 10),
+			"3": getColorValue("cyan", 40),
+			"4": getColorValue("green", 30)
+		)
+	),
+	"5": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("cyan", 20),
+			"4": getColorValue("blue", 50),
+			"5": getColorValue("magenta", 40)
+		),
+		"2": (
+			"1": getColorValue("blue", 50),
+			"2": getColorValue("teal", 40),
+			"3": getColorValue("purple", 30),
+			"4": getColorValue("red", 10),
+			"5": getColorValue("green", 30)
+		)
+	),
+	"14": (
+		"1": (
+			"1": getColorValue("purple", 60),
+			"2": getColorValue("cyan", 40),
+			"3": getColorValue("teal", 60),
+			"4": getColorValue("magenta", 40),
+			"5": getColorValue("red", 50),
+			"6": getColorValue("red", 10),
+			"7": getColorValue("green", 30),
+			"8": getColorValue("blue", 50),
+			"9": getColorValue("magenta", 60),
+			"10": #d2a106, //yellow 40, update when available in carbon color
+			"11": getColorValue("teal", 40),
+			"12": getColorValue("cyan", 20),
+			"13": #ba4e00, //orange 60, update when available in carbon color
+			"14": getColorValue("purple", 30)
+		)
+	)
+);
diff --git a/packages/core/src/styles/colors.scss b/packages/core/src/styles/colors.scss
index fff90c8e27..a99cc3ea9e 100644
--- a/packages/core/src/styles/colors.scss
+++ b/packages/core/src/styles/colors.scss
@@ -1,292 +1,43 @@
-@import "./mixins";
-// Preferred
-@include carbon--colors();
+@import "./color-palatte.scss";
 
-$white-theme-colors: (
-	"1": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 70)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 80)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "cyan"), 50)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 60)
-		)
-	),
-	"2": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 70),
-			"2": map-get(map-get($ibm-color-map, "teal"), 50)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "red"), 90)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"2": map-get(map-get($ibm-color-map, "red"), 90)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "cyan"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 70)
-		),
-		"5": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 50),
-			"2": map-get(map-get($ibm-color-map, "blue"), 80)
-		)
-	),
-	"3": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "magenta"), 50),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 50),
-			"3": map-get(map-get($ibm-color-map, "purple"), 70)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"2": map-get(map-get($ibm-color-map, "red"), 50),
-			"3": map-get(map-get($ibm-color-map, "red"), 90)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 70),
-			"3": map-get(map-get($ibm-color-map, "blue"), 80)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 70),
-			"3": map-get(map-get($ibm-color-map, "magenta"), 70)
-		),
-		"5": (
-			"1": map-get(map-get($ibm-color-map, "cyan"), 90),
-			"2": map-get(map-get($ibm-color-map, "purple"), 70),
-			"3": map-get(map-get($ibm-color-map, "teal"), 50)
-		)
-	),
-	"4": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 70),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 90),
-			"3": map-get(map-get($ibm-color-map, "teal"), 50),
-			"4": map-get(map-get($ibm-color-map, "magenta"), 50)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"2": map-get(map-get($ibm-color-map, "red"), 50),
-			"3": map-get(map-get($ibm-color-map, "red"), 90),
-			"4": map-get(map-get($ibm-color-map, "purple"), 50)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 50),
-			"2": map-get(map-get($ibm-color-map, "blue"), 80),
-			"3": map-get(map-get($ibm-color-map, "purple"), 50),
-			"4": map-get(map-get($ibm-color-map, "magenta"), 70)
-		)
-	),
-	"5": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 70),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 50),
-			"3": map-get(map-get($ibm-color-map, "teal"), 70),
-			"4": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"5": map-get(map-get($ibm-color-map, "red"), 90)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 80),
-			"2": map-get(map-get($ibm-color-map, "teal"), 50),
-			"3": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"4": map-get(map-get($ibm-color-map, "red"), 90),
-			"5": map-get(map-get($ibm-color-map, "purple"), 50)
-		)
-	),
-	"14": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 70),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 50),
-			"3": map-get(map-get($ibm-color-map, "teal"), 70),
-			"4": map-get(map-get($ibm-color-map, "magenta"), 70),
-			"5": map-get(map-get($ibm-color-map, "red"), 50),
-			"6": map-get(map-get($ibm-color-map, "red"), 90),
-			"7": map-get(map-get($ibm-color-map, "green"), 60),
-			"8": map-get(map-get($ibm-color-map, "blue"), 80),
-			"9": map-get(map-get($ibm-color-map, "magenta"), 50),
-			"10": #b28600,
-			//yellow 50, update when available in carbon color
-				"11": map-get(map-get($ibm-color-map, "teal"), 50),
-			"12": map-get(map-get($ibm-color-map, "cyan"), 90),
-			"13": #8a3800,
-			//orange 70, update when available in carbon color
-				"14": map-get(map-get($ibm-color-map, "purple"), 50)
-		)
-	)
-);
-
-$dark-theme-colors: (
-	"1": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 30)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "cyan"), 40)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 40)
-		)
-	),
-	"2": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "magenta"), 40)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "magenta"), 40),
-			"2": map-get(map-get($ibm-color-map, "red"), 10)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 20)
-		),
-		"5": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 60),
-			"2": map-get(map-get($ibm-color-map, "green"), 30)
-		)
-	),
-	"3": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "cyan"), 20)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "magenta"), 40),
-			"3": map-get(map-get($ibm-color-map, "red"), 10)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "purple"), 30)
-		),
-		"4": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50),
-			"2": map-get(map-get($ibm-color-map, "green"), 30),
-			"3": map-get(map-get($ibm-color-map, "red"), 10)
-		),
-		"5": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 60),
-			"2": map-get(map-get($ibm-color-map, "green"), 30),
-			"3": map-get(map-get($ibm-color-map, "cyan"), 20)
-		)
-	),
-	"4": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "cyan"), 20),
-			"4": map-get(map-get($ibm-color-map, "blue"), 50)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "purple"), 30),
-			"4": map-get(map-get($ibm-color-map, "red"), 10)
-		),
-		"3": (
-			"1": map-get(map-get($ibm-color-map, "teal"), 60),
-			"2": map-get(map-get($ibm-color-map, "red"), 10),
-			"3": map-get(map-get($ibm-color-map, "cyan"), 40),
-			"4": map-get(map-get($ibm-color-map, "green"), 30)
-		)
-	),
-	"5": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "cyan"), 20),
-			"4": map-get(map-get($ibm-color-map, "blue"), 50),
-			"5": map-get(map-get($ibm-color-map, "magenta"), 40)
-		),
-		"2": (
-			"1": map-get(map-get($ibm-color-map, "blue"), 50),
-			"2": map-get(map-get($ibm-color-map, "teal"), 40),
-			"3": map-get(map-get($ibm-color-map, "purple"), 30),
-			"4": map-get(map-get($ibm-color-map, "red"), 10),
-			"5": map-get(map-get($ibm-color-map, "green"), 30)
-		)
-	),
-	"14": (
-		"1": (
-			"1": map-get(map-get($ibm-color-map, "purple"), 60),
-			"2": map-get(map-get($ibm-color-map, "cyan"), 40),
-			"3": map-get(map-get($ibm-color-map, "teal"), 60),
-			"4": map-get(map-get($ibm-color-map, "magenta"), 40),
-			"5": map-get(map-get($ibm-color-map, "red"), 50),
-			"6": map-get(map-get($ibm-color-map, "red"), 10),
-			"7": map-get(map-get($ibm-color-map, "green"), 30),
-			"8": map-get(map-get($ibm-color-map, "blue"), 50),
-			"9": map-get(map-get($ibm-color-map, "magenta"), 60),
-			"10": #d2a106,
-			//yellow 40, update when available in carbon color
-				"11": map-get(map-get($ibm-color-map, "teal"), 40),
-			"12": map-get(map-get($ibm-color-map, "cyan"), 20),
-			"13": #ba4e00,
-			//orange 60, update when available in carbon color
-				"14": map-get(map-get($ibm-color-map, "purple"), 30)
-		)
-	)
-);
-
-$theme-colors: $dark-theme-colors;
-$color-map: ();
-@mixin getThemeColors() {
+@function getThemeColors() {
+	$color-map: ();
 	@if $carbon--theme ==
 		$carbon--theme--g100 or
 		$carbon--theme ==
 		$carbon--theme--g90
 	{
-		$theme-colors: $dark-theme-colors;
-		@include color-property(null, $dark-theme-colors);
+		@return color-property(null, $dark-theme-colors);
 	} @else {
-		$theme-colors: $white-theme-colors;
-		@include color-property(null, $white-theme-colors);
+		@return color-property(null, $white-theme-colors);
 	}
-}
+};
+
+@function color-property($name, $theme-colors) {
+	$color-items: ();
 
-@mixin color-property($name, $theme-colors) {
 	@if type-of($theme-colors) == map {
 		@each $category, $value in $theme-colors {
-			@if type-of($value) == map {
-				@if $name == null {
-					@include color-property("#{$category}", $value);
-				} @else {
-					@include color-property("#{$name}-#{$category}", $value);
-				}
+			@if $name == null {
+				$color-items: map-merge(
+					$color-items,
+					color-property("#{$category}", $value)
+				)
 			} @else {
-				$color-map: map-merge(
-					$color-map,
-					(
-						"#{$name}-#{$category}": $value
-					)
-				);
+				$color-items: map-merge(
+					$color-items,
+					color-property("#{$name}-#{$category}", $value)
+				)
 			}
 		}
+		@return $color-items;
 	} @else {
-		#{$name}: $theme-colors;
+		@return (#{$name}: $theme-colors);
 	}
-}
+};
 
 .#{$prefix}--#{$charts-prefix}--chart-svg {
-	@include getThemeColors();
+	$color-map: getThemeColors();
 
 	@each $token, $color in $color-map {
 		.fill-#{$token} {
@@ -303,7 +54,7 @@ $color-map: ();
 }
 
 .#{$prefix}--#{$charts-prefix}--tooltip {
-	@include getThemeColors();
+	$color-map: getThemeColors();
 
 	@each $token, $color in $color-map {
 		.tooltip-#{$token} {