blob: 13bb5eaf47fd081d798116a587e802072ea98640 (
plain) (
blame)
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
|
**uchū is the color palette for internet lovers, by [NetOperator Wibby](https://webb.page).** uchū utilizes the OKLCH color space [for reasons](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl). I've been using this color palette for personal projects for about a year and have been quite pleased with it.
No, [I will not add other color spaces](./documentation/FAQ.md#normal-colors).
## Install
```sh
bun add uchu
# or: npm install uchu / pnpm add uchu / yarn add uchu
```
## Usage
### JavaScript / TypeScript
```ts
import { color, palette, reduced, yang } from "uchu";
palette.blue[5]; // "oklch(54.87% 0.222 260.33)"
color("red", 7); // "oklch(49.95% 0.195 18.34)"
reduced.green[2]; // mid-shade green from the reduced palette
yang; // off-white background constant
```
Types `Hue` and `Shade` are exported for narrowing palette keys.
### CSS
Drop the stylesheet in and use the CSS custom properties:
```ts
import "uchu/css";
```
```css
body {
background-color: var(--uchu-yang);
border: 1px solid var(--uchu-blue-5);
color: var(--uchu-yin-9);
}
```
### Sass / SCSS
```scss
@use "uchu/scss" as *;
body {
background-color: $uchu-yang;
color: $uchu-yin-9;
}
```
Prefer URL imports? See the [URL-based usage guide](./documentation/USAGE.md).
## Table of Contents
- [Expanded Palette](./documentation/EXPANDED.md)
- [Gray](./documentation/EXPANDED.md#gray)
- [Red](./documentation/EXPANDED.md#red)
- [Pink](./documentation/EXPANDED.md#pink)
- [Purple](./documentation/EXPANDED.md#purple)
- [Blue](./documentation/EXPANDED.md#blue)
- [Green](./documentation/EXPANDED.md#green)
- [Yellow](./documentation/EXPANDED.md#yellow)
- [Orange](./documentation/EXPANDED.md#orange)
- [General](./documentation/EXPANDED.md#general)
- [Sass](./documentation/EXPANDED.md#sass)
- [Reduced Palette](./documentation/REDUCED.md)
- [Gray](./documentation/REDUCED.md#gray)
- [Red](./documentation/REDUCED.md#red)
- [Pink](./documentation/REDUCED.md#pink)
- [Purple](./documentation/REDUCED.md#purple)
- [Blue](./documentation/REDUCED.md#blue)
- [Green](./documentation/REDUCED.md#green)
- [Yellow](./documentation/REDUCED.md#yellow)
- [Orange](./documentation/REDUCED.md#orange)
- [General](./documentation/REDUCED.md#general)
- [Sass](./documentation/REDUCED.md#sass)
- [Usage](./documentation/USAGE.md)
- [Pure](./documentation/USAGE.md#pure)
- [Svelte/SvelteKit](./documentation/USAGE.md#svelte-sveltekit)
- [Showcase](./documentation/SHOWCASE.md)
- [Website](./documentation/SHOWCASE.md#websites)
- [FAQ](./documentation/FAQ.md)
- [Origin](./documentation/FAQ.md#origin)
- [Normal colors](./documentation/FAQ.md#normal-colors)
- [Dark Mode](./documentation/FAQ.md#dark-mode)
- [The name](./documentation/FAQ.md#the-name)
- [Virality](./documentation/FAQ.md#virality)
- [The tagline](./documentation/FAQ.md#the-tagline)
- [Why UNLICENSE?](./documentation/UNLICENSE.md)
|