diff --git a/tailwind.config.js b/tailwind.config.js
index 38f00c3..3ae353c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,7 +40,7 @@ module.exports = {
           950: '#062d2a',
         },
         'carhop-orange': {
-          50: '#fff8eb',
+          50: getBaseColor('carhop-orange-light'),
           100: '#ffebc6',
           200: '#ffd588',
           300: '#ffba4a',
@@ -66,7 +66,7 @@ module.exports = {
           950: '#033249',
         },
         'carhop-red': {
-          50: '#fcf3f8',
+          50: getBaseColor('carhop-red-light'),
           100: '#fbe8f2',
           200: '#f8d2e6',
           300: '#f4add0',
@@ -79,7 +79,7 @@ module.exports = {
           950: '#4c0b21',
         },
         'carhop-purple': {
-          50: '#f8f5ff',
+          50: getBaseColor('carhop-purple-light'),
           100: '#efe8ff',
           200: '#e2d4ff',
           300: getBaseColor('carhop-purple'), // Base Color
diff --git a/theme.json b/theme.json
index 5c3f1e7..bf9d263 100644
--- a/theme.json
+++ b/theme.json
@@ -39,16 +39,31 @@
           "slug": "carhop-orange",
           "color": "#ffa630"
         },
+        {
+          "name": "Carhop Orange Light",
+          "slug": "carhop-orange-light",
+          "color": "#fff8eb"
+        },
         {
           "name": "Carhop Red",
           "slug": "carhop-red",
           "color": "#ae2154"
         },
+        {
+          "name": "Carhop Red Light",
+          "slug": "carhop-red-light",
+          "color": "#fcf3f8"
+        },
         {
           "name": "Carhop Purple",
           "slug": "carhop-purple",
           "color": "#d6c3ff"
         },
+        {
+          "name": "Carhop Purple Light",
+          "slug": "carhop-purple-light",
+          "color": "#f8f5ff"
+        },
         {
           "name": "Carhop Gray",
           "slug": "carhop-gray",