见色
不做风格标签,
只按颜色找答案。
「高级感」「国潮」「轻奢」这类词,每个人理解都不同,也没法拿去落地。颜色可以。 当客户说「再暖一点」,你需要的是一个能立刻取用的色值,而不是一句形容词。
所以这里以「色」为索引:先定一个主色相,再从同一家族的方案里挑明暗与彩度的处理方式。 每组方案都标注了适用场景与情绪,色值可一键复制成 CSS 变量。
选一个色系
点上方色系字,直接跳到该板块。整站背景会随色系一起变色,方便你判断这个色在满屏时压不压得住。
看三组方案
每个色系给出深、中、浅三种处理。悬停色块看色值,点开卡片可以拿到 HEX / RGB / CMYK 与完整 CSS。
按场景取用
官网、后台、小程序都有现成模板。网页给页面级五色,UI 给语义状态色,都渲染成真实界面并附对比度检测。
自己推一组
到配色引擎里拖动色相与明暗,选一个气质预设,六种色彩学结构同时出结果,含中文命名。
朱
朱,赤心之正色。
从宫墙到年画,朱色是中文视觉里最不容置疑的重音。它承担仪式、喜庆与口号,也最容易失控——压得住它的,只有留白与克制的墨。
缃
缃,桑叶初生之浅黄。
缃是阳光落在旧物上的那一层。它比纯黄更沉、更有重量,天然带着粮食、铜器与秋分的联觉,是最适合讲「丰足」的中文黄。
苍
苍,山色之深远。
苍不是嫩绿,是被时间与雨水洗过之后的绿。低彩度、偏灰、带一点蓝,它让画面安静下来,也是中文设计里最安全的「高级感」入口。
青
青,东方之生色。
「青」在中文里横跨蓝绿,是最难翻译的一个色字。天青取其澄澈一端:带一点灰的湖蓝,既冷静又不冷硬,适合需要信任感的产品。
靛
靛,蓝草沉于水底之色。
靛比天青更深、更理性。它来自蓝染的反复浸渍,天然适合承载数据、科技与夜间场景,也是中文语境里少数不需要解释就能「显得专业」的颜色。
藕
藕,粉白微温之色。
藕紫是中文里最暧昧的一块色彩区间:介于粉、紫、灰之间,饱和度低却极有温度。它让品牌显得亲近,同时保留一点距离感。
墨
墨,五色之极。
一切配色最终都要落在墨与纸之间。墨色家族决定了版面的骨架:字重、行距、留白。它不抢戏,却决定其他六色是否站得住。
拿去就能
用的配色
灵感库解决「好看」,场景推荐解决「怎么用」。这里按落地场景给到两组东西:网页给页面级的五色分工, 界面给一整套 UI 语义色与层级色。每一组都渲染成真实的界面缩略图,不只给你五个色块。 每套方案都有浅色与深色两版,切一下就能对比——顺手看看你的品牌色到了暗色界面还成不成立。
每组附 WCAG 对比度检测:AAA ≥ 7:1 · AA ≥ 4.5:1 · AA 大字 ≥ 3:1。不达标的地方会直接标出来。
配色引擎
给它一个主色,它按六种色彩学结构推演完整的五色搭配:单色、邻近、互补、分割互补、三角、四角。 全部算法在你本地运行,不联网、不上传,拖动即时出结果。
五色分别对应:重色(标题 / 强调)· 主色(品牌)· 辅助(图形)· 淡色(区块底)· 纸色(页面底)。
为什么是「见色」
「见色」取自「见色起意」——不是那个意思,而是字面的:先看见颜色,再谈设计。 中文对颜色的命名系统本来就极其细腻,缃、缥、黛、苍,一个音节一个色阶,这套命名在今天的屏幕上一度失传了。
这个库把传统色名换算成可用的十六进制值,重新放回设计流程里。 每个色系配一组可复制的方案,你可以拿去画 logo、铺网页、印包装,或者只当配色参考。
- 01背景被颜色接管整站底色随滚动切换色系。你在首屏看到的米纸色,进到朱色板块会整体变成朱红——这是刻意的,饱和度压不压得住,满屏才知道。
- 02五色角色制每组方案固定五个角色:重色、主色、辅助、淡色、纸色。按角色用色,比按「好看」用色稳得多。到场景层面会换成页面底 / 主色 / 强调 / 文字 / 卡片面,UI 再多出成功、警告、危险、信息四个语义状态——同一套思路,三种颗粒度。
- 03算法本地跑配色引擎不调任何远程接口,纯色彩学运算 + 规则化中文命名。断网可用,也不会把你的品牌色传出去。
- 04可以试穿点开任意一组方案,选「全站试色」,整站会立刻换上这组颜色。不喜欢,退出即可复原。