×

使用说明与色彩知识

如何使用本工具?

• 多种方式选择颜色:
  • 直接在输入框中键入6位HEX代码 (如 #FF6347)。
  • 点击方形颜色预览块，使用您操作系统的拾色器。
  • 点击“给我灵感”按钮随机获取颜色。
  • 点击下方的“灵感范例”圆形色板快速加载预设颜色。
• 查看颜色详情: 右侧面板会实时显示当前颜色的HEX, RGB, 和 HSL值，点击“复制”即可使用。
• 检查可读性: “网页可访问性”卡片会计算当前颜色与黑/白文字的对比度。大于 4.5:1 是一个安全值。
• 获取配色方案: “智能调色板”会自动生成四种专业的配色方案，点击任何一个色块即可将其设为当前颜色。

简明色彩应用知识

掌握一些基础知识，能让您更好地运用颜色。

HEX vs RGB vs HSL

• HEX (十六进制): 如 #3498DB。这是网页开发中最常用的格式，简洁明了。
• RGB (红,绿,蓝): 如 rgb(52, 152, 219)。它描述了光的三原色混合。常用于编程和设计软件。
• HSL (色相,饱和度,亮度): 如 hsl(204, 70%, 53%)。这是最符合人类直觉的格式。调整“亮度(L)”可以得到颜色的亮色或暗色，非常适合生成单色系配色。

经典的 60-30-10 配色法则

这是一个不会出错的室内设计与网页设计配色黄金法则，能让你的界面主次分明，富有层次感。

• 60% 主色调: 决定了整体的基调和氛围。通常是一种中性色或你品牌的主色。
• 30% 辅助色: 用于需要突出显示的元素，如次级按钮、信息卡片等，通常与主色形成对比。
• 10% 点缀色: 这是最鲜艳、最引人注目的颜色，用于关键操作（CTA按钮）、通知、图标等，起到画龙点睛的作用。