diff --git a/scripts/colors.json b/scripts/colors.json
new file mode 100644
index 00000000..6d9a0ee6
--- /dev/null
+++ b/scripts/colors.json
@@ -0,0 +1,431 @@
+{
+  "alice_blue": {
+    "rgb": "( 240, 248, 255 )"
+  },
+  "antique_white": {
+    "rgb": "( 250, 235, 215 )"
+  },
+  "aqua": {
+    "rgb": "( 0, 255, 255 )"
+  },
+  "aquamarine": {
+    "rgb": "( 127, 255, 212 )"
+  },
+  "azure": {
+    "rgb": "( 240, 255, 255 )"
+  },
+  "beige": {
+    "rgb": "( 245, 245, 220 )"
+  },
+  "bisque": {
+    "rgb": "( 255, 228, 196 )"
+  },
+  "black": {
+    "rgb": "( 0, 0, 0 )"
+  },
+  "blanched_almond": {
+    "rgb": "( 255, 235, 205 )"
+  },
+  "blue": {
+    "rgb": "( 0, 0, 255 )"
+  },
+  "blue_violet": {
+    "rgb": "( 138, 43, 226 )"
+  },
+  "bright_green": {
+    "rgb": "( 0, 255, 0 )"
+  },
+  "brown": {
+    "rgb": "( 165, 42, 42 )"
+  },
+  "burly_wood": {
+    "rgb": "( 222, 184, 135 )"
+  },
+  "cadet_blue": {
+    "rgb": "( 95, 158, 160 )"
+  },
+  "chartreuse": {
+    "rgb": "( 127, 255, 0 )"
+  },
+  "chocolate": {
+    "rgb": "( 210, 105, 30 )"
+  },
+  "coral": {
+    "rgb": "( 255, 127, 80 )"
+  },
+  "cornflower_blue": {
+    "rgb": "( 100, 149, 237 )"
+  },
+  "cornsilk": {
+    "rgb": "( 255, 248, 220 )"
+  },
+  "crimson": {
+    "rgb": "( 220, 20, 60 )"
+  },
+  "cyan": {
+    "rgb": "( 0, 255, 255 )"
+  },
+  "dark_blue": {
+    "rgb": "( 0, 0, 139 )"
+  },
+  "dark_cyan": {
+    "rgb": "( 0, 139, 139 )"
+  },
+  "dark_goldenrod": {
+    "rgb": "( 184, 134, 11 )"
+  },
+  "dark_gray": {
+    "rgb": "( 169, 169, 169 )"
+  },
+  "dark_green": {
+    "rgb": "( 0, 100, 0 )"
+  },
+  "dark_khaki": {
+    "rgb": "( 189, 183, 107 )"
+  },
+  "dark_magenta": {
+    "rgb": "( 139, 0, 139 )"
+  },
+  "dark_olive_green": {
+    "rgb": "( 85, 107, 47 )"
+  },
+  "dark_orange": {
+    "rgb": "( 255, 140, 0 )"
+  },
+  "dark_orchid": {
+    "rgb": "( 153, 50, 204 )"
+  },
+  "dark_red": {
+    "rgb": "( 139, 0, 0 )"
+  },
+  "dark_salmon": {
+    "rgb": "( 233, 150, 122 )"
+  },
+  "dark_sea_green": {
+    "rgb": "( 143, 188, 139 )"
+  },
+  "dark_slate_blue": {
+    "rgb": "( 72, 61, 139 )"
+  },
+  "dark_slate_gray": {
+    "rgb": "( 47, 79, 79 )"
+  },
+  "dark_turquoise": {
+    "rgb": "( 0, 206, 209 )"
+  },
+  "dark_violet": {
+    "rgb": "( 148, 0, 211 )"
+  },
+  "deep_pink": {
+    "rgb": "( 255, 20, 147 )"
+  },
+  "deep_sky_blue": {
+    "rgb": "( 0, 191, 255 )"
+  },
+  "dim_gray": {
+    "rgb": "( 105, 105, 105 )"
+  },
+  "dodger_blue": {
+    "rgb": "( 30, 144, 255 )"
+  },
+  "firebrick": {
+    "rgb": "( 178, 34, 34 )"
+  },
+  "floral_white": {
+    "rgb": "( 255, 250, 240 )"
+  },
+  "forest_green": {
+    "rgb": "( 34, 139, 34 )"
+  },
+  "fuchsia": {
+    "rgb": "( 255, 0, 255 )"
+  },
+  "gainsboro": {
+    "rgb": "( 220, 220, 220 )"
+  },
+  "ghost_white": {
+    "rgb": "( 248, 248, 255 )"
+  },
+  "gold": {
+    "rgb": "( 255, 215, 0 )"
+  },
+  "goldenrod": {
+    "rgb": "( 218, 165, 32 )"
+  },
+  "gray": {
+    "rgb": "( 127, 127, 127 )"
+  },
+  "green": {
+    "rgb": "( 0, 127, 0 )"
+  },
+  "green_yellow": {
+    "rgb": "( 173, 255, 47 )"
+  },
+  "honeydew": {
+    "rgb": "( 240, 255, 240 )"
+  },
+  "hot_pink": {
+    "rgb": "( 255, 105, 180 )"
+  },
+  "indian_red": {
+    "rgb": "( 205, 92, 92 )"
+  },
+  "indigo": {
+    "rgb": "( 75, 0, 130 )"
+  },
+  "ivory": {
+    "rgb": "( 255, 255, 240 )"
+  },
+  "khaki": {
+    "rgb": "( 240, 230, 140 )"
+  },
+  "lavender": {
+    "rgb": "( 230, 230, 250 )"
+  },
+  "lavender_blush": {
+    "rgb": "( 255, 240, 245 )"
+  },
+  "lawn_green": {
+    "rgb": "( 124, 252, 0 )"
+  },
+  "lemon_chiffon": {
+    "rgb": "( 255, 250, 205 )"
+  },
+  "light_blue": {
+    "rgb": "( 173, 216, 230 )"
+  },
+  "light_coral": {
+    "rgb": "( 240, 127, 127 )"
+  },
+  "light_cyan": {
+    "rgb": "( 224, 255, 255 )"
+  },
+  "light_goldenrod_yellow": {
+    "rgb": "( 250, 250, 210 )"
+  },
+  "light_gray": {
+    "rgb": "( 211, 211, 211 )"
+  },
+  "light_green": {
+    "rgb": "( 144, 238, 144 )"
+  },
+  "light_pink": {
+    "rgb": "( 255, 182, 193 )"
+  },
+  "light_salmon": {
+    "rgb": "( 255, 160, 122 )"
+  },
+  "light_sea_green": {
+    "rgb": "( 32, 178, 170 )"
+  },
+  "light_sky_blue": {
+    "rgb": "( 135, 206, 250 )"
+  },
+  "light_slate_gray": {
+    "rgb": "( 119, 136, 153 )"
+  },
+  "light_steel_blue": {
+    "rgb": "( 176, 196, 222 )"
+  },
+  "light_yellow": {
+    "rgb": "( 255, 255, 224 )"
+  },
+  "lime": {
+    "rgb": "( 0, 255, 0 )"
+  },
+  "lime_green": {
+    "rgb": "( 50, 205, 50 )"
+  },
+  "linen": {
+    "rgb": "( 250, 240, 230 )"
+  },
+  "magenta": {
+    "rgb": "( 255, 0, 255 )"
+  },
+  "maroon": {
+    "rgb": "( 127, 0, 0 )"
+  },
+  "medium_aquamarine": {
+    "rgb": "( 102, 205, 170 )"
+  },
+  "medium_blue": {
+    "rgb": "( 0, 0, 205 )"
+  },
+  "medium_orchid": {
+    "rgb": "( 186, 85, 211 )"
+  },
+  "medium_purple": {
+    "rgb": "( 147, 112, 219 )"
+  },
+  "medium_sea_green": {
+    "rgb": "( 60, 179, 113 )"
+  },
+  "medium_slate_blue": {
+    "rgb": "( 123, 104, 238 )"
+  },
+  "medium_spring_green": {
+    "rgb": "( 0, 250, 154 )"
+  },
+  "medium_turquoise": {
+    "rgb": "( 72, 209, 204 )"
+  },
+  "medium_violet_red": {
+    "rgb": "( 199, 21, 133 )"
+  },
+  "midnight_blue": {
+    "rgb": "( 25, 25, 112 )"
+  },
+  "mint_cream": {
+    "rgb": "( 245, 255, 250 )"
+  },
+  "misty_rose": {
+    "rgb": "( 255, 228, 225 )"
+  },
+  "moccasin": {
+    "rgb": "( 255, 228, 181 )"
+  },
+  "navajo_white": {
+    "rgb": "( 255, 222, 173 )"
+  },
+  "navy": {
+    "rgb": "( 0, 0, 127 )"
+  },
+  "old_lace": {
+    "rgb": "( 253, 245, 230 )"
+  },
+  "olive": {
+    "rgb": "( 127, 127, 0 )"
+  },
+  "olive_drab": {
+    "rgb": "( 107, 142, 35 )"
+  },
+  "orange": {
+    "rgb": "( 255, 165, 0 )"
+  },
+  "orange_red": {
+    "rgb": "( 255, 69, 0 )"
+  },
+  "orchid": {
+    "rgb": "( 218, 112, 214 )"
+  },
+  "pale_goldenrod": {
+    "rgb": "( 238, 232, 170 )"
+  },
+  "pale_green": {
+    "rgb": "( 152, 251, 152 )"
+  },
+  "pale_turquoise": {
+    "rgb": "( 175, 238, 238 )"
+  },
+  "pale_violet_red": {
+    "rgb": "( 219, 112, 147 )"
+  },
+  "papaya_whip": {
+    "rgb": "( 255, 239, 213 )"
+  },
+  "peach_puff": {
+    "rgb": "( 255, 218, 185 )"
+  },
+  "peru": {
+    "rgb": "( 205, 133, 63 )"
+  },
+  "pink": {
+    "rgb": "( 255, 192, 203 )"
+  },
+  "plum": {
+    "rgb": "( 221, 160, 221 )"
+  },
+  "powder_blue": {
+    "rgb": "( 176, 224, 230 )"
+  },
+  "purple": {
+    "rgb": "( 127, 0, 127 )"
+  },
+  "red": {
+    "rgb": "( 255, 0, 0 )"
+  },
+  "rosy_brown": {
+    "rgb": "( 188, 143, 143 )"
+  },
+  "royal_blue": {
+    "rgb": "( 65, 105, 225 )"
+  },
+  "saddle_brown": {
+    "rgb": "( 139, 69, 19 )"
+  },
+  "salmon": {
+    "rgb": "( 250, 127, 114 )"
+  },
+  "sandy_brown": {
+    "rgb": "( 244, 164, 96 )"
+  },
+  "sea_green": {
+    "rgb": "( 46, 139, 87 )"
+  },
+  "sea_shell": {
+    "rgb": "( 255, 245, 238 )"
+  },
+  "sienna": {
+    "rgb": "( 160, 82, 45 )"
+  },
+  "silver": {
+    "rgb": "( 192, 192, 192 )"
+  },
+  "sky_blue": {
+    "rgb": "( 135, 206, 235 )"
+  },
+  "slate_blue": {
+    "rgb": "( 106, 90, 205 )"
+  },
+  "slate_gray": {
+    "rgb": "( 112, 127, 144 )"
+  },
+  "snow": {
+    "rgb": "( 255, 250, 250 )"
+  },
+  "spring_green": {
+    "rgb": "( 0, 255, 127 )"
+  },
+  "steel_blue": {
+    "rgb": "( 70, 130, 180 )"
+  },
+  "swinburne_red": {
+    "rgb": "( 237, 36, 25 )"
+  },
+  "tan": {
+    "rgb": "( 210, 180, 140 )"
+  },
+  "teal": {
+    "rgb": "( 0, 127, 127 )"
+  },
+  "thistle": {
+    "rgb": "( 216, 191, 216 )"
+  },
+  "tomato": {
+    "rgb": "( 255, 99, 71 )"
+  },
+  "transparent": {
+    "rgb": "( 255, 255, 255 )"
+  },
+  "turquoise": {
+    "rgb": "( 64, 224, 208 )"
+  },
+  "violet": {
+    "rgb": "( 238, 130, 238 )"
+  },
+  "wheat": {
+    "rgb": "( 245, 222, 179 )"
+  },
+  "white": {
+    "rgb": "( 255, 255, 255 )"
+  },
+  "white_smoke": {
+    "rgb": "( 245, 245, 245 )"
+  },
+  "yellow": {
+    "rgb": "( 255, 255, 0 )"
+  },
+  "yellow_green": {
+    "rgb": "( 154, 205, 50 )"
+  }
+}
diff --git a/scripts/components.cjs b/scripts/components.cjs
index dcb59e81..435136ac 100644
--- a/scripts/components.cjs
+++ b/scripts/components.cjs
@@ -1,5 +1,5 @@
 // Script to generate .mdx file in a specific format to adapt to Starlight from JSON data.
-// Author: @XQuestCode
+// Author: @XQuestCode and @omckeon
 const fs = require("fs");
 const kleur = require("kleur");
 const path = require('path');
@@ -74,6 +74,22 @@ function Mappings(jsonData) {
   }
 }
 
+function getColorData() {
+  var data = fs.readFileSync(`${__dirname}/colors.json`);
+  return JSON.parse(data);
+}
+
+function getColorRGBValues(colorName, jsonData) {
+  const simplifiedName = colorName.replace("color_", "");
+
+  const colorData = jsonData[simplifiedName];
+  let rgbValues = '( 0, 0, 0)';
+  if (colorData != undefined) {
+    rgbValues = colorData.rgb;
+  }
+  return rgbValues;
+}
+
 fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
   if (err) {
     console.error(kleur.red("Error reading JSON file:"), err);
@@ -86,7 +102,7 @@ fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
     Mappings(jsonData);
     console.log(`Generating MDX files for components`);
 
-
+    const jsonColors = getColorData();
 
 
     // Please select an option: "animations, audio, camera, color, database, geometry, graphics, input, json, networking, physics, resource_bundles, resources, social, sprites, terminal, timers, types, utilities, windows"
@@ -198,8 +214,8 @@ fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
           const formattedLink = formattedName3.toLowerCase().replace(/\s+/g, "-");
 
           const formattedName = isOverloaded
-            ? `\n#### [${functionName2}](#${formattedLink.toLowerCase()}-${index + 1})\n`
-            : `\n### [${functionName2}](#${formattedLink})\n`;
+            ? `\n#### [${functionName2}](#${formattedLink.toLowerCase()}-${index + 1})`
+            : `\n### [${functionName2}](#${formattedLink})`;
 
 
           // Replace type names in the description with formatted versions
@@ -212,7 +228,16 @@ fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
             );
           }
 
-          mdxContent += `${formattedName}\n`;
+          mdxContent += `${formattedName}`;
+
+          // Color boxes
+          if (functionName.startsWith("color_") && !functionName.endsWith("to_string")) {
+            const rgbValues = getColorRGBValues(functionName, jsonColors);
+            mdxContent += ` <div class='color-box' style="background:rgba${rgbValues}"></div>`
+          }
+
+          mdxContent += "\n\n";
+
           for (const names of functionNames) {
             const normalName = names
               .split("_")
@@ -225,7 +250,6 @@ fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
           }
           mdxContent += description ? `${description}\n\n` : "";
 
-
           // Add Parameters section only if there are parameters
           if (Object.keys(func.parameters).length > 0) {
             mdxContent += "**Parameters:**\n\n";
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 1ca1b556..fc328c2b 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -274,4 +274,13 @@ code {
 .expressive-code {
   border-radius: 0.6rem;
   box-shadow: var(--sl-shadow-md);
+}
+
+.color-box {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid lightgray;
+  margin-left: 20px;
 }
\ No newline at end of file