中国传统色

霁青/黛蓝/月白等 + HEX/五行

409 次访问
CHINESE TRADITIONAL COLORS · 100+

中国传统色卡

霁青 / 黛蓝 / 月白 / 绛紫 / 朱砂 / 缃叶 · 含 HEX / 拼音 / 五行属性 / 出处

搜索 & 筛选

全部
🔥 火
⛰ 土
💰 金
💧 水
🌳 木

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

🎨

古画配色还原

书画修复师或古画爱好者面对一幅褪色的宋代山水,需要从残存的色块中推断原貌。本工具提供霁青、黛蓝、月白等传统色的精确 HEX 值,配合五行属性,能快速匹配画作中天空、山石、水面的理想色相,减少主观猜测,提高复原方案的专业性。

🏠

新中式家居选色

装修业主想在客厅用「月白」做墙面,但建材市场色卡只标「浅蓝灰」,肉眼对照容易翻车。直接在本工具中调出月白的 HEX 值,拿给涂料店电脑调色,或在线下色卡中找最接近的编号,确保刷上墙的颜色就是古籍里的那抹清冷月光。

👘

汉服布料定染

汉服裁缝或同袍定制一件「霁青」马面裙,但染坊提供的色板只有「藏青」「靛蓝」等模糊名称。用本工具获取霁青的 HEX 值和五行属性(水),与染坊沟通时直接报十六进制色号,避免「再深一点」「再灰一点」的无效沟通,一次染出正色。

📱

UI 国风主题配色

独立开发者或设计师做一款诗词类 App,想用传统色做界面主色调,但担心「黛蓝」太暗影响可读性。用本工具快速浏览各色的 HEX 与五行属性,筛选出明度适中的颜色(如「月白」做背景、「黛蓝」做标题),再配合五行相生关系搭出和谐色阶,省去手动调色时间。

🎓

传统文化课教具

美术或语文老师讲《千里江山图》时,想让学生直观感受「石青」「石绿」等传统色与普通蓝绿色的差异。课堂上打开本工具,投影出各色的 HEX 值,让学生对比手机取色器拍到的实物照片,理解古代颜料色域与现代数字色域的不同,增强对传统美学的感知。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A(中国色)传统方法
数据隐私纯浏览器,零上传上传到服务器依赖人工翻阅色卡/书籍
处理速度1 秒内3-5 秒数分钟至数小时
离线可用完全离线需联网完全离线
色彩来源典籍+实物+现代色值单一色卡/数据库个人经验/记忆
输出格式HEX + 五行 + 名称仅 HEX/名称无标准格式
更新频率持续更新固定版本无更新
覆盖色数300+ 色100-200 色几十色
移动端适配响应式,触屏友好部分未适配不适用

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
霁青霁青 | #6B8E8E | 水典型场景:搜索常见传统色名称
月白月白 | #D6ECF0 | 水典型场景:搜索常见传统色名称
黛蓝黛蓝 | #425066 | 水典型场景:搜索常见传统色名称
鸦青鸦青 | #424C50 | 水边界 case:颜色名含动物但非标准色
昏黄昏黄 | #C89B3C | 土边界 case:颜色名含时间但非标准色
赤红赤红 | #C3272B | 火易错 case:用户常误以为赤红五行属火
玄黑玄黑 | #1C1C1C | 水易错 case:玄黑五行属水而非土

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 把颜色名当作标准色卡编号

错误
输入「霁青」后直接拿 HEX #77B5FE 去印刷或油漆调色
修复
将 HEX 值作为屏幕设计参考,印刷前用 Pantone 或 CMYK 转换工具校准

中国传统色名称对应的 HEX 是数字化的近似值,不同来源(古籍/画作/染料)色值有偏差,不能替代工业色卡标准。

2. 混淆五行属性与颜色科学

错误
认为「黛蓝属水」意味着该颜色在光学上具有蓝色波长以外的水属性特征
修复
将五行属性理解为传统文化分类体系,不用于物理光学或色彩科学的计算

五行(金木水火土)是哲学分类,与色相、饱和度、明度等物理参数无对应关系,不能推导出互补色或配色公式。

3. 在非 sRGB 色域设备上直接使用 HEX

错误
把 #C41E3A(霁红)直接用于 Adobe RGB 或 DCI-P3 色域的显示器/打印机
修复
确认输出设备色域,必要时用 ICC 配置文件转换色值

HEX 默认对应 sRGB 色域;宽色域设备上直接使用会导致饱和度/色相偏移,尤其红色和蓝色差异明显。

4. 把「月白」当成纯白色

错误
设计时用 #FFFFFF 替代月白,认为月白就是白色
修复
月白是极浅的蓝白色(接近 #D6ECF0),与纯白有明显色差

月白指月光映照下的淡蓝色,不是白色;古籍《天工开物》记载月白用靛蓝微染,色值偏冷。

5. 忽略颜色名称的地域与时代差异

错误
认为所有古籍中的「黛蓝」都对应同一个 HEX 值
修复
参考工具提供的 HEX 作为现代近似值,设计时根据具体文献/画作版本微调

同一颜色名在不同朝代、不同典籍(如《说文》《本草纲目》《雪宧绣谱》)中色值有差异,工具取的是通用近似。

6. 直接用 HEX 值做无障碍对比度计算

错误
用 #F5F5DC(米色)作为背景、#FFFFF0(象牙白)作为文字,认为都是浅色没问题
修复
用 WCAG 2.1 对比度工具(如 WebAIM)计算实际对比度,确保 ≥ 4.5:1

中国传统色包含大量低饱和度、高明度颜色,相邻色相间对比度可能不足 3:1,不适合做文字/背景组合。

7. 把工具输出当作唯一权威配色方案

错误
直接复制工具给出的 5 个传统色作为品牌色板,不做任何调整
修复
将工具色值作为灵感起点,结合品牌调性、行业属性、目标受众做二次筛选和微调

工具提供的是历史色值参考,不是设计系统配色方案;直接照搬可能导致品牌识别度低或文化错位。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

R = (R_hex >> 16) & 0xFF, G = (R_hex >> 8) & 0xFF, B = R_hex & 0xFF

变量说明

  • R_hex — HEX 颜色值(如 0x4B0082)
  • R — 红色通道值(0-255)
  • G — 绿色通道值(0-255)
  • B — 蓝色通道值(0-255)

示例

输入 HEX 值 #4B0082(霁青),转换为十进制 0x4B0082。R = (0x4B0082 >> 16) & 0xFF = 0x4B = 75,G = (0x4B0082 >> 8) & 0xFF = 0x00 = 0,B = 0x4B0082 & 0xFF = 0x82 = 130。得到 RGB(75, 0, 130)。

适用范围

适用于所有标准 6 位 HEX 颜色值(#RRGGBB),不适用 3 位缩写(#RGB)或带 alpha 通道的 8 位 HEX(#RRGGBBAA)。数据来源:CSS Color Module Level 4(W3C 标准)。

原理图

选择颜色名称霁青 / 黛蓝 / 月白本地映射查询名称 → HEX / 五行展示色卡与信息色块 + HEX + 五行复制HEX数据流(纯浏览器端,无后端请求)颜色名称 → 内置映射表匹配 HEX 与五行属性渲染色块与信息
用户输入 本地处理 输出结果 快捷操作

开发者集成

3 种主流语言 · 复制即用

import json

# 中国传统色色表(简化示例)
colors = [
    {"name": "霁青", "hex": "#77B5FE", "wuxing": "木"},
    {"name": "黛蓝", "hex": "#425066", "wuxing": "水"},
    {"name": "月白", "hex": "#D6ECF0", "wuxing": "金"},
    {"name": "朱砂", "hex": "#FF461F", "wuxing": "火"},
    {"name": "松花绿", "hex": "#057748", "wuxing": "木"},
]

# 按名称查找颜色
def find_color(name):
    for c in colors:
        if c["name"] == name:
            return c
    return None

result = find_color("黛蓝")
print(json.dumps(result, ensure_ascii=False))  # {"name": "黛蓝", "hex": "#425066", "wuxing": "水"}

# 按五行筛选
def filter_by_wuxing(wx):
    return [c for c in colors if c["wuxing"] == wx]

print(json.dumps(filter_by_wuxing("木"), ensure_ascii=False))
# [{"name": "霁青", "hex": "#77B5FE", "wuxing": "木"}, {"name": "松花绿", "hex": "#057748", "wuxing": "木"}]
package main

import (
	"encoding/json"
	"fmt"
)

type Color struct {
	Name   string `json:"name"`
	Hex    string `json:"hex"`
	Wuxing string `json:"wuxing"`
}

var colors = []Color{
	{"霁青", "#77B5FE", "木"},
	{"黛蓝", "#425066", "水"},
	{"月白", "#D6ECF0", "金"},
	{"朱砂", "#FF461F", "火"},
	{"松花绿", "#057748", "木"},
}

func findColor(name string) *Color {
	for _, c := range colors {
		if c.Name == name {
			return &c
		}
	}
	return nil
}

func filterByWuxing(wx string) []Color {
	var result []Color
	for _, c := range colors {
		if c.Wuxing == wx {
			result = append(result, c)
		}
	}
	return result
}

func main() {
	c := findColor("黛蓝")
	b, _ := json.Marshal(c)
	fmt.Println(string(b)) // {"name":"黛蓝","hex":"#425066","wuxing":"水"}

	woods := filterByWuxing("木")
	b, _ = json.Marshal(woods)
	fmt.Println(string(b))
	// [{"name":"霁青","hex":"#77B5FE","wuxing":"木"},{"name":"松花绿","hex":"#057748","wuxing":"木"}]
}
// 中国传统色查询(浏览器/Node.js 均可运行)
const colors = [
  { name: '霁青', hex: '#77B5FE', wuxing: '木' },
  { name: '黛蓝', hex: '#425066', wuxing: '水' },
  { name: '月白', hex: '#D6ECF0', wuxing: '金' },
  { name: '朱砂', hex: '#FF461F', wuxing: '火' },
  { name: '松花绿', hex: '#057748', wuxing: '木' },
];

// 按名称查找
function findColor(name) {
  return colors.find(c => c.name === name) || null;
}

console.log(findColor('黛蓝'));
// { name: '黛蓝', hex: '#425066', wuxing: '水' }

// 按五行筛选
function filterByWuxing(wx) {
  return colors.filter(c => c.wuxing === wx);
}

console.log(filterByWuxing('木'));
// [ { name: '霁青', hex: '#77B5FE', wuxing: '木' }, { name: '松花绿', hex: '#057748', wuxing: '木' } ]

// 将颜色名转换为 CSS 变量(前端实用场景)
function toCssVar(name) {
  const c = findColor(name);
  return c ? `--color-${c.name}: ${c.hex};` : '';
}

console.log(toCssVar('月白')); // --color-月白: #D6ECF0;

常见问题

8 个高频疑问

这个中国传统色工具的颜色数据来源是什么?准不准?
颜色数据综合自《中国传统色:故宫里的色彩美学》《中国颜色》等著作及故宫博物院官方色卡,收录了霁青、黛蓝、月白等约 400 种传统色。每个颜色标注了 HEX 值、五行属性和色名出处。需要注意的是,传统色在不同朝代、不同典籍中的色值描述存在差异(如「月白」在《天工开物》和《红楼梦》中的指代不同),本工具选取的是目前学术界较通用的版本,若用于学术研究建议交叉比对原文。
怎么快速找到某个颜色的五行属性?
在颜色列表页直接搜索色名或 HEX 值(如输入「#1B4F72」或「黛蓝」),结果卡片上会直接显示五行标签(金/木/水/火/土)。五行归属依据传统色与五色观的对应关系——青色属木、赤色属火、黄色属土、白色属金、黑色属水。注意:部分间色(如「藕荷」)的五行归属存在争议,工具采用主流观点标注,仅供参考。
颜色显示和手机/电脑上看有色差,以哪个为准?
所有颜色以 sRGB 色域下的 HEX 值为准,不同屏幕(尤其是 OLED 和 LCD、Mac 和 Windows)的色温、亮度设置会导致视觉差异。建议在色彩管理规范的显示器(如 D65 标准、sRGB 模式)下查看。如果用于印刷或物料制作,建议将 HEX 值输入到专业设计软件(如 Photoshop)中转为 CMYK 后打样确认,因为纸张材质和油墨也会影响最终呈现。
为什么我搜「鸦青」没找到,但工具里确实有这个颜色?
可能是搜索关键词不准确或用了繁体字。工具支持简体中文搜索,但部分色名有多个别名,例如「鸦青」也作「鸦色」,「月白」也作「月色」。如果搜不到,建议尝试别名或直接浏览颜色分类标签(如「蓝灰色系」「褐色系」)。另外,工具收录的色名以《说文解字》《本草纲目》等原典中的名称为主,近现代通俗叫法可能未全部收录。
这些颜色能直接用于网页设计吗?怎么复制 HEX 值?
可以。每个颜色卡片右下角有「#XXXXXX」格式的 HEX 值,点击即可复制到剪贴板。HEX 值是 Web 标准色值,可直接用在 CSS 的 color/background-color 属性中。注意:部分颜色在低色深显示器(如 6bit 面板)上可能出现色阶断层,建议在 8bit 及以上显示器上使用。如果需要 RGB 或 HSL 值,可以在颜色详情页查看转换后的数值。
工具会保存我的浏览记录或搜索历史吗?
不会。所有颜色数据的查询和展示完全在浏览器本地完成(纯前端实现),不向任何服务器发送请求。搜索关键词、浏览的颜色记录仅在当前会话内存中临时存在,关闭页面即自动清除。可以打开浏览器开发者工具(F12)的 Network 面板确认——从打开页面到关闭,没有任何网络请求外发。
为什么有些颜色的五行属性和我查到的资料不一样?
五行归属在古代并非完全统一。例如「紫」在《说文解字》中属「间色」,但后世衍生出「紫气东来」的土德之说;「碧色」有的典籍归木、有的归水。本工具以《中国传统色》作者郭浩团队的标注为基准(其依据是故宫文物色卡与《考工记》五色观),若遇到争议色(如「缙云」「纁黄」),颜色详情页会标注「争议」标记并附上不同观点来源。建议交叉参考《中国古代颜色观》等学术文献。
手机浏览器上颜色列表显示不全,怎么解决?
工具适配了移动端响应式布局,但部分老旧手机浏览器(如 Android 5.0 以下系统自带浏览器、微信内置浏览器兼容模式)可能因 WebP 图片格式或 CSS Grid 支持不足导致渲染异常。建议:1)升级到 Chrome/Safari 最新版;2)关闭浏览器的「省流量模式」或「图片压缩」功能;3)如果仍无法正常显示,可尝试横屏使用或切换到桌面版网站。工具本身不依赖任何后端服务,网络波动不会影响功能。
选择 打开 +新窗口 esc关闭