色彩混合器
选择两个颜色、拖动混合比例，就能立即得到中间色、色阶带与可直接粘贴到样式表的 CSS。
来源颜色
支持直接输入 HEX 色码，也可以用色票快速选色。
颜色 A
颜色 B
混合比例
0% 表示完全保留颜色 A，100% 表示完全变成颜色 B。
快速预设
可先套用一组风格，再微调成自己的品牌色。CSS 渐层
可直接粘贴到 background 属性，再按需求调整角度或百分比。
混合结果
下方会同步显示混合后的 HEX、RGB、HSL 与色阶带。
中间色阶
从 0% 到 100% 的混色过程一览。- 在颜色 A 与颜色 B 输入你要混合的两个 HEX 色码，或直接点击色票选色。
- 拖动比例滑杆，决定结果更偏向颜色 A 还是颜色 B。
- 右侧会实时更新混合后的 HEX、RGB、HSL，方便你贴到设计稿、CSS 或设计系统文档。
- 下方的中间色阶会列出多个混合节点，适合挑选 hover、border、背景层次色。
- 如果需要快速试配色，可先套用预设组合或点击“随机组合”。
提示：输出的 CSS 渐层不是唯一答案，而是方便你把两色与混合色快速带进界面原型，再继续微调。
什么时候会用到此工具？
当你手上已有两个品牌色、按钮色或插图主色，想找出中间过渡色、建立色阶，或快速生成一段可用的 CSS 渐层时，就很适合使用这个工具。
它是用什么方式混色？
目前以 RGB 线性插值计算混合结果，优点是直观、速度快，也很适合做网页界面、图层背景和视觉稿的第一轮配色。
为什么混出来的颜色看起来和我想象不同？
因为不同色彩空间的混色逻辑并不一样。RGB 混色更偏向屏幕显示，如果你在做印刷或很在意感知均匀度，仍需要再用专业色彩工具进一步校正。
可以拿来做品牌色阶吗？
可以，特别适合先快速生成 5 到 6 个过渡色，再手动挑出适合作为 hover、卡片背景、分隔线或高亮标记的版本。
支持 RGB 或 HSL 直接输入吗？
目前主要输入格式是 HEX，因为它最适合在设计与前端之间复制粘贴。如果你已经有 RGB 或 HSL，可先搭配站内的调色盘工具转成 HEX 后再混色。
生成的 CSS 能直接用在哪里？
可以直接粘贴到网页的 background 属性，也能带进 Figma、演示软件或设计系统文档，作为按钮、卡片、区块背景的起点。
色彩对比度与无障碍设计：WCAG 标准、对比度计算原理与改善技巧
色彩对比度是无障碍网页设计的核心指标，影响弱视、色盲及一般用户在不同环境下的阅读体验。本文说明 WCAG 2.1 标准的 AA/AAA 等级、相对亮度计算公式，以及常见的色彩设计错误与修正策略。
色码完全指南：RGB、HEX、HSL 的转换原理与设计应用
前端工程师与设计师都离不开色码，但你真的了解 RGB、HEX、HSL 背后的原理吗？本文从光学物理到无障碍设计，完整解析各种色彩模型的换算逻辑、使用场景与配色实战技巧。
图片格式怎么选？JPG、PNG、WebP、GIF 完整比较指南
同样是存图片，为什么 PNG 有时比 JPG 大好几倍？什么时候该用 WebP？GIF 是不是已经过时了？本文从压缩原理出发，一次搞清楚主流图片格式的差异与选择逻辑。
社媒贴文图片编辑全流程：尺寸规范、视觉一致性与导出设置
想让社媒内容更吸睛，关键不只在创意，还在尺寸、构图、色彩一致与导出设置。本文整理一套可复用的图片编辑流程，帮助你稳定产出高质量内容。
Markdown 语法完全指南：从入门到实战应用
Markdown 是现代写作者、开发者与内容创作者最常用的轻量级标记语言。本文从语法基础到进阶技巧，完整解析 Markdown 的使用方式与各平台应用实战。
PDF 合并、分割、压缩怎么做？日常文档整理完整攻略
收到一大份 PDF 只需要其中几页？多份报告要整合成一份发出？文件太大无法上传？本文拆解最常见的四种 PDF 操作，让你不需安装任何软件也能搞定。