色彩色调和阴影生成器
生成基础色的色调条（向白色混合）和阴影（向黑色混合），具有精确的十六进制值，可用于设计系统和 UI 状态。
输入
选择颜色或直接输入十六进制值。
生成多少行色调/阴影，在基础色与纯白/纯黑之间均匀分布。
输出
Your color palette will appear here.
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-tint-shade-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#808080",
"steps": "5"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `color-tint-shade-generator` tool (Color Tint & Shade Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/color-tint-shade-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="色彩色调和阴影生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
色彩色调和阴影生成器接受单一基础色，并生成一系列更浅的色调（向白色混合）和更深的阴影（向黑色混合）的条形图。每一行都标有混合百分比和精确的十六进制代码。选择一种颜色，选择所需的步数，为设计系统、组件库或一次性 UI 获得现成的颜色渐进条。
色调与阴影
- 色调 — 基础色与白色的混合。色调用于悬停背景、禁用状态、微妙的高亮和浅色模式表面，这些表面仍然表现为与您品牌色调"相同"的颜色。
- 阴影 — 基础色与黑色的混合。阴影用于按下/活跃状态、深色模式表面、边框和需要在浅色背景上保持可读性同时仍与基础色相关的文本。
色调/阴影渐进条是大多数设计令牌颜色比例（如 color-50 至 color-900）的基础。一个基础色调扩展为 UI 可以一致地使用的明度值的完整范围，而不是每个组件自己选择一个任意的阴影。
混合工作原理
每一步将基础色的红、绿、蓝通道以百分比 t 朝向目标（白色或黑色）混合，对每个通道使用直线性线性插值：
- 色调:
channel + (255 - channel) × t - 阴影:
channel × (1 - t)
结果四舍五入到最接近的整数并转换回十六进制。百分比在 0% 至 100% 之间均匀分布 — 例如，使用 5 个步数时，您获得大约 17%、33%、50%、67% 和 83% — 因此渐进条永远不会包含退化的 0% 步（与基础色相同）或 100% 步（纯白或纯黑）。
如何使用
- 用颜色选择器选择基础色，或直接输入十六进制值。
- 调整步数滑块（3-9）来控制生成多少行色调/阴影。
- 表格立即更新，显示每一行的百分比、色调十六进制和阴影十六进制。
- 复制表格或作为 CSV 下载，以粘贴到样式表、Tailwind 配置或设计工具的调色板中。
常见问题
为什么使用 RGB 线性插值而不是调整 HSL 亮度？ 直接向白色或黑色混合通道是传统色彩理论中"色调"和"阴影"的最直译 — 这是当您用白色或黑色颜料物理混合油漆时发生的情况。仅调整 HSL 亮度可能会改变颜色在渐进条中途的饱和度；直接通道混合使混合过程可预测。
为什么步数不落在 10%、20%、30% 这样的整数百分比上？ 步数均匀分布在基础色和纯白/纯黑之间的间隔内，因此精确百分比随步数的变化而变化。奇数步数的中间步总是落在整数 50% 上。
我可以直接在 CSS 中使用这些颜色吗？
是的 — 每个十六进制代码都可以直接粘贴到 CSS 自定义属性、Sass 变量或 Tailwind 色彩比例中，例如 --color-primary-100: #E9E9E9;。
增加步数会改变我现有的十六进制值吗？ 会的。由于百分比均匀分布在所有步数内，改变步数会重新排列每一步的位置 — 这不仅是向现有渐进条添加行。
隐私
所有色彩计算都在您的浏览器中本地进行 — 您的基础色和选择的步数永远不会发送到服务器。