取色器工具说明

取色器用于选择颜色、复制颜色值和辅助配置主题。常见输出格式包括 HEX、RGB、HSL 和带透明度的 RGBA。

选择流程

flowchart TD
    A[打开取色器] --> B[选择主色]
    B --> C[调整明度和饱和度]
    C --> D[调整透明度]
    D --> E[输出颜色值]
    E --> F[复制到样式或配置]

使用建议

1. 主题色要同时检查普通态、悬浮态、禁用态。
2. 文本颜色要关注对比度，避免浅色背景上使用浅色字。
3. 透明色叠加后会受背景影响，生产配置要确认实际视觉效果。
4. 保存颜色时建议保存语义名称，例如 primary、danger，不要只保存色值。

常见颜色格式

格式	示例	说明
HEX	#1677ff	CSS 和设计稿中常见
RGB	rgb(22, 119, 255)	直接表示红绿蓝
RGBA	rgba(22, 119, 255, 0.8)	带透明度
HSL	hsl(215, 100%, 54%)	适合按色相、饱和度、亮度调整

主题色设计流程

flowchart TD
    A[确定主色] --> B[生成悬浮和激活色]
    B --> C[配置成功、警告、危险色]
    C --> D[检查文字对比度]
    D --> E[在真实页面中验证]
    E --> F[沉淀为主题变量]

工程使用建议

1. 不要在业务代码里到处写死颜色，优先使用 CSS 变量或主题 token。
2. 交互状态要成组设计，例如默认、hover、active、disabled。
3. 图表颜色要考虑区分度，不要只用同一种颜色的深浅变化。
4. 深色模式和浅色模式要分别验证，不要直接反转颜色。