From 6be86b5f05a7c14e9de03d63132e7beb9789965c Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Sat, 11 Apr 2026 15:16:43 -0700
Subject: initial commit

---
 documentation/REDUCED.md | 105 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 documentation/REDUCED.md

(limited to 'documentation/REDUCED.md')

diff --git a/documentation/REDUCED.md b/documentation/REDUCED.md
new file mode 100644
index 0000000..b158161
--- /dev/null
+++ b/documentation/REDUCED.md
@@ -0,0 +1,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.
-- 
cgit v1.2.3