diff --git a/src/pivotal-ui/components/colors/colors.scss b/src/pivotal-ui/components/colors/colors.scss
index 3be266a1b..bfd23d947 100644
--- a/src/pivotal-ui/components/colors/colors.scss
+++ b/src/pivotal-ui/components/colors/colors.scss
@@ -64,6 +64,9 @@ $tabs-active-bg-color: $gray-2;
         <p class="mvn">npm-brand-yellow-2</p>
       </div>
     </div>
+</div>
+
+<div class="color-chip-row">
     <div class="chip">
       <div class="chip-color bg-npm-warm-1"></div>
       <div class="chip-color-name">
@@ -104,6 +107,12 @@ $tabs-active-bg-color: $gray-2;
         <p class="mvn">npm-blue-3</p>
       </div>
     </div>
+    <div class="chip">
+      <div class="chip-color bg-npm-blue-4"></div>
+      <div class="chip-color-name">
+        <p class="mvn">npm-blue-4</p>
+      </div>
+    </div>
 </div>
 
 <div class="color-chip-row">
@@ -581,6 +590,7 @@ $tabs-active-bg-color: $gray-2;
 }
 
 
+
 // warm
 .bg-npm-warm-1 {
   background-color: $npm-warm-1 !important;
@@ -608,6 +618,10 @@ $tabs-active-bg-color: $gray-2;
   background-color: $npm-blue-3 !important;
 }
 
+.bg-npm-blue-4 {
+  background-color: $npm-blue-4 !important;
+}
+
 // pastels
 
 .bg-npm-pastel-1 {
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
index a38e38d9a..0e1559e08 100644
--- a/src/pivotal-ui/components/pui-variables.scss
+++ b/src/pivotal-ui/components/pui-variables.scss
@@ -31,6 +31,7 @@ $npm-warm-3: #f09233;
 $npm-blue-1: #166B8A;
 $npm-blue-2: #2a79a7;
 $npm-blue-3: #1A8BCB; // also use for #1d80b9
+$npm-blue-4: #DBECEC;
 
 
 // pastels