术语图鉴/UI/UX 设计/配色
←→切换Esc返回

配色 Color Palette

你可能会说

帮我选一套配色:暖色调主色,配一个对比明显的强调色。

选择一组搭配和谐的颜色用于整个产品。

选择一组搭配和谐的颜色用于整个产品。通常有主色(品牌色)、辅色、中性色(灰阶)、语义色(红=错误、绿=成功)。

也常被叫作Color Palette

生活类比

像穿衣服的搭配——上衣、裤子、鞋子颜色要协调,不能红配绿赛狗屁。

🎮 动手试试

#d97757
#5797d9
选择题选择一个你认为最合适的答案

关于「配色」,以下哪个描述最准确?

你可以这样告诉 AI

帮我给这个新项目选一套配色:主色用科技蓝、辅色暖灰、成功绿失败红,再定义中性色阶给文字用。

容易混淆?这样区分

配色 Color Palette≠
对比度 Contrast

配色关心颜色之间是否协调好看,对比度关心文字和背景的明暗差异是否够大、能否看清。

什么时候用

为新项目定色调

启动新项目需要统一品牌色、辅色、语义色时,用配色知识选一组和谐的颜色体系,避免每个页面各用各的颜色。

和 AI 协作时

想让 AI 推荐配色时,说「帮我定主色科技蓝、辅色暖灰、成功绿失败红」,AI 会给出完整色板。

什么时候不用

已有成熟设计系统

如果项目已接入成熟的组件库(如 Ant Design、Material UI),配色已内建在主题中,自己重选反而破坏一致性。

与无界面的后端服务无关

API 服务、数据库、命令行工具等没有视觉界面的项目,配色完全没有用武之地。

组成结构 · Anatomy

1
核心概念Core

选择一组搭配和谐的颜色用于整个产品。通常有主色(品牌色)、辅色、中性色(灰阶)、语义色(红=错误、绿

2
实际表现In Practice

像穿衣服的搭配——上衣、裤子、鞋子颜色要协调,不能红配绿赛狗屁。

3
与 AI 的关联AI Context

和 AI 沟通时提到「帮我选个配色方案」或「主色用蓝色」,就是在定配色。

典型使用场景

为新项目定色
告诉 AI「帮我定义一套 CSS 变量色板,主色 #2563EB、辅色 #F59E0B、中性灰 50 到 900 十个色阶」
想弄懂概念时
告诉 AI「用大白话给我解释什么是配色,举个生活中的例子」

延伸阅读