Color Guide

16 dynamic color props

Open Props has 16 supercharged oklch variables for making palettes of any hue (caniuse oklch). This enables 360 hues and all sorts of chromas to be a palette, not some limited set of indigo, pink, cyan, etc sets like before.

In this new workflow you import the palette props. This gives you access to --color-{1-16}. Customize the palette with 1-3 palette props:

--palette-hue
--palette-hueRotateBy
--palette-chroma

Tint with any hue, add hue rotation along the palette for intrigue, and choose the vibrance. Here’s an example of the CSS you’ll write to customize the palette, as well as handy levers and a fun shuffle button.

@import "open-props/palette.css";

.palette-scope {

--palette-hue: 358;

--palette-hue-rotate-by: -5;

--palette-chroma: 0.9;

}

Your Palette

var(--color-0)

var(--color-1)

var(--color-2)

var(--color-3)

var(--color-4)

var(--color-5)

var(--color-6)

var(--color-7)

var(--color-8)

var(--color-9)

var(--color-10)

var(--color-11)

var(--color-12)

var(--color-13)

var(--color-14)

var(--color-15)

var(--color-1)
var(--color-2)
var(--color-3)
var(--color-4)
var(--color-5)
var(--color-6)
var(--color-7)
var(--color-8)
var(--color-9)
var(--color-10)
var(--color-11)
var(--color-12)
var(--color-13)
var(--color-14)
var(--color-15)
var(--color-16)

Palette Applied

Example usage of those 16 colors to create a light and dark theme. 1 document background, 3 surfaces (cards, etc) and 2 wells.

Accessibility

The following demo shows the WCAG contrast of a primary and secondary text colors on each well and surface.

Light

Dark

Surface

Well

Surface

Well

Light
Dark

[data-theme="light"], .light {
  --surface-1: white;
  --surface-2: var(--color-1);
  --surface-3: var(--color-3);
  --surface-document: var(--color-4);
  --well-1: var(--color-5);
  --well-2: var(--color-6);
  --text-1: var(--color-16);
  --text-2: var(--color-12);
}

[data-theme="dark"], .dark {
  --surface-1: var(--color-11);
  --surface-2: var(--color-12);
  --surface-3: var(--color-13);
  --surface-document: var(--color-14);
  --well-1: var(--color-15);
  --well-2: var(--color-16);
  --text-1: var(--color-1);
  --text-2: var(--color-5);
}