diff --git a/pages/_docs/colors.md b/pages/_docs/colors.md
index 9fb3f2f3f..809ec81f9 100644
--- a/pages/_docs/colors.md
+++ b/pages/_docs/colors.md
@@ -3,49 +3,10 @@ title: Colors
 menu: docs.colors
 ---
 
-<div class="row">
-	<div class="col-sm-6 col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Default colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }}</strong><br />
-							<code>.bg-{{ color[0] }}</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-	<div class="col-sm-6 col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Light colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }} lite</strong><br />
-							<code class="bg-{{ color[0] }}-lt">.bg-{{ color[0] }}-lt</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+## Base colors
+
+{% include example/colors-table.html %}
+
+## Light colors 
+ 
+{% include example/colors-table.html light=true %}
diff --git a/pages/_includes/example/colors-table.html b/pages/_includes/example/colors-table.html
new file mode 100644
index 000000000..e12e50482
--- /dev/null
+++ b/pages/_includes/example/colors-table.html
@@ -0,0 +1,20 @@
+{% assign colors = include.colors | default: site.colors %}
+{% assign light = include.light %}
+
+<div class="example">
+   <div class="mb-n3">
+      {% for color in colors %}
+      <div class="row row-sm mb-3 align-items-center">
+         <div class="col-auto">
+            <div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
+         </div>
+         <div class="col">
+            <span class="font-weight-semibold">{{ color[1].title }}</span><br/>
+            <code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
+         </div>
+      </div>
+      {% endfor %}
+   </div>
+</div>
+
+
diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb
index ae660c3e4..8b2423f06 100644
--- a/pages/_plugins/jekyll-filters.rb
+++ b/pages/_plugins/jekyll-filters.rb
@@ -84,6 +84,11 @@ module Jekyll
 
       input.gsub re, repl_str
     end
+
+    def hex_to_rgb(color)
+      r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
+      "rgb(#{r.hex}, #{g.hex}, #{b.hex})"
+    end
   end
 end