Open Swatch

An open color system using oklch to create a flexible and decomposable palette using modern CSS. 20 colours each with 12 steps, and a 13 step neutral scale provide flexibility for design while consistent calculations make subtle changes easily possible.

Add @import "https://unpkg.com/openswatch" in your CSS to start using.

Install the package with npm i openswatch to use with CSS bundlers.

Check out more on GitHub keithamus/openswatch.

          
.success {
  /* full set of CSS variables */
  color: var(--green-6);
  background: var(--green-3);
}

:root[data-high-intensity] {
  /* tweak color ramps by changing
  a couple of base varirables... */
  --color-lightness-inc: - 8%;
  --color-chroma-inc: 0.6;
}

Neutral Scale

Neutral 1
Neutral 2
Neutral 3
Neutral 4
Neutral 5
Neutral 6
Neutral 7
Neutral 8
Neutral 9
Neutral 10
Neutral 11
Neutral 12
Neutral 13

Stone Scale

Stone 1
Stone 2
Stone 3
Stone 4
Stone 5
Stone 6
Stone 7
Stone 8
Stone 9
Stone 10
Stone 11
Stone 12

Slate Scale

Slate 1
Slate 2
Slate 3
Slate 4
Slate 5
Slate 6
Slate 7
Slate 8
Slate 9
Slate 10
Slate 11
Slate 12

Red Scale

Red 1
Red 2
Red 3
Red 4
Red 5
Red 6
Red 7
Red 8
Red 9
Red 10
Red 11
Red 12

Orange Scale

Orange 1
Orange 2
Orange 3
Orange 4
Orange 5
Orange 6
Orange 7
Orange 8
Orange 9
Orange 10
Orange 11
Orange 12

Amber Scale

Amber 1
Amber 2
Amber 3
Amber 4
Amber 5
Amber 6
Amber 7
Amber 8
Amber 9
Amber 10
Amber 11
Amber 12

Gold Scale

Gold 1
Gold 2
Gold 3
Gold 4
Gold 5
Gold 6
Gold 7
Gold 8
Gold 9
Gold 10
Gold 11
Gold 12

Yellow Scale

Yellow 1
Yellow 2
Yellow 3
Yellow 4
Yellow 5
Yellow 6
Yellow 7
Yellow 8
Yellow 9
Yellow 10
Yellow 11
Yellow 12

Lime Scale

Lime 1
Lime 2
Lime 3
Lime 4
Lime 5
Lime 6
Lime 7
Lime 8
Lime 9
Lime 10
Lime 11
Lime 12

Green Scale

Green 1
Green 2
Green 3
Green 4
Green 5
Green 6
Green 7
Green 8
Green 9
Green 10
Green 11
Green 12

Emerald Scale

Emerald 1
Emerald 2
Emerald 3
Emerald 4
Emerald 5
Emerald 6
Emerald 7
Emerald 8
Emerald 9
Emerald 10
Emerald 11
Emerald 12

Teal Scale

Teal 1
Teal 2
Teal 3
Teal 4
Teal 5
Teal 6
Teal 7
Teal 8
Teal 9
Teal 10
Teal 11
Teal 12

Cyan Scale

Cyan 1
Cyan 2
Cyan 3
Cyan 4
Cyan 5
Cyan 6
Cyan 7
Cyan 8
Cyan 9
Cyan 10
Cyan 11
Cyan 12

Sky Scale

Sky 1
Sky 2
Sky 3
Sky 4
Sky 5
Sky 6
Sky 7
Sky 8
Sky 9
Sky 10
Sky 11
Sky 12

Blue Scale

Blue 1
Blue 2
Blue 3
Blue 4
Blue 5
Blue 6
Blue 7
Blue 8
Blue 9
Blue 10
Blue 11
Blue 12

Violet Scale

Violet 1
Violet 2
Violet 3
Violet 4
Violet 5
Violet 6
Violet 7
Violet 8
Violet 9
Violet 10
Violet 11
Violet 12

Purple Scale

Purple 1
Purple 2
Purple 3
Purple 4
Purple 5
Purple 6
Purple 7
Purple 8
Purple 9
Purple 10
Purple 11
Purple 12

Fuchsia Scale

Fuchsia 1
Fuchsia 2
Fuchsia 3
Fuchsia 4
Fuchsia 5
Fuchsia 6
Fuchsia 7
Fuchsia 8
Fuchsia 9
Fuchsia 10
Fuchsia 11
Fuchsia 12

Magenta Scale

Magenta 1
Magenta 2
Magenta 3
Magenta 4
Magenta 5
Magenta 6
Magenta 7
Magenta 8
Magenta 9
Magenta 10
Magenta 11
Magenta 12

Pink Scale

Pink 1
Pink 2
Pink 3
Pink 4
Pink 5
Pink 6
Pink 7
Pink 8
Pink 9
Pink 10
Pink 11
Pink 12

Rose Scale

Rose 1
Rose 2
Rose 3
Rose 4
Rose 5
Rose 6
Rose 7
Rose 8
Rose 9
Rose 10
Rose 11
Rose 12