MODULE 05 · BRAND COLOR

品牌色彩搭配
气质与品牌同频

色彩是品牌的"第一眼语言"。尧图基于品牌情绪与行业属性,构建主色、辅色、点缀色三位一体的色彩体系,配合对比节奏与暗色模式适配,让网站气质精准匹配品牌调性。

情绪分析 色彩体系 对比节奏 暗色适配
品牌色彩搭配工作场景
COLOR PALETTE

尧图 品牌色彩样例

主辅点缀色三位一体,每一组都对应一种品牌情绪与行业属性。

原木棕 · 主色

#B89968 · 沉稳、品质、信赖,适合品牌官网与高端制造。

米白 · 辅色

#F7F4EF · 温润、呼吸感、留白基底,让主色更突出。

深木棕 · 强调色

#9A7D4F · 用于按钮、链接、关键CTA,强化层级。

墨黑 · 文字色

#2C2924 · 主文字色,比纯黑更柔和,长时间阅读不累。

浅灰 · 中性色

#8B8680 · 辅助文字、分割线、卡片边框,承上启下。

浅木色 · 点缀色

#D4BC95 · 装饰元素、图标、Hover态,温和不抢戏。

CORE ADVANTAGES

色彩搭配的 六大能力

从情绪到体系,从静态到暗色,每个环节都基于色彩科学。

品牌情绪分析

从品牌定位、行业属性、用户画像反推主情绪关键词,定调色彩方向。

色彩体系构建

主色 + 辅色 + 点缀色 + 中性色四位一体,含明度梯度与色阶表。

对比与节奏

对比度合规 + 视觉节奏设计,让色彩既有张力又不喧闹。

暗色模式适配

主辅色暗色版本 + 反相配色规则,让暗色模式同样有质感。

无障碍合规

WCAG 2.1 AA标准,文字与背景对比度≥4.5:1,照顾色弱用户。

色彩规范文档

含HEX/RGB/HSL值、使用场景、CSS变量、Token定义的可复用文档。

DELIVERABLES

项目 交付清单

色彩交付物可直接对接设计与开发团队。

色彩体系文档

主辅点缀中性色 + 明度色阶 + 使用规则。

暗色模式色板

反相配色方案 + 暗色场景使用规则。

CSS变量定义

:root变量 + 设计Token,前端可直接复用。

Figma色板

Figma Color Style库,设计文件直接调用。

应用场景示例

按钮、卡片、表单、导航等核心场景配色示例。

无障碍报告

WCAG对比度检测报告 + 色弱模拟验证。

RELATED SERVICE

搭配 推荐服务

色彩搭配常与以下服务组合使用,效果更佳。

想为品牌找到专属的色彩语言?

免费色彩诊断 · 48小时内出具方案 · 资深色彩顾问1对1对接