色阶
每行右侧是白字与黑字压在色块上的对比度，达到 4.5:1 的会标出来
CSS 变量
:root {
--brand-50: #b8d7d3;
--brand-100: #acd4cf;
--brand-200: #8ccbc3;
--brand-300: #64c0b5;
--brand-400: #3fb2a4;
--brand-500: #2f8f83;
--brand-600: #257067;
--brand-700: #1b514a;
--brand-800: #12322e;
--brand-900: #071412;
}Tailwind 配置
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#b8d7d3',
100: '#acd4cf',
200: '#8ccbc3',
300: '#64c0b5',
400: '#3fb2a4',
500: '#2f8f83',
600: '#257067',
700: '#1b514a',
800: '#12322e',
900: '#071412',
},
},
},
},
};这套色阶怎么算的
色相不动，饱和度按等级微调：浅端（50 / 100）往下压一点，否则浅色会发粉；深端（800 / 900）也略降，避免深色发浊。中间几阶保持基准色的饱和度。
明度按固定曲线分配，再以 500 为锚点等比缩放，让 500 正好落在基准色的明度上。所以换一个更亮的基准色，整条色阶会跟着抬高并压扁一些，而不是把基准色硬塞进固定的第 500 级。
上下两侧各自缩放：浅色半边受 97 约束、深色半边受 3 约束。基准色特别亮时，浅色那半边会被压扁（白不可能更白），深色半边照常展开；反过来也一样。所以极端基准色下相邻几阶会挨得近，那是边界造成的，不是算错。
库里配色的主色色阶
下面三套的主色按同一套规则展开。数值都是构建期算出来的，可以拿上面的工具复算。
| 主色 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| 墨野青 | #b8d7d3 | #acd4cf | #8ccbc3 | #64c0b5 | #3fb2a4 | #2f8f83 | #257067 | #1b514a | #12322e | #071412 |
| 暖橙屿 | #f0e5de | #eedcd1 | #e7c5af | #e0a783 | #dd8853 | #d96a24 | #b6591e | #92481a | #6e3715 | #4a2610 |
| 静湖蓝 | #eaeef7 | #dde4f5 | #bacbef | #8ba9ea | #5886eb | #2563eb | #1350d4 | #1242ad | #103586 | #0e275f |