Colors.css

A library of color palettes
for any CSS project.

Custom properties and utility classes for nine palettes — Flexoki, Material, Ubuntu, elementary, and more. Drop one line in your <head>; ship.

GitHub jsDelivr CDN Releases v2 MIT licensed

01Install

Two ways to pull Colors.css into a project. The single-palette files are roughly a tenth the size of the bundle, so reach for them when you only need one.

Everything · all nine palettes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/eustasy/Colors.css@2/colors.min.css" crossorigin="anonymous">

One palette only

Replace {palette} with one of baseline, elementary, flatui, flexoki, goddardhale, material, or ubuntu.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/eustasy/Colors.css@2/{palette}.min.css" crossorigin="anonymous">

02Usage

Every color ships two ways: as a custom property you can pull into your own CSS, and as a utility class you can drop onto any element. Names are kebab-cased and prefixed by their palette — --flatui-belize-hole, --flexoki-red-600, and so on.

1 — As a CSS custom property

.cta {
  background: var(--flatui-belize-hole);
  color: var(--flatui-clouds);
}

Use anywhere a color works — gradients, shadows, filters, the lot.

2 — As a utility class

Each color is also exposed across nine class prefixes:

background-* color-* fill-* border-color-* stroke-* outline-color-* text-decoration-color-* caret-color-* accent-color-* 
<button class="background-flatui-belize-hole color-flatui-clouds">Save</button>
Wider gamut? All palette values are authored in sRGB hex, but every swatch below also lets you copy as oklch() or color(display-p3 …) — useful on modern displays where the wider gamut lets reds and greens land more vividly. See Josh Comeau's A guide to modern CSS colors for the why.

03Palettes

Hover a swatch to see all the ways you can copy it — the variable name, utility class, hex, RGB, HSL, OKLCH, or wide-gamut Display P3. Clicking the swatch itself copies whichever format is selected in the toolbar.