diff --git a/docs/source/backgrounds.md b/docs/source/backgrounds.md
index 56bc4a035..57053099e 100644
--- a/docs/source/backgrounds.md
+++ b/docs/source/backgrounds.md
@@ -39,12 +39,20 @@ title: "Backgrounds"
     <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red-light</code></td>
   </tr>
   <tr>
-    <td class="w-24 h-12 bg-amber border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber</code></td>
+    <td class="w-24 h-12 bg-orange border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange</code></td>
   </tr>
   <tr>
-    <td class="w-24 h-12 bg-amber-light border-b border-dark-overlay-softer"></td>
-    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber-light</code></td>
+    <td class="w-24 h-12 bg-orange-light border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange-light</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-yellow-light border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow-light</code></td>
   </tr>
   <tr>
     <td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
@@ -54,6 +62,14 @@ title: "Backgrounds"
     <td class="w-24 h-12 bg-green-light border-b border-dark-overlay-softer"></td>
     <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green-light</code></td>
   </tr>
+  <tr>
+    <td class="w-24 h-12 bg-teal border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-teal-light border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal-light</code></td>
+  </tr>
   <tr>
     <td class="w-24 h-12 bg-blue border-b border-dark-overlay-softer"></td>
     <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue</code></td>
@@ -70,6 +86,22 @@ title: "Backgrounds"
     <td class="w-24 h-12 bg-indigo-light border-b border-dark-overlay-softer"></td>
     <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo-light</code></td>
   </tr>
+  <tr>
+    <td class="w-24 h-12 bg-purple border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-purple-light border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple-light</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-pink border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink</code></td>
+  </tr>
+  <tr>
+    <td class="w-24 h-12 bg-pink-light border-b border-dark-overlay-softer"></td>
+    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink-light</code></td>
+  </tr>
 </table>
 
 Using the utilities in HTML:
diff --git a/src/colors.less b/src/colors.less
index 47de8cef0..bdd77f5f2 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -13,16 +13,18 @@
 
 @color-red:          #f25451;
 @color-red-light:    #fa8785;
-@color-amber:        #ffd129;
-@color-amber-light:  #ffedad;
+@color-orange:       #ffb447;
+@color-orange-light: #ffce85;
+@color-yellow:       #ffed4a;
+@color-yellow-light: #fff6a5;
 @color-green:        #77d48a;
 @color-green-light:  #b1f3be;
 @color-teal:         #4dc0b5;
 @color-teal-light:   #92e0d8;
 @color-blue:         #4aa2ea;
 @color-blue-light:   #acdaff;
-@color-indigo:       #6b64cc;
-@color-indigo-light: #a9a4ed;
+@color-indigo:       #6574cd;
+@color-indigo-light: #a3aeed;
 @color-purple:       #976ae6;
 @color-purple-light: #ceb3ff;
 @color-pink:         #f66d9b;
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 6206fbd1e..4d01c7c37 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -9,8 +9,10 @@
 
   'red'          @color-red,
   'red-light'    @color-red-light,
-  'amber'       @color-amber,
-  'amber-light' @color-amber-light,
+  'orange'       @color-orange,
+  'orange-light' @color-orange-light,
+  'yellow'       @color-yellow,
+  'yellow-light' @color-yellow-light,
   'green'        @color-green,
   'green-light'  @color-green-light,
   'teal'         @color-teal,
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index c51690b88..b71377b26 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -45,8 +45,10 @@
 
   'red'          @color-red,
   'red-light'    @color-red-light,
-  'amber'        @color-amber,
-  'amber-light'  @color-amber-light,
+  'orange'        @color-orange,
+  'orange-light'  @color-orange-light,
+  'yellow'        @color-yellow,
+  'yellow-light'  @color-yellow-light,
   'green'        @color-green,
   'green-light'  @color-green-light,
   'teal'         @color-teal,
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 41aae8795..983a2ce6a 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -69,8 +69,10 @@
 
   'red'          @color-red,
   'red-light'    @color-red-light,
-  'amber'        @color-amber,
-  'amber-light'  @color-amber-light,
+  'orange'        @color-orange,
+  'orange-light'  @color-orange-light,
+  'yellow'        @color-yellow,
+  'yellow-light'  @color-yellow-light,
   'green'        @color-green,
   'green-light'  @color-green-light,
   'teal'         @color-teal,