diff --git a/static/css/casestudies.css b/static/css/casestudies.css
index cc677004c4..dc35caced1 100644
--- a/static/css/casestudies.css
+++ b/static/css/casestudies.css
@@ -29,7 +29,7 @@
 }
 
 .casestudies a {
-    color: #013243 !important;
+    color: rgb(1, 50, 67) !important;
 }
 
 .casestudies-box-title {
@@ -74,7 +74,7 @@
     left: 0;
     right: 100%;
     bottom: 0;
-    background: #013243;
+    background: rgb(1, 50, 67);
     height: 4px;
     -webkit-transition-property: right;
     transition-property: right;
@@ -86,4 +86,4 @@
 
 .casestudies-underline:hover:before, .casestudies-underline:focus:before, .casestudies-underline:active:before {
     right: 0;
-}
\ No newline at end of file
+}
diff --git a/static/css/content.css b/static/css/content.css
index 3fa8fbff3a..00e10cf67d 100644
--- a/static/css/content.css
+++ b/static/css/content.css
@@ -35,7 +35,7 @@
 }
 
 .content-container .divider {
-    background: #013243;
+    background: rgb(1, 50, 67);
 }
 
 .content-container h2 {
@@ -61,7 +61,7 @@
 
 #shortcuts {
     margin-top: 10px;
-    border-left: 1px solid #013243;
+    border-left: 1px solid rgb(1, 50, 67);
 }
 
 .shortcuts-H2 {
@@ -86,4 +86,4 @@
     .shortcuts-container {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/static/css/keyfeatures.css b/static/css/keyfeatures.css
index a014dcbc2e..5b505d45d1 100644
--- a/static/css/keyfeatures.css
+++ b/static/css/keyfeatures.css
@@ -28,7 +28,7 @@
 }
 
 .keyfeatures-box-text > a {
-    color: #4D77CF;
+    color: rgb(77, 119, 207);
 }
 
 .keyfeatures-box-text {
diff --git a/static/css/news.css b/static/css/news.css
index 6108aee8ba..cad6dd5cb2 100644
--- a/static/css/news.css
+++ b/static/css/news.css
@@ -4,17 +4,17 @@
     align-items: center;
     width: 100vw;
     min-height: 45px;
-    background-color: #013243;
-    color: white;
+    background-color: rgb(1, 50, 67);
+    color: rgb(255, 255, 255);
     white-space: nowrap;
 }
 
 .news-container a {
-    color: white;
+    color: rgb(255, 255, 255);
 }
 
 .news-container a:hover {
-    color: white;
+    color: rgb(255, 255, 255);
 }
 
 .news-title {
diff --git a/static/css/shell.css b/static/css/shell.css
index 8bfc885519..f88730dded 100644
--- a/static/css/shell.css
+++ b/static/css/shell.css
@@ -11,7 +11,7 @@
     justify-content: center;
     width: 100vw;
     min-height: 455px;
-    background-color: #EEEEEE;
+    background-color: rgb(238, 238, 238);
 }
 
 .numpy-shell-container {
@@ -79,8 +79,8 @@
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color: black;
-    background-color: #EEEEEE;
+    color: rgb(0,0,0);
+    background-color: rgb(238, 238, 238);
     border: none;
     border-radius: 25px;
     outline: none;
@@ -122,9 +122,9 @@
     min-width: 500px;
     margin: 15px;
     padding: 0 17px;
-    color: #FFFFFF;
+    color: rgb(255 ,255 ,255);
     overflow: auto;
-    background-color: #013243;
+    background-color: rgb(1, 50, 67);
     font-family: 'Source Code Pro', monospace;
 }
 
@@ -137,11 +137,11 @@
 }
 
 .CodeMirror pre {
-    color: #FFFFFF !important;
+    color: rgb(255, 255, 255) !important;
 }
 
 .CodeMirror-cursor {
-    color: #FFFFFF !important;
+    color: rgb(255, 255, 255) !important;
     border-left: 1px solid white !important;
 }
 
@@ -160,8 +160,8 @@
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color: black;
-    background-color: #EEEEEE;
+    color: rgb(0,0,0);
+    background-color: rgb(238 ,238 ,238);
     border: none;
     border-radius: 25px;
     outline: none;
diff --git a/static/css/styles.css b/static/css/styles.css
index e61e0f6ce9..9b62416f55 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,18 +1,18 @@
 /* NumPy Color Palette */
-/* #FFC553 Mustard */
-/* #4DABCF Maximum Blue */
-/* #4D77CF Han Blue */
-/* #FFFFFF White */
-/* #EEEEEE Isabelline */
-/* #6C7A89 Aurometalsaurus */
-/* #013243 Warm Black */
+/* rgb(255, 197, 83) NumPy Yellow */
+/* rgb(77, 171, 207) NumPy Ndarray Blue */
+/* rgb(77, 119, 207) NumPy Deep Blue */
+/* rgb(255, 255, 255) White */
+/* rgb(238, 238, 238) NumPy Cloud Gray */
+/* rgb(108, 122, 137) NumPy Slate Gray */
+/* rgb(1, 50, 67) NumPy Warm Black */
 
 body {
     font-family: 'Lato', sans-serif;
 }
 
 em {
-    color: black !important;
+    color: rgb(0, 0, 0) !important;
 }
 
 .flex-row {
@@ -58,7 +58,7 @@ em {
     font-family: 'Lato', sans-serif;
     font-weight: 900;
     font-size: 6em;
-    color: #013243;
+    color: rgb(1, 50, 67);
 }
 
 .hero-logo {
@@ -82,8 +82,8 @@ em {
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color:#FFFFFF;
-    background-color: #013243;
+    color:rgb(255, 255, 255);
+    background-color: rgb(1, 50, 67);
     border: none;
     border-radius: 25px;
     outline: none;
@@ -93,19 +93,19 @@ em {
 }
 
 #navbar-item {
-    color: #013243;
+    color: rgb(1, 50, 67);
     text-decoration: none;
 }
 
 #navbar-item:hover {
-    color: #4DABCF !important;
+    color: rgb(77, 171, 207) !important;
 }
 
 #feature-card {
     height: 475px;
 }
 #backtotop.visible #backtotop-color:hover {
-    background: #ffc553;
+    background: rgb(255, 197, 83);
 }
 
 .mt-30 {
@@ -180,7 +180,7 @@ p {
 
 /* Footer */
 #footer {
-    background-color: #013243;
+    background-color: rgb(1, 50, 67);
 }
 
 .footer-logo-column {
@@ -203,7 +203,7 @@ p {
 
 .footer-link, .footer-link:hover {
     font-size: 1rem;
-    color: #EEEEEE;
+    color: rgb(238, 238, 238);
 }
 
 .footer-actions {
@@ -217,7 +217,7 @@ p {
 
 .footer-actions p {
     margin: 0;
-    color: #EEEEEE;
+    color: rgb(238, 238, 238);
 }
 
 .sign-up-container {
@@ -230,27 +230,27 @@ p {
 
 .sign-up-image {
     padding: 5px 10px 6px 10px;
-    border-right: 1px solid #EEEEEE;
-    background-color: #EEEEEE;
+    border-right: 1px solid rgb(238, 238, 238);
+    background-color: rgb(238, 238, 238);
     border-radius: 5px 0 0 5px;
 }
 
 .sign-up-input {
-    background-color: white;
+    background-color: rgb(238, 238, 238);
     border-radius: 0 5px 5px 0;
     border: none;
     width: 75%;
     height: 35px;
     padding-left: 5px;
     font-size: 14px;
-    color: #013243;
+    color: rgb(1, 50, 67);
 }
 
 .submission-instructions {
     position: absolute;
     right: 18%;
     font-size: 10px;
-    color: #6c7a89;
+    color: rgb(108, 122, 137);
 }
 
 .signup-button {
@@ -260,7 +260,7 @@ p {
 .thank-you {
     display: none;
     height: 75px;
-    color: #EEEEEE;
+    color: rgb(238, 238, 238);
     align-items: center;
 }
 
@@ -270,7 +270,7 @@ p {
 
 .copyright {
     font-size: 12px;
-    color: #EEEEEE;
+    color: rgb(238, 238, 238);
 }
 
 figcaption {
@@ -295,7 +295,7 @@ blockquote {
 
 blockquote p {
     padding: 15px;
-    background: #EEEEEE;
+    background: rgb(238, 238, 238);
     border-radius: 5px;
 }
 
@@ -347,7 +347,7 @@ blockquote p::after {
         border-radius: 5px;
         margin-left: 5px;
         width: 60px;
-        color: black;
+        color: rgb(0, 0, 0);
         border:none;
         outline:none;
     }
diff --git a/static/css/tabs.css b/static/css/tabs.css
index 93fd8c9c2b..a7c39bcd4e 100644
--- a/static/css/tabs.css
+++ b/static/css/tabs.css
@@ -36,7 +36,7 @@
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color: #6C7A89;
+    color: rgb(108, 122, 137);
 }
 
 #tabs-content > li {
@@ -85,8 +85,8 @@
 }
 
 .image-grid > div {
-    background-color: #EEEEEE;
-    border: 2px solid #FFFFFF;
+    background-color: rgb(238, 238, 238);
+    border: 2px solid rgb(255, 255, 255);
     border-radius: 10px;
     padding: 10px;
 }
@@ -102,7 +102,7 @@ td > a {
 }
 
 tr.highlight-th {
-    border-top: 1px solid #EEEEEE;
+    border-top: 1px solid rgb(238, 238, 238);
     font-size: 0.8rem;
 }
 
@@ -134,7 +134,7 @@ td.full-center-text {
 td.lastrow-center-text {
     text-align: center;
     line-height: 35%;
-    border-bottom: 1px solid #EEEEEE;
+    border-bottom: 1px solid rgb(255, 255, 255);
 }
 
 /* Array Libraries */