diff --git a/index.html b/index.html
index a933acbc..b91a2c52 100644
--- a/index.html
+++ b/index.html
@@ -60,6 +60,32 @@
     {% if rgbBlue < rgbMin %}
         {% assign rgbMin = rgbBlue %}
     {% endif %}
+
+
+    {% if rgbRed <= 0.03928 %}
+        {% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %}
+    {% else %}
+      {% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %}
+    {% endif %}
+    {% if rgbGreen <= 0.03928 %}
+        {% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %}
+    {% else %}
+        {% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %}
+    {% endif %}
+    {% if rgbBlue <= 0.03928 %}
+        {% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %}
+    {% else %}
+        {% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %}
+    {% endif %}
+    {% assign L = lRed | plus: lGreen | plus: lBlue %}
+
+    {% if L >= 0.6 %}
+        {% assign class = "dark" %}
+    {% else %}
+        {% assign class = "light" %}
+    {% endif %}
+
+
     {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
     {% assign rgbDelta = rgbMax | minus: rgbMin %}
     {% if rgbDelta == 0 %}
@@ -84,10 +110,10 @@
     {% endif %}
     {% if hslSaturation < 10 %}
         {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
-        {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
+        {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %}
     {% else %}
         {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
-        {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
+        {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %}
     {% endif %}
 {% endfor %}
 {% assign iconsArray = iconsUnsortedString | split: ";" %}
@@ -158,9 +184,22 @@
             width: 1.5rem;
         }
 
-        path, rect, circle {
+        .grid-item.light path,
+        .grid-item.light rect,
+        .grid-item.light circle,
+        .grid-item.light h2,
+        .grid-item.light p {
+            color: #FFF;
             fill: #FFF;
         }
+        .grid-item.dark path,
+        .grid-item.dark rect,
+        .grid-item.dark circle,
+        .grid-item.dark h2,
+        .grid-item.dark p {
+            color: #000;
+            fill: #000;
+        }
 
         #carbonads {
             height: 100%;
@@ -461,7 +500,7 @@
             </li>
             {% for icon in iconsArray %}
                 {% assign iconArray = icon | split: "," %}
-                <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
+                <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
                     <a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
                         {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
                         {% include_relative {{ filePath }} %}
@@ -472,7 +511,7 @@
             {% endfor %}
             {% for icon in greyscaleIconsArray %}
                 {% assign iconArray = icon | split: "," %}
-                <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
+                <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
                     <a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
                         {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
                         {% include_relative {{ filePath }} %}