Jekyll—Color code categories controlled by front matter & a 'categories' collection.

jekyll-category.html

---
title: Foo
date: 2016-12-17 11:09:00 -05:00
color: "#A96BE3"
---

list-categories.html

<ul class= "post-cat-list">
<!--  Loop through the categories selected by the editor in the post -->
  {% for post_cat in post.categories %}
<!--   assign a variable that captures the title of each category and makes it lowercase -->
    {% assign post_cat-title = post_cat | downcase %}
<!--   Loop through all categories that you've made in your 'categories' collection -->
      {% for site_cat in site.categories %}
<!-- assign a variable that capture the color from each category on your site   -->
        {% assign color = site_cat.color %}
<!--   assign a variable that captures the title of each category on your site and makes it lowercase -->
        {% assign site_cat-title = site_cat.title | downcase %}
<!--   compare the category titles from your site vs the post. If they match, display the content -->  
          {% if site_cat-title == post_cat-title  %}
              <li>
<!-- use the color assigned in the category as a background color -->
                  <div class="box" style="background-color: {{ color | default 'blue'}}"></div>
                  <p>
<!--         Display the category title -->
                    {{ post_cat-title }}
                  </p>
              </li>
           {% endif %}
           {% endfor %}
          {% endfor %}
        </ul>

post-bar.md

title	categories
title	foo bar

{{ content }}

Here is my output