基础属性
基础属性
颜色在色轮上的位置，通常用 0–360° 表示。
基础属性
- 中文术语
- 色相
- English Term
- Hue
- 公式/参数
- H=0 红，60 黄，120 绿，180 青，240 蓝，300 品红
- 设计用途
- 做配色关系、冷暖判断、色彩检索
- 常见误区
- 不要把色相等同于颜色名；同一色相可有很多明暗饱和变化
- 相关概念
- 色轮,互补色
正在加载顶部导航...
01_color_foundation_terms_颜色基础术语
当前 73 条 · 1 / 2 页
基础属性
基础属性
颜色的纯净程度，越高越鲜艳，越低越接近灰。
基础属性
- 中文术语
- 饱和度
- English Term
- Saturation
- 公式/参数
- HSL/HSV 中一般用 0–100%
- 设计用途
- 控制品牌活力、视觉冲击、儿童/潮流感
- 常见误区
- 高饱和不等于高级；大面积高饱和容易疲劳
- 相关概念
- 纯度,Chroma
基础属性
基础属性
颜色的明暗程度。HSL 用 Lightness，HSV 用 Value。
基础属性
- 中文术语
- 明度
- English Term
- Lightness / Value
- 公式/参数
- 0 黑，100 白
- 设计用途
- 建立层级、背景/文字对比、空间深浅
- 常见误区
- 明度不是亮度；感知亮度还受 RGB 权重影响
- 相关概念
- 亮度,对比
基础属性
基础属性
人眼感受到的明亮程度，可用加权 RGB 估算。
基础属性
- 中文术语
- 亮度
- English Term
- Brightness
- 公式/参数
- (R*299+G*587+B*114)/1000
- 设计用途
- 判断文字可读性、图标识别
- 常见误区
- 纯黄看起来比纯蓝亮，即使数值强度类似
- 相关概念
- Luminance
基础属性
基础属性
WCAG 对比度使用的线性化亮度。
基础属性
- 中文术语
- 相对亮度
- English Term
- Relative Luminance
- 公式/参数
- sRGB 线性化后 0.2126R+0.7152G+0.0722B
- 设计用途
- 网页可访问性、文字颜色选择
- 常见误区
- 不能用普通 RGB 平均值替代
- 相关概念
- WCAG Contrast
色彩变体
色彩变体
在原色中加入白色形成更浅的颜色。
色彩变体
- 中文术语
- 淡色
- English Term
- Tint
- 公式/参数
- Base + White
- 设计用途
- 背景、母婴、护肤、轻量 UI
- 常见误区
- 淡色不一定低饱和；取决于色相和模型
- 相关概念
- Shade,Tone
色彩变体
色彩变体
在原色中加入黑色形成更深的颜色。
色彩变体
- 中文术语
- 暗色
- English Term
- Shade
- 公式/参数
- Base + Black
- 设计用途
- 标题、深色背景、奢华感
- 常见误区
- 暗色大面积使用要注意文字对比
- 相关概念
- Tint,Tone
色彩变体
色彩变体
在原色中加入灰色，降低刺激感。
色彩变体
- 中文术语
- 浊色/调子
- English Term
- Tone
- 公式/参数
- Base + Gray
- 设计用途
- 高级感、室内、服装、长时间阅读
- 常见误区
- 低饱和不等于脏；关键在比例和质感
- 相关概念
- Muted Color
色彩模型
色彩模型
加色模型，用于屏幕显示。
色彩模型
- 中文术语
- RGB
- English Term
- Red Green Blue
- 公式/参数
- 0–255 或 0–1
- 设计用途
- 网页、App、显示器、图片
- 常见误区
- RGB 到印刷不能直接等同
- 相关概念
- HEX,sRGB
色彩模型
色彩模型
网页常用 16 进制颜色写法。
色彩模型
- 中文术语
- HEX
- English Term
- Hexadecimal Color
- 公式/参数
- #RRGGBB
- 设计用途
- CSS、Figma、前端开发
- 常见误区
- HEX 只是 RGB 的另一种写法
- 相关概念
- RGB
色彩模型
色彩模型
减色模型，主要用于印刷。
色彩模型
- 中文术语
- CMYK
- English Term
- Cyan Magenta Yellow Key
- 公式/参数
- C/M/Y/K 0–100%
- 设计用途
- 包装、海报、印刷品
- 常见误区
- 无 ICC 轮廓时，CMYK 只是近似
- 相关概念
- Spot Color,ICC
色彩模型
色彩模型
以色相、饱和度、明度组织颜色，适合生成色阶。
色彩模型
- 中文术语
- HSL
- English Term
- Hue Saturation Lightness
- 公式/参数
- hsl(H,S%,L%)
- 设计用途
- 自动生成配色、颜色系统、主题色
- 常见误区
- HSL 的均匀性不如 Lab/LCH
- 相关概念
- HSV,LCH
色彩模型
色彩模型
以色相、饱和度、明亮值组织颜色，常见于取色器。
色彩模型
- 中文术语
- HSV/HSB
- English Term
- Hue Saturation Value
- 公式/参数
- hsv(H,S%,V%)
- 设计用途
- 快速选择鲜艳度与明亮度
- 常见误区
- HSV Value 不等于感知亮度
- 相关概念
- HSL
色彩模型
色彩模型
接近人眼感知的颜色空间，L 表明暗，a/b 表示色彩方向。
色彩模型
- 中文术语
- CIELAB
- English Term
- Lab Color
- 公式/参数
- L*, a*, b*
- 设计用途
- 色差、印刷、跨设备颜色管理
- 常见误区
- Lab 数值换算依赖白点与标准观察者
- 相关概念
- Delta E,LCH
色彩模型
色彩模型
Lab 的极坐标形式，更适合按人眼感知调色。
色彩模型
- 中文术语
- LCH
- English Term
- Lightness Chroma Hue
- 公式/参数
- L, C, h
- 设计用途
- 做均匀色阶、设计 token、主题生成
- 常见误区
- 浏览器支持与工具链需确认
- 相关概念
- Lab,OKLCH
色彩关系
色彩关系
色轮上相差约 180° 的颜色组合。
色彩关系
- 中文术语
- 互补色
- English Term
- Complementary
- 公式/参数
- H 与 H+180
- 设计用途
- 制造强对比、品牌记忆点
- 常见误区
- 互补色都高饱和会很刺眼
- 相关概念
- Split Complementary
色彩关系
色彩关系
色轮上相邻的颜色组合。
色彩关系
- 中文术语
- 类似色
- English Term
- Analogous
- 公式/参数
- H-30, H, H+30
- 设计用途
- 稳定、自然、和谐、渐变
- 常见误区
- 太接近会层次不足
- 相关概念
- Hue, Harmony
色彩关系
色彩关系
色轮上相隔 120° 的三色组合。
色彩关系
- 中文术语
- 三角色
- English Term
- Triadic
- 公式/参数
- H, H+120, H+240
- 设计用途
- 活泼、儿童、教育、插画
- 常见误区
- 需要主次比例，否则显乱
- 相关概念
- Tetradic
色彩关系
色彩关系
主色加互补色两侧颜色，冲突更柔和。
色彩关系
- 中文术语
- 分裂互补
- English Term
- Split Complementary
- 公式/参数
- H, H+150, H+210
- 设计用途
- 新手更安全的高对比配色
- 常见误区
- 仍需控制面积比例
- 相关概念
- Complementary
色彩关系
色彩关系
两组互补色组成的四角配色。
色彩关系
- 中文术语
- 四色/矩形配色
- English Term
- Tetradic
- 公式/参数
- H,H+60/90,H+180,H+240/270
- 设计用途
- 丰富、多角色系统、活动视觉
- 常见误区
- 需要明确主色，否则杂乱
- 相关概念
- Square
可访问性
可访问性
前景与背景的亮度差，WCAG 常用 3:1、4.5:1、7:1 阈值。
可访问性
- 中文术语
- 对比度
- English Term
- Contrast Ratio
- 公式/参数
- (L1+0.05)/(L2+0.05)
- 设计用途
- 文字可读性、按钮、图表
- 常见误区
- 计算值 4.49 不能四舍五入当 4.5
- 相关概念
- WCAG
品牌系统
品牌系统
品牌识别中最核心、最高频的颜色。
品牌系统
- 中文术语
- 主色
- English Term
- Primary Color
- 公式/参数
- 通常占 60% 或关键组件
- 设计用途
- Logo、导航、主按钮
- 常见误区
- 主色不应承担所有状态色
- 相关概念
- Secondary,Accent
品牌系统
品牌系统
支持主色、补充分层与场景的颜色。
品牌系统
- 中文术语
- 辅助色
- English Term
- Secondary Color
- 设计用途
- 卡片、插画、二级按钮
- 常见误区
- 辅助色太多会削弱品牌记忆
- 相关概念
- Primary
品牌系统
品牌系统
用于吸引注意、制造行动的少量颜色。
品牌系统
- 中文术语
- 强调色
- English Term
- Accent Color
- 设计用途
- CTA、促销、关键数据
- 常见误区
- 强调色面积过大会失去强调效果
- 相关概念
- CTA,Highlight
印刷
印刷
独立油墨颜色，常用于品牌标准和特殊效果。
印刷
- 中文术语
- 专色
- English Term
- Spot Color
- 设计用途
- 品牌印刷、包装、金属/荧光色
- 常见误区
- 屏幕近似不等于油墨实物
- 相关概念
- Pantone,PMS
印刷
印刷
同一油墨在不同纸张上会出现不同视觉结果。
印刷
- 中文术语
- 涂布纸/非涂布纸
- English Term
- Coated / Uncoated
- 设计用途
- 印刷打样、包装选纸
- 常见误区
- 只看屏幕颜色无法判断纸张吸墨效果
- 相关概念
- Proofing
色彩管理
色彩管理
描述设备或印刷条件色彩特性的文件。
色彩管理
- 中文术语
- ICC 轮廓
- English Term
- ICC Profile
- 设计用途
- 跨设备匹配、印刷输出
- 常见误区
- 没有 ICC 时 RGB/CMYK 换算只是粗略估计
- 相关概念
- Gamut
色彩管理
色彩管理
设备或系统能显示/印刷的颜色范围。
色彩管理
- 中文术语
- 色域
- English Term
- Gamut
- 设计用途
- 屏幕、相机、印刷、广色域设计
- 常见误区
- 超出色域的颜色会被压缩或裁剪
- 相关概念
- sRGB,Display P3
UI设计
UI设计
用颜色表达状态或含义，如成功、警告、错误。
UI设计
- 中文术语
- 语义色
- English Term
- Semantic Color
- 设计用途
- 组件库、仪表盘、表单提示
- 常见误区
- 不要只靠颜色表达状态，要配文字/图标
- 相关概念
- Status Color
UI设计
UI设计
把颜色等设计决策转成可复用变量。
UI设计
- 中文术语
- 设计 Token
- English Term
- Design Token
- 公式/参数
- --color-primary-500
- 设计用途
- 设计系统、前端协作
- 常见误区
- Token 名称要表达角色，不只表达颜色
- 相关概念
- Theme
心理感受
心理感受
暖色更接近红橙黄，冷色更接近蓝青紫绿。
心理感受
- 中文术语
- 冷暖
- English Term
- Color Temperature
- 设计用途
- 空间氛围、食品包装、情绪引导
- 常见误区
- 冷暖受周围颜色和文化影响
- 相关概念
- Hue
心理感受
心理感受
暖色和高饱和色更容易向前跳出，冷色和低饱和色更后退。
心理感受
- 中文术语
- 前进色/后退色
- English Term
- Advancing/Receding Color
- 设计用途
- 空间层次、海报焦点
- 常见误区
- 不是绝对规律，受明度和背景影响
- 相关概念
- Contrast
构图
构图
主色约 60%，辅助色 30%，强调色 10%。
构图
- 中文术语
- 60-30-10 法则
- English Term
- 60-30-10 Rule
- 公式/参数
- 比例经验法
- 设计用途
- 室内、网页、海报、包装
- 常见误区
- 不是硬性公式，可按场景调整
- 相关概念
- Color Role
色相家族
色相家族
以红色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 红系
- English Term
- Red family
- 公式/参数
- Hue family
- 设计用途
- 用于建立红色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以橙色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 橙系
- English Term
- Orange family
- 公式/参数
- Hue family
- 设计用途
- 用于建立橙色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以黄色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 黄系
- English Term
- Yellow family
- 公式/参数
- Hue family
- 设计用途
- 用于建立黄色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以绿色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 绿系
- English Term
- Green family
- 公式/参数
- Hue family
- 设计用途
- 用于建立绿色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以青色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 青系
- English Term
- Cyan family
- 公式/参数
- Hue family
- 设计用途
- 用于建立青色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以蓝色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 蓝系
- English Term
- Blue family
- 公式/参数
- Hue family
- 设计用途
- 用于建立蓝色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以紫色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 紫系
- English Term
- Purple family
- 公式/参数
- Hue family
- 设计用途
- 用于建立紫色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以粉色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 粉系
- English Term
- Pink family
- 公式/参数
- Hue family
- 设计用途
- 用于建立粉色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以棕色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 棕系
- English Term
- Brown family
- 公式/参数
- Hue family
- 设计用途
- 用于建立棕色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
色相家族
色相家族
以灰色相为主的颜色集合，可按明度、饱和度继续细分。
色相家族
- 中文术语
- 灰系
- English Term
- Gray family
- 公式/参数
- Hue family
- 设计用途
- 用于建立灰色品牌、包装、材质或情绪库。
- 常见误区
- 不要只用一个颜色代表整个色系。
- 相关概念
- Hue
明暗层级
明暗层级
接近黑，适合制造重量感和高级感。
明暗层级
- 中文术语
- 极深色
- English Term
- Very dark
- 公式/参数
- Lightness band
- 设计用途
- 标题、深色背景、奢华包装
- 常见误区
- 浅色文字可读性差，需搭配深色文字。
- 相关概念
- Lightness
明暗层级
明暗层级
低明度，视觉稳定，承载文字和结构。
明暗层级
- 中文术语
- 深色
- English Term
- Dark
- 公式/参数
- Lightness band
- 设计用途
- 导航、卡片标题、工业产品
- 常见误区
- 浅色文字可读性差，需搭配深色文字。
- 相关概念
- Lightness
明暗层级
明暗层级
明暗居中，适合作为主色。
明暗层级
- 中文术语
- 中明度
- English Term
- Mid value
- 公式/参数
- Lightness band
- 设计用途
- 品牌主色、按钮、图形
- 常见误区
- 浅色文字可读性差，需搭配深色文字。
- 相关概念
- Lightness
明暗层级
明暗层级
高明度，适合轻盈、柔和的氛围。
明暗层级
- 中文术语
- 浅色
- English Term
- Pale
- 公式/参数
- Lightness band
- 设计用途
- 背景、母婴、护肤、食物留白
- 常见误区
- 浅色文字可读性差，需搭配深色文字。
- 相关概念
- Lightness
明暗层级
明暗层级
非常接近白，适合大面积背景。
明暗层级
- 中文术语
- 极浅色
- English Term
- Very pale
- 公式/参数
- Lightness band
- 设计用途
- 页面底色、纸张感、淡雅包装
- 常见误区
- 浅色文字可读性差，需搭配深色文字。
- 相关概念
- Lightness