渐变配色

功能

• 180 段渐变，每段都带实时预览与一行可复制的 CSS
• 按名称查，不区分大小写；片段也能搜（输入 fade 会列出所有含 fade 的）
• 按色值反查：粘贴一个颜色，看哪几段渐变用了它
• 按色相分组浏览：红系、橙与棕系、黄系、绿系、蓝与青系、紫系、无彩色
• 每段给出角度与全部色彩停靠点，停靠点各自带色块
• 单独取走某一段的颜色：每个停靠点是一行，可以只复制那一端的色值
• 角度已全部归一化到 0–360 度，复制走就是合法的 CSS
• 180 段全在可搜索的下拉里，提示里显示角度与色数
• 留空看整张渐变表，按色相分组
• 粘贴容错：正文例子的「」引号、输入法打出的全角都不影响查询
• CSS 与色值都能逐行复制，直接贴进样式表

使用方法

1. 输入渐变名，例如 Night Fade，得到预览、CSS 与全部停靠点
2. 或者粘贴一个色值，例如 #ff9a9e，看哪几段渐变用了它
3. 想按色系挑就输入分组名，例如「红系」
4. 留空则列出全部 180 段，按色相分组

常见问题

这些渐变可以直接用在项目里吗？

可以，但要按自己的场景调。 数据来自 MIT 许可的开源集合，色值本身不受限。两点建议：一是可访问性要自己过一遍 —— 渐变上的白色文字在某些段上对比度会不够（尤其是中间调的暖色段），拿工具里给出的每段颜色值去核对比度，别只凭预览好看就上；二是性能，`linear-gradient` 本身开销很小，但大面积渐变配合动画或滤镜会明显吃 GPU，全屏背景配滚动动画那类用法要测一下。

为什么有两个停靠点是同一个颜色？

那 5 段在原始数据里本来就是单色（起止同色），属于这个集合的一部分而不是数据错误 —— 比如某一段其实就是一块浅灰。我们保留了它们，也保留了「两个同色停靠点」的写法，因为这样它仍然是一段合法的 `linear-gradient`，渲染出来就是一块纯色，与它的本来面目一致。折叠成一个停靠点反而会让它在 CSS 里看起来不像渐变。

为什么有的渐变终点不在 100%？

那是硬停靠：最后一个停靠点停在比如 42%，后面全被那个颜色填满 —— 这是有意为之的效果，不是数据缺失。有 7 段是这样的，另有 1 段的起点在 59%。我们对数据做的整理只有两件不改变效果的事（折叠相邻同色的冗余停靠点、把 1%/99% 这类排版残留归到 0%/100%），没有把端点强行拉到两端 —— 那会把实色区段变成渐变，改变它的样子。

怎么把渐变的颜色单独拿出来用？

结果里每个停靠点都是一行，各自带色块、可以直接复制那一个色值。这是最常被需要的一步：整段渐变拿去用是少数，多数时候是看上了其中某一端的颜色，想单独拿它当主色。复制走之后可以再到配色方案那个工具里，用它算出完整的搭配。

渐变的方向角度怎么换算成关键字？

CSS 里 `0deg` 是从下往上（底部到顶部），角度按顺时针增大：`90deg` 是从左往右，`180deg` 是从上往下，`270deg` 是从右往左。另外 `to right`、`to bottom right` 这类关键字写法与角度的对应关系是固定的，但在不同宽高比的元素上，关键字会自动调整角度好让渐变穿过对角线，而固定角度不会 —— 所以响应式场景下用关键字往往更稳，固定角度适合宽高比确定的元素。