颜色选择与调色板

选择基础颜色,生成深浅色和搭配色板,获取网页与设计使用的颜色值。

免费浏览器

基于 HSL 的明暗色、互补色和邻近色在本地生成。

生成的调色板
亮色 80
#c7d7fa
亮色 60
#86a9f4
基础色
#2463eb
暗色 40
#0f3c9f
暗色 20
#0a2767
互补色
#ebac24
邻近色 -30
#24c6eb
邻近色 +30
#4824eb

关于颜色选择与调色板

围绕选定主色生成色板。预览相关颜色并复制色值,适合规划界面背景、强调色和小型主题。

如何使用颜色选择与调色板

  1. 选择基础颜色。
  2. 选择配色关系并查看色块。
  3. 复制准备使用的色值。

输入与输出示例

输入与设置
主色:#2563eb
方案:互补色
预期输出
主色及其互补配色色块。

适用场景

  • 围绕品牌主色探索主题。
  • 为 CSS 设计变量准备色值。

使用前需要了解的限制

配色协调不代表文字对比度符合无障碍要求。请单独检查各前景与背景组合。

数据处理与费用

核心操作在浏览器中完成,工具输入不会上传处理。网站仍可能使用会话 Cookie,并按隐私政策收集运行或使用数据。

在浏览器中免费使用,无需登录。

常见问题

不会。调色板生成完全在浏览器本地完成,不会把颜色值发送到服务器。

工具会把基础色转换为 HSL,再通过调整亮度和色相生成明色、暗色、互补色和邻近色。

可以。每个色块都提供可复制的 HEX 值,可用于 CSS 变量、设计 token 或组件样式。

相关工具