见色 JIANSE
中文配色灵感库 · CHINESE PALETTE ARCHIVE · VOL.01

见色

颜色不是装饰,是语言。这里把中文配色按 7 大道色系归档,收录 21 组可直接落地的方案与 105 枚色样; 再交给一套本地色彩算法,为你的品牌实时推演新的一组。

色系 / FAMILY
07
方案 / SCHEME
21
色样 / SWATCH
105
滚轮或 ↓ 翻页 / PAGED
01 — 导览 / HOW TO BROWSE

不做风格标签,
只按颜色找答案。

「高级感」「国潮」「轻奢」这类词,每个人理解都不同,也没法拿去落地。颜色可以。 当客户说「再暖一点」,你需要的是一个能立刻取用的色值,而不是一句形容词。

所以这里以「色」为索引:先定一个主色相,再从同一家族的方案里挑明暗与彩度的处理方式。 每组方案都标注了适用场景与情绪,色值可一键复制成 CSS 变量。

STEP 01

选一个色系

点上方色系字,直接跳到该板块。整站背景会随色系一起变色,方便你判断这个色在满屏时压不压得住。

STEP 02

看三组方案

每个色系给出深、中、浅三种处理。悬停色块看色值,点开卡片可以拿到 HEX / RGB / CMYK 与完整 CSS。

STEP 03

按场景取用

官网、后台、小程序都有现成模板。网页给页面级五色,UI 给语义状态色,都渲染成真实界面并附对比度检测。

STEP 04

自己推一组

到配色引擎里拖动色相与明暗,选一个气质预设,六种色彩学结构同时出结果,含中文命名。

01 / 07 · VERMILION

朱

朱红 · #B3342A

朱,赤心之正色。

从宫墙到年画,朱色是中文视觉里最不容置疑的重音。它承担仪式、喜庆与口号,也最容易失控——压得住它的,只有留白与克制的墨。

  • 仪式
  • 热烈
  • 年节
02 / 07 · AMBER

缃

缃黄 · #C08A24

缃,桑叶初生之浅黄。

缃是阳光落在旧物上的那一层。它比纯黄更沉、更有重量,天然带着粮食、铜器与秋分的联觉,是最适合讲「丰足」的中文黄。

  • 丰足
  • 秋日
  • 鎏金
03 / 07 · CELADON

苍

苍绿 · #4F7757

苍,山色之深远。

苍不是嫩绿,是被时间与雨水洗过之后的绿。低彩度、偏灰、带一点蓝,它让画面安静下来,也是中文设计里最安全的「高级感」入口。

  • 沉静
  • 器物
  • 茶禅
04 / 07 · AZURE

青

天青 · #2F7A96

青,东方之生色。

「青」在中文里横跨蓝绿,是最难翻译的一个色字。天青取其澄澈一端:带一点灰的湖蓝,既冷静又不冷硬,适合需要信任感的产品。

  • 澄澈
  • 信任
  • 天光
05 / 07 · INDIGO

靛

靛蓝 · #2D3E6E

靛,蓝草沉于水底之色。

靛比天青更深、更理性。它来自蓝染的反复浸渍,天然适合承载数据、科技与夜间场景,也是中文语境里少数不需要解释就能「显得专业」的颜色。

  • 理性
  • 深邃
  • 夜色
06 / 07 · LOTUS

藕

藕紫 · #8A5A6E

藕,粉白微温之色。

藕紫是中文里最暧昧的一块色彩区间:介于粉、紫、灰之间,饱和度低却极有温度。它让品牌显得亲近,同时保留一点距离感。

  • 柔美
  • 东方
  • 亲密
07 / 07 · INK

墨

玄墨 · #26241F

墨,五色之极。

一切配色最终都要落在墨与纸之间。墨色家族决定了版面的骨架:字重、行距、留白。它不抢戏,却决定其他六色是否站得住。

  • 极简
  • 编辑
  • 骨
02 — 场景推荐 / RECOMMENDED

拿去就能
用的配色

灵感库解决「好看」,场景推荐解决「怎么用」。这里按落地场景给到两组东西:网页给页面级的五色分工, 界面给一整套 UI 语义色与层级色。每一组都渲染成真实的界面缩略图,不只给你五个色块。 每套方案都有浅色与深色两版,切一下就能对比——顺手看看你的品牌色到了暗色界面还成不成立。

每组附 WCAG 对比度检测:AAA ≥ 7:1 · AA ≥ 4.5:1 · AA 大字 ≥ 3:1。不达标的地方会直接标出来。

WEB / 网页 页面级五色 · 底 / 主色 / 强调 / 文字 / 卡片面
UI / 界面 语义状态色 + 层级色 · 含对比度检测
03 — 实验室 / COLOR ENGINE

配色引擎

给它一个主色,它按六种色彩学结构推演完整的五色搭配:单色、邻近、互补、分割互补、三角、四角。 全部算法在你本地运行,不联网、不上传,拖动即时出结果。

五色分别对应:重色(标题 / 强调)· 主色(品牌)· 辅助(图形)· 淡色(区块底)· 纸色(页面底)。

04 — 关于 / ABOUT

为什么是「见色」

「见色」取自「见色起意」——不是那个意思,而是字面的:先看见颜色,再谈设计。 中文对颜色的命名系统本来就极其细腻,缃、缥、黛、苍,一个音节一个色阶,这套命名在今天的屏幕上一度失传了。

这个库把传统色名换算成可用的十六进制值,重新放回设计流程里。 每个色系配一组可复制的方案,你可以拿去画 logo、铺网页、印包装,或者只当配色参考。

.
  • 01
    背景被颜色接管整站底色随滚动切换色系。你在首屏看到的米纸色,进到朱色板块会整体变成朱红——这是刻意的,饱和度压不压得住,满屏才知道。
  • 02
    五色角色制每组方案固定五个角色:重色、主色、辅助、淡色、纸色。按角色用色,比按「好看」用色稳得多。到场景层面会换成页面底 / 主色 / 强调 / 文字 / 卡片面,UI 再多出成功、警告、危险、信息四个语义状态——同一套思路,三种颗粒度。
  • 03
    算法本地跑配色引擎不调任何远程接口,纯色彩学运算 + 规则化中文命名。断网可用,也不会把你的品牌色传出去。
  • 04
    可以试穿点开任意一组方案,选「全站试色」,整站会立刻换上这组颜色。不喜欢,退出即可复原。
01 / 01
#000000
正在试色