---
title: Colors
page-header: Colors
page-menu: base.colors
layout: default
permalink: colors.html
---

{% assign colors = '' | split: '' %}
{% for color in site.colors %}
{% assign colors = colors | push: color.class %}
{% endfor %}
{% assign colors = colors | push: 'dark' %}

<div class="row row-cards">
	<div class="col-12">
		<div class="card">
			<div class="card-body text-center">
				<div class="row g-3">
					<div class="col-12">
						<div class="row g-0 rounded overflow-hidden">
							{% for color in site.colors %}
							<div class="col">
								<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
							</div>
							{% endfor %}
						</div>
					</div>
					<div class="col-12">
						<div class="row g-0 rounded overflow-hidden">
							{% for color in site.colors %}
							<div class="col">
								<div class="bg-{{ color.class }}-darker text-{{ color.class }}-fg py-5">{{ color.class }}</div>
							</div>
							{% endfor %}
						</div>
					</div>
					<div class="col-12">
						<div class="row g-0 rounded overflow-hidden">
							{% for color in site.colors %}
							<div class="col">
								<div class="bg-{{ color.class }}-lighter text-{{ color.class }} py-5">{{ color.class }}</div>
							</div>
							{% endfor %}
						</div>
					</div>
					<div class="col-12">
						<div class="row g-0 rounded overflow-hidden">
							{% for color in site.colors %}
							<div class="col">
								<div class="bg-{{ color.class }}-lightest text-{{ color.class }} py-5">{{ color.class }}</div>
							</div>
							{% endfor %}
						</div>
					</div>
					<div class="col-12">
						<div class="row g-0 rounded overflow-hidden">
							<div class="col">
								<div class="bg-white text-white-fg py-5">white</div>
							</div>
							{% for color in site.grayColors %}
							<div class="col">
								<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
							</div>
							{% endfor %}
							<div class="col">
								<div class="bg-black text-black-fg py-5">black</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-12">
		<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 }}-lightest" 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-surface-tertiary">
							{% 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 }}-lightest" data-demo-color>{{ c | slice: 0, 2 }}</div>
								<div class="mt-2" data-demo-color-contrast></div>
							</td>
							{% endfor %}
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="col-12">
		{% assign colors = colors | push: 'inverted' %}
		{% assign colors = colors | push: 'white' %}
		{% assign colors = colors | push: 'transparent' %}
		<div class="row">
			<div class="col-6">
				<div class="card">
					<div class="card-body">
						<h3 class="card-title">
							Gradient
						</h3>
						<form action="">
							<div class="row g-4">
								<div class="col">
									<div>
										<label class="form-label">From</label>
										<select class="form-select" data-demo-color-select name="color-from">
											{% for color in colors %}
											<option value="{{ color }}">{{ color }}</option>
											{% endfor %}
										</select>
									</div>
									<div class="mt-3">
										<label class="form-label">To</label>
										<select class="form-select" data-demo-color-select name="color-to">
											{% for color in colors %}
											<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
												{{ color }}
											</option>
											{% endfor %}
										</select>
									</div>
								</div>
								<div class="col">
									<div>
										<label class="form-label">Via</label>
										<select class="form-select" data-demo-color-select name="color-via">
											<option></option>
											{% for color in colors %}
											<option value="{{ color }}">{{ color }}</option>
											{% endfor %}
										</select>
									</div>
									<div class="mt-3">
										<label class="form-label">Direction</label>
										<select class="form-select" data-demo-color-select name="color-direction">
											<option value="to-t">to top</option>
											<option value="to-te">to top right</option>
											<option value="to-r" selected>to right</option>
											<option value="to-be">to bottom right</option>
											<option value="to-b">to bottom</option>
											<option value="to-bs">to bottom left</option>
											<option value="to-s">to left</option>
											<option value="to-ts">to top left</option>
										</select>
									</div>
								</div>
								<div class="col-12">
									<div class="border rounded bg-pattern-transparent overflow-hidden">
										<div id="gradient-preview"
											class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
											<div class=" px-4 py-5"></div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-6">
				<div class="card">
					<div class="card-body">
						<div class="row">
							<div class="col">
								<div class="space-y">
									{% for color in colors %}
									<div
										class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent px-4 py-2">
									</div>
									{% endfor %}
								</div>
							</div>
							<div class="col">
								<div class="space-y">
									{% for color in colors %}
									<div
										class="border rounded bg-gradient bg-gradient-to-{{ color }} bg-gradient-from-transparent px-4 py-2">
									</div>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		var gradientPreview = document.getElementById('gradient-preview');
		var colorFrom = document.querySelector('[name="color-from"]');
		var colorTo = document.querySelector('[name="color-to"]');
		var colorVia = document.querySelector('[name="color-via"]');
		var colorDirection = document.querySelector('[name="color-direction"]');

		function updateGradient() {
			var from = colorFrom.value;
			var to = colorTo.value;
			var via = colorVia.value;
			var direction = colorDirection.value;

			var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to;

			if (via) {
				gradient += ' bg-gradient-via-' + via;
			}

			gradient += ' bg-gradient-' + direction;

			gradientPreview.className = gradient;
		}

		colorFrom.addEventListener('change', updateGradient);
		colorTo.addEventListener('change', updateGradient);
		colorVia.addEventListener('change', updateGradient);
		colorDirection.addEventListener('change', updateGradient);

		updateGradient();
	});
</script>