blob: 2012cd5dde06cdbde307959521f0128e3945c42a (
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
|
Document: WM-094 P. Webb
Category: Design 2026-06-05
uchū pastel
Abstract
New update!
Body
Ever since uchū's inception I've wanted a nice pastel set to go with
it. A few days ago I saw someone give advice to another about toning
down the saturation. In the browser you can `filter: saturate(0.5);`
but I think that uses `#000` and I'd rather use my own black from
my palette (as I write this, I realize I could've tried color-mix[1]
before the method I'm about to detail).
I took screenshots of my colors on uchu.style[2], put them in
Pixelmator, and played around with opacity on a `Saturation` layer
containing `--uchu-yin` (black). These are the results (followed by
the default colors).
📸[red pastel palette][IMG1]
📸[red palette][IMG2]
📸[pink pastel palette][IMG3]
📸[pink palette][IMG4]
📸[purple pastel palette][IMG5]
📸[purple palette][IMG6]
📸[blue pastel palette][IMG7]
📸[blue palette][IMG8]
📸[green pastel palette][IMG9]
📸[green palette][IMG10]
📸[yellow pastel palette][IMG11]
📸[yellow palette][IMG12]
📸[orange pastel palette][IMG13]
📸[orange palette][IMG14]
I _think_ I like the new pastel variant, I'm unsure. I sat with the
original uchū palette for a year before I shared it with the world so
this may need some time to grow on me. It's also possible I change
some things slightly. My wife loves the red pastels because they look
like lipsticks she prefers.
Special shout-out to Sindre for his excellent System Color Picker[3].
It has OKLCH support and looks great.
References
[1] <https://css-tricks.com/almanac/functions/c/color-mix>
[2] <https://uchu.style>
[3] <https://sindresorhus.com/system-color-picker>
[IMG1] <https://cdn.webb.page/blog/2026/wm-094-a.png>
[IMG2] <https://cdn.webb.page/blog/2026/wm-094-b.png>
[IMG3] <https://cdn.webb.page/blog/2026/wm-094-c.png>
[IMG4] <https://cdn.webb.page/blog/2026/wm-094-d.png>
[IMG5] <https://cdn.webb.page/blog/2026/wm-094-e.png>
[IMG6] <https://cdn.webb.page/blog/2026/wm-094-f.png>
[IMG7] <https://cdn.webb.page/blog/2026/wm-094-g.png>
[IMG8] <https://cdn.webb.page/blog/2026/wm-094-h.png>
[IMG9] <https://cdn.webb.page/blog/2026/wm-094-i.png>
[IMG10] <https://cdn.webb.page/blog/2026/wm-094-j.png>
[IMG11] <https://cdn.webb.page/blog/2026/wm-094-k.png>
[IMG12] <https://cdn.webb.page/blog/2026/wm-094-l.png>
[IMG13] <https://cdn.webb.page/blog/2026/wm-094-m.png>
[IMG14] <https://cdn.webb.page/blog/2026/wm-094-n.png>
|