---
title: Colors
page-header: Colors
menu: base.colors
---

{% assign colors = '' | split: '' %}
{% for color in site.colors %}
{% assign colors = colors | push: color[0] %}
{% endfor %}
{% assign colors = colors | push: 'dark' %}
{% assign colors = colors | push: 'muted' %}

<div class="card">
	<div class="card-body">
		<div class="table-responsive">
			<table class="table text-center">
				<tr>
					{% for color in colors %}
					<td>
						<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
						</div>
					</td>
					{% endfor %}
				</tr>
				<tr>
					{% for color in colors %}
					<td>
						<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
					</td>
					{% endfor %}
				</tr>
				<tr>
					{% for color in colors %}
					<td>
						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
					</td>
					{% endfor %}
				</tr>
				<tr class="bg-light">
					{% for color in colors %}
					<td>
						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
					</td>
					{% endfor %}
				</tr>
				<tr class="bg-dark text-white">
					{% for color in colors %}
					<td>
						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
						<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
					</td>
					{% endfor %}
				</tr>
				<tr class="bg-dark text-white">
					{% for color in colors %}
					<td>
						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
						<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
						<div class="mt-2" data-demo-color-contrast></div>
					</td>
					{% endfor %}
				</tr>
			</table>
		</div>
	</div>
</div>