documentation/REDUCED.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

# Reduced Palette

Sometimes, an abundance of color options is a hindrance. Analysis paralysis, amirite? To this end [`color.css`](../definitions/style/color.css) reduces the number of stops in the expanded palette to three, save for yin (it only has two) and yang (it only has one).

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-light-gray-raw) / 40%)`.


## Gray

![](./image/reduced/gray.png)

- `var(--uchu-light-gray)`
- `var(--uchu-gray)`
- `var(--uchu-dark-gray)`


## Red

![](./image/reduced/red.png)

- `var(--uchu-light-red)`
- `var(--uchu-red)`
- `var(--uchu-dark-red)`


## Pink

![](./image/reduced/pink.png)

- `var(--uchu-light-pink)`
- `var(--uchu-pink)`
- `var(--uchu-dark-pink)`


## Purple

![](./image/reduced/purple.png)

- `var(--uchu-light-purple)`
- `var(--uchu-purple)`
- `var(--uchu-dark-purple)`


## Blue

![](./image/reduced/blue.png)

- `var(--uchu-light-blue)`
- `var(--uchu-blue)`
- `var(--uchu-dark-blue)`


## Green

![](./image/reduced/green.png)

- `var(--uchu-light-green)`
- `var(--uchu-green)`
- `var(--uchu-dark-green)`


## Yellow

![](./image/reduced/yellow.png)

- `var(--uchu-light-yellow)`
- `var(--uchu-yellow)`
- `var(--uchu-dark-yellow)`


## Orange

![](./image/reduced/orange.png)

- `var(--uchu-light-orange)`
- `var(--uchu-orange)`
- `var(--uchu-dark-orange)`


## General

![](./image/reduced/general.png)

- `var(--uchu-light-yin)`
- `var(--uchu-yin)`
- `var(--uchu-yang)`


## Sass

If you know what Sass is, you'll know how to use [`color.scss`](../definitions/style/color.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`](../definitions/script/color.json) and [`color.ts`](../definitions/script/color.ts) includes available.