颜色选择器

选择颜色,查看对应的 HEX、RGB 和 HSL 数值,并直接在浏览器中生成相关配色与颜色变化。

选择颜色

选择颜色

配色方案

颜色变化

浅色

深色

柔和色调

工具功能

颜色选择器支持通过浏览器原生控件或 HEX 值选择颜色,并显示相应的 RGB 和 HSL 数值。

工具会根据所选颜色计算相关配色,以及更浅、更深和更中性的颜色变化。

使用方法

  1. 使用颜色控件选择颜色,或输入完整的 HEX 值。
  2. 选择和谐类型,查看根据同一 HSL 计算得出的相关颜色。
  3. 点击调色板中的颜色值即可将其复制到剪贴板。

实际用途

  • 记录设计基础色及其对应的 HEX、RGB 和 HSL 数值。
  • 从互补色或三角色配色中为界面选择初始强调色或辅助色。
  • 为背景、边框或突出元素准备更浅和更深的颜色值。

注意事项与限制

  • 预览使用普通浏览器颜色值,不考虑具体显示器、印刷或 ICC 配置文件。
  • 生成的调色板不会检查对比度或无障碍要求。请单独验证重要的文字与背景组合。

常见问题

推荐的调色板是否自动符合无障碍要求?

不会。配色与颜色变化仅根据颜色值计算。请检查计划使用的每组文字和背景颜色的实际对比度。