WebGradients

典型使用场景

• 海报与 Banner 的渐变与撞色实验
• 从品牌 logo 提取配色，衍生出整套界面色板
• PPT 与海报配色：用现成配色方案避免自己乱搭
• 数据可视化选色：确保相邻色可区分且色弱友好

使用流程

1. 1输入主色或从图片提取生成配色方案
2. 2检查配色在亮暗两版下的观感
3. 3用对比度工具核对文字可读性（建议 4.5:1）
4. 4复制 HEX/RGB 值应用到设计稿

收费模式

适合人群

• 建立设计系统的团队
• 缺乏配色训练但需要出稿的设计新手
• 统一团队视觉规范的设计负责人
• 做数据图表需要选色系的分析师

不适合场景

• 配色方案要有主次：主色、辅助色、中性色按比例使用，平均用力会花
• 深色模式适配：浅色主题的配色直接反转效果差，需单独验证对比度
• 对比度不足的文字组合在移动端可读性差，上线前跑一遍无障碍检查
• 大面积高饱和撞色慎用，先小范围验证

同类对比

• vs 中国色

  中国色的官方简介写的是「展示中国传统色色谱，适合国风设计提取传统配色灵感」，WebGradients定义为「一百八十个漂亮的线性渐变色卡，一键复制 CSS 代码」

  平台支持一致（网页版），平台不构成差异

• vs 在线调色板

  在线调色板的官方简介写的是「帮助设计师和艺术家选择合适的配色方案」，WebGradients定义为「一百八十个漂亮的线性渐变色卡，一键复制 CSS 代码」

  平台支持一致（网页版），平台不构成差异

• vs 中国色彩配色

  同属配色工具：WebGradients的定位是「一百八十个漂亮的线性渐变色卡，一键复制 CSS 代码」，中国色彩配色则是「中国传统色,最佳配色表可快速提取rgb/hex 颜色代码」

  平台支持一致（网页版），平台不构成差异

• vs Hypercolor

  同属配色工具：WebGradients的定位是「一百八十个漂亮的线性渐变色卡，一键复制 CSS 代码」，Hypercolor则是「专为 Tailwind CSS 设计的渐变色集合，提供可直接复制使用的渐变类名，支持在线自定义编辑」

  两边都支持网页版，设备兼容上没有取舍

安全提示

• 请认准官网域名 https://webgradients.com，警惕高仿钓鱼网站与假冒客服。
• 涉及付费、实名或下载安装时，请仔细阅读官方授权提示与隐私条款。
• 重要资料建议定期本地备份，避免完全依赖单一在线工具存储。
• 如发现页面异常或风险，可通过上方「报告问题」反馈，新办公导航会核实并更新信息。