Expanded Palette

The default color palette is color_expanded.css and consists of ten colors, eight of which have nine stops; gray, red, pink, purple, blue, green, yellow, orange. Yin (black) has ten stops while yang (white) only has one stop.

If you want more granularity (read: opacity), you can call the raw version of the color (append -raw to the variable name) which will return the OKLCH values so you can do something like this: oklch(var(--uchu-gray-1-raw) / 40%).

Gray

var(--uchu-gray-1)
var(--uchu-gray-2)
var(--uchu-gray-3)
var(--uchu-gray-4)
var(--uchu-gray-5)
var(--uchu-gray-6)
var(--uchu-gray-7)
var(--uchu-gray-8)
var(--uchu-gray-9)

Red

var(--uchu-red-1)
var(--uchu-red-2)
var(--uchu-red-3)
var(--uchu-red-4)
var(--uchu-red-5)
var(--uchu-red-6)
var(--uchu-red-7)
var(--uchu-red-8)
var(--uchu-red-9)

Pink

var(--uchu-pink-1)
var(--uchu-pink-2)
var(--uchu-pink-3)
var(--uchu-pink-4)
var(--uchu-pink-5)
var(--uchu-pink-6)
var(--uchu-pink-7)
var(--uchu-pink-8)
var(--uchu-pink-9)

Purple

var(--uchu-purple-1)
var(--uchu-purple-2)
var(--uchu-purple-3)
var(--uchu-purple-4)
var(--uchu-purple-5)
var(--uchu-purple-6)
var(--uchu-purple-7)
var(--uchu-purple-8)
var(--uchu-purple-9)

Blue

var(--uchu-blue-1)
var(--uchu-blue-2)
var(--uchu-blue-3)
var(--uchu-blue-4)
var(--uchu-blue-5)
var(--uchu-blue-6)
var(--uchu-blue-7)
var(--uchu-blue-8)
var(--uchu-blue-9)

Green

var(--uchu-green-1)
var(--uchu-green-2)
var(--uchu-green-3)
var(--uchu-green-4)
var(--uchu-green-5)
var(--uchu-green-6)
var(--uchu-green-7)
var(--uchu-green-8)
var(--uchu-green-9)

Yellow

var(--uchu-yellow-1)
var(--uchu-yellow-2)
var(--uchu-yellow-3)
var(--uchu-yellow-4)
var(--uchu-yellow-5)
var(--uchu-yellow-6)
var(--uchu-yellow-7)
var(--uchu-yellow-8)
var(--uchu-yellow-9)

Orange

var(--uchu-orange-1)
var(--uchu-orange-2)
var(--uchu-orange-3)
var(--uchu-orange-4)
var(--uchu-orange-5)
var(--uchu-orange-6)
var(--uchu-orange-7)
var(--uchu-orange-8)
var(--uchu-orange-9)

General

var(--uchu-yin-1)
var(--uchu-yin-2)
var(--uchu-yin-3)
var(--uchu-yin-4)
var(--uchu-yin-5)
var(--uchu-yin-6)
var(--uchu-yin-7)
var(--uchu-yin-8)
var(--uchu-yin-9)
var(--uchu-yin)
var(--uchu-yang)

Sass

If you know what Sass is, you'll know how to use color_expanded.scss. I didn't provide raw versions of them because Sass comes with so many color tools (and, I've been using regular CSS variables in my Sass anyways).

JS

If you are a fan of CSS-in-JS or need to programmatically grab color values, there's color.json and color.ts includes available.