diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..abc8a1bac0a9d1e3febd010c8c63bd24d9c8e97b
Binary files /dev/null and b/.DS_Store differ
diff --git a/CI-ColorWebs/.DS_Store b/CI-ColorWebs/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..632f4dd3c8300dc3fac2b29f559c54785367e903
Binary files /dev/null and b/CI-ColorWebs/.DS_Store differ
diff --git a/CI-ColorWebs/Pages/TruePalette.cshtml b/CI-ColorWebs/Pages/TruePalette.cshtml
new file mode 100644
index 0000000000000000000000000000000000000000..cd25c1d14ed252b43adf1f7e9758477cb76c9b1a
--- /dev/null
+++ b/CI-ColorWebs/Pages/TruePalette.cshtml
@@ -0,0 +1,21 @@
+@page
+@model CI_ColorWebs.Pages.TruePaletteModel
+@{
+    ViewData["Title"] = "True Palette";
+}
+
+<div class="text-center">
+    <h1 class="display-4">Welcome</h1>
+    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
+    <h2>
+        <button id="gsetNew">Generate New Set Palette</button>
+        <span id="palColor"></span>
+        <span id="palColor2"></span>
+        <span id="palColor3"></span>
+        <span id="palColor4"></span>
+        <span id="palColor5"></span>
+        <span id="palColor6"></span>
+        <canvas width = "700"></canvas>
+    </h2>
+</div>
+<script src = './js/truepalette.js'></script>
diff --git a/CI-ColorWebs/Pages/TruePalette.cshtml.cs b/CI-ColorWebs/Pages/TruePalette.cshtml.cs
new file mode 100644
index 0000000000000000000000000000000000000000..e11329d49d8fdbe32647f2e7caff6e6452e57fcc
--- /dev/null
+++ b/CI-ColorWebs/Pages/TruePalette.cshtml.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace CI_ColorWebs.Pages;
+
+public class TruePaletteModel : PageModel
+{
+    private readonly ILogger<TruePaletteModel> _logger;
+
+    public TruePaletteModel(ILogger<TruePaletteModel> logger)
+    {
+        _logger = logger;
+    }
+    
+    public void OnGet()
+    {
+    }
+}
\ No newline at end of file
diff --git a/CI-ColorWebs/wwwroot/.DS_Store b/CI-ColorWebs/wwwroot/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..fe09e79f37b55109e046aa05892e4ab05b8e937f
Binary files /dev/null and b/CI-ColorWebs/wwwroot/.DS_Store differ
diff --git a/CI-ColorWebs/wwwroot/js/truepalette.js b/CI-ColorWebs/wwwroot/js/truepalette.js
new file mode 100644
index 0000000000000000000000000000000000000000..66dc84fb653fd50e681488685caf9ba2d5a8c472
--- /dev/null
+++ b/CI-ColorWebs/wwwroot/js/truepalette.js
@@ -0,0 +1,71 @@
+
+const canvas = document.querySelector("canvas");
+const context = canvas.getContext("2d");
+
+const bre = () => {
+    const dict = [];
+    dict[1] = "#6F3144 #A1552A #CB6042 #D48341 #FBAB34 #CF9B9B";
+    dict[2] = "#CBBED8 #F8D6CB #CCC969 #E5CEB9 #9B8B81 #242424";
+    dict[3] = "#f0213b #ba8f2a #984900 #b9a68a #7f093f #434a16";
+    dict[4] = "#1e81b0 #eeeee4 #e28743 #eab676 #76b5c5 #21130d";
+    dict[5] = "#FFFFC2 #FFBEE2 #E7BDF1 #DAFFC1 #FCFF78 #FDB0B0";
+    dict[6] = "#18B8FE #1A6785 #3776BD #2D50B1 #3324E4 #159A76";
+    dict[7] = "#FAB162 #FB0D12 #18AE26 #3E2816 #FE7707 #FEB163";
+    dict[8] = "#0B2C02 #232922 #1C150D #413629 #773A03 #876239";
+    dict[9] = "#C1A676 #9A9D99 #504745 #9F7054 #DEDBD3 #676A5E";
+    dict[10] = "#0A4C60 #148284 #84C9AF #E3D196 #E88007 #BC5207";
+    dict[11] = "#FFD6DA #FFC6D0 #E1F7E7 #D1EAF5 #C3D6F2 #768CCE";
+    dict[12] = "#204362 #16879E #97E5DB #5FD1B8 #5C5C60 #CACACA";
+    dict[13] = "#FFEADA #FFD5A4 #FFB5A4 #FDEAC3 #F4CBB1 #C8A18F";
+    dict[14] = "#F0E6E4 #F7D8DF #F47D85 #DF4C5B #989E6A #5D6E4A";
+    dict[15] = "#DBE5CE #6FB1B4 #3A727F #274B58 #F2D58F #F9ECD1";
+    dict[16] = "#37D3EE #D5A6C7 #F99DB0 #B0D197 #F0E9EB #FAC5D4";
+    dict[17] = "#F9D8C5 #FCBDAB #94D183 #6EBDA8 #269493 #20485A";
+    dict[18] = "#37898C #9DD8D4 #C4E9E4 #F0D9C7 #FCD0D0 #F79CB1";
+    dict[19] = "#235680 #B0D5D5 #E0F0ED #F9B0CC #BB648D #C999BB";
+    dict[20] = "#7A5758 #DBBBBC #C897C4 #AD7CB3 #975794 #294867";
+    dict[21] = "#C44953 #E86C74 #F48F82 #F7BBA0 #6D5F69 #E7E6E4";
+    dict[22] = "#DCF4F5 #ACE0DD #FA6690 #FEC0CF #FEEBF2 #AE7F6C";
+    dict[23] = "#EADFF2 #DCCBED #FEE5EB #FCB7D0 #F07BBB #9979C1";
+    dict[24] = "#FDBF9C #F17173 #E23F6A #C63E81 #823E88 #AA66A5";
+    
+
+
+
+    let number = Math.floor(Math.random() * 24) + 1;
+    const phrase = dict[number];
+    const words = phrase.split(' ');
+    const leColor = [];
+    for (let i = 0; i <= 5; i++)
+    {
+        leColor.push(words[i]);
+    }
+
+    palColor.innerHTML = leColor[0];
+    context.fillStyle = leColor[0];
+    context.fillRect(110, 0, 70, 100);
+    document.getElementById("palColor").style.color = leColor[0];
+    palColor2.innerHTML = leColor[1];
+    context.fillStyle = leColor[1];
+    context.fillRect(180, 0, 70, 100);
+    document.getElementById("palColor2").style.color = leColor[1];
+    palColor3.innerHTML = leColor[2];
+    context.fillStyle = leColor[2];
+    context.fillRect(250, 0, 70, 100);
+    document.getElementById("palColor3").style.color = leColor[2];
+    palColor4.innerHTML = leColor[3];
+    context.fillStyle = leColor[3];
+    context.fillRect(320, 0, 70, 100);
+    document.getElementById("palColor4").style.color = leColor[3];
+    palColor5.innerHTML = leColor[4];
+    context.fillStyle = leColor[4];
+    context.fillRect(390, 0, 70, 100);
+    document.getElementById("palColor5").style.color = leColor[4];
+    palColor6.innerHTML = leColor[5];
+    context.fillStyle = leColor[5];
+    context.fillRect(460, 0, 70, 100);
+    document.getElementById("palColor6").style.color = leColor[5];
+}
+
+document.getElementById("gsetNew").addEventListener("click", bre);
+bre();