diff --git a/index.html b/index.html
index 8f55d14d8..b9198c68a 100644
--- a/index.html
+++ b/index.html
@@ -226,7 +226,13 @@
             </li>
             {%- for icon in iconsArray -%}
             {%- assign iconArray = icon | split: "," -%}
-            <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}; --order-alpha: {{ iconArray[8] }}">
+            {%- assign hex0 = iconArray[4] | slice: 0 -%}
+            {%- assign hex1 = iconArray[4] | slice: 1 -%}
+            {%- assign hex2 = iconArray[4] | slice: 2 -%}
+            {%- assign hex3 = iconArray[4] | slice: 3 -%}
+            {%- assign hex4 = iconArray[4] | slice: 4 -%}
+            {%- assign hex5 = iconArray[4] | slice: 5 -%}
+            <li class="grid-item {{ iconArray[6] }}" style="background-color: #{%- if hex0 == hex1 and hex2 == hex3 and hex4 == hex5 -%}{{hex0}}{{hex2}}{{hex4}}{%- else -%}{{ iconArray[4] }}{%- endif -%}; --order-alpha: {{ iconArray[8] }}">
                 <a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
                     {%- assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" -%}
                     {%- include_relative {{ filePath }} -%}
@@ -237,7 +243,13 @@
             {%- endfor -%}
             {%- for icon in greyscaleIconsArray -%}
             {%- assign iconArray = icon | split: "," -%}
-            <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}; --order-alpha: {{ iconArray[8] }}">
+            {%- assign hex0 = iconArray[4] | slice: 0 -%}
+            {%- assign hex1 = iconArray[4] | slice: 1 -%}
+            {%- assign hex2 = iconArray[4] | slice: 2 -%}
+            {%- assign hex3 = iconArray[4] | slice: 3 -%}
+            {%- assign hex4 = iconArray[4] | slice: 4 -%}
+            {%- assign hex5 = iconArray[4] | slice: 5 -%}
+            <li class="grid-item {{ iconArray[6] }}" style="background-color: #{%- if hex0 == hex1 and hex2 == hex3 and hex4 == hex5 -%}{{hex0}}{{hex2}}{{hex4}}{%- else -%}{{ iconArray[4] }}{%- endif -%}; --order-alpha: {{ iconArray[8] }}">
                 <a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
                     {%- assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" -%}
                     {%- include_relative {{ filePath }} -%}