中国传统色卡
霁青 / 黛蓝 / 月白 / 绛紫 / 朱砂 / 缃叶 · 含 HEX / 拼音 / 五行属性 / 出处
霁青/黛蓝/月白等 + HEX/五行
霁青 / 黛蓝 / 月白 / 绛紫 / 朱砂 / 缃叶 · 含 HEX / 拼音 / 五行属性 / 出处
了解工具定位 · 使用场景 · 对比优势
书画修复师或古画爱好者面对一幅褪色的宋代山水,需要从残存的色块中推断原貌。本工具提供霁青、黛蓝、月白等传统色的精确 HEX 值,配合五行属性,能快速匹配画作中天空、山石、水面的理想色相,减少主观猜测,提高复原方案的专业性。
装修业主想在客厅用「月白」做墙面,但建材市场色卡只标「浅蓝灰」,肉眼对照容易翻车。直接在本工具中调出月白的 HEX 值,拿给涂料店电脑调色,或在线下色卡中找最接近的编号,确保刷上墙的颜色就是古籍里的那抹清冷月光。
汉服裁缝或同袍定制一件「霁青」马面裙,但染坊提供的色板只有「藏青」「靛蓝」等模糊名称。用本工具获取霁青的 HEX 值和五行属性(水),与染坊沟通时直接报十六进制色号,避免「再深一点」「再灰一点」的无效沟通,一次染出正色。
独立开发者或设计师做一款诗词类 App,想用传统色做界面主色调,但担心「黛蓝」太暗影响可读性。用本工具快速浏览各色的 HEX 与五行属性,筛选出明度适中的颜色(如「月白」做背景、「黛蓝」做标题),再配合五行相生关系搭出和谐色阶,省去手动调色时间。
美术或语文老师讲《千里江山图》时,想让学生直观感受「石青」「石绿」等传统色与普通蓝绿色的差异。课堂上打开本工具,投影出各色的 HEX 值,让学生对比手机取色器拍到的实物照片,理解古代颜料色域与现代数字色域的不同,增强对传统美学的感知。
| 维度 | 本工具 | 竞品 A(中国色) | 传统方法 |
|---|---|---|---|
| 数据隐私 | 纯浏览器,零上传 | 上传到服务器 | 依赖人工翻阅色卡/书籍 |
| 处理速度 | 1 秒内 | 3-5 秒 | 数分钟至数小时 |
| 离线可用 | 完全离线 | 需联网 | 完全离线 |
| 色彩来源 | 典籍+实物+现代色值 | 单一色卡/数据库 | 个人经验/记忆 |
| 输出格式 | HEX + 五行 + 名称 | 仅 HEX/名称 | 无标准格式 |
| 更新频率 | 持续更新 | 固定版本 | 无更新 |
| 覆盖色数 | 300+ 色 | 100-200 色 | 几十色 |
| 移动端适配 | 响应式,触屏友好 | 部分未适配 | 不适用 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| 霁青 | 霁青 | #6B8E8E | 水 | 典型场景:搜索常见传统色名称 |
| 月白 | 月白 | #D6ECF0 | 水 | 典型场景:搜索常见传统色名称 |
| 黛蓝 | 黛蓝 | #425066 | 水 | 典型场景:搜索常见传统色名称 |
| 鸦青 | 鸦青 | #424C50 | 水 | 边界 case:颜色名含动物但非标准色 |
| 昏黄 | 昏黄 | #C89B3C | 土 | 边界 case:颜色名含时间但非标准色 |
| 赤红 | 赤红 | #C3272B | 火 | 易错 case:用户常误以为赤红五行属火 |
| 玄黑 | 玄黑 | #1C1C1C | 水 | 易错 case:玄黑五行属水而非土 |
输入「霁青」后直接拿 HEX #77B5FE 去印刷或油漆调色将 HEX 值作为屏幕设计参考,印刷前用 Pantone 或 CMYK 转换工具校准中国传统色名称对应的 HEX 是数字化的近似值,不同来源(古籍/画作/染料)色值有偏差,不能替代工业色卡标准。
认为「黛蓝属水」意味着该颜色在光学上具有蓝色波长以外的水属性特征将五行属性理解为传统文化分类体系,不用于物理光学或色彩科学的计算五行(金木水火土)是哲学分类,与色相、饱和度、明度等物理参数无对应关系,不能推导出互补色或配色公式。
把 #C41E3A(霁红)直接用于 Adobe RGB 或 DCI-P3 色域的显示器/打印机确认输出设备色域,必要时用 ICC 配置文件转换色值HEX 默认对应 sRGB 色域;宽色域设备上直接使用会导致饱和度/色相偏移,尤其红色和蓝色差异明显。
设计时用 #FFFFFF 替代月白,认为月白就是白色月白是极浅的蓝白色(接近 #D6ECF0),与纯白有明显色差月白指月光映照下的淡蓝色,不是白色;古籍《天工开物》记载月白用靛蓝微染,色值偏冷。
认为所有古籍中的「黛蓝」都对应同一个 HEX 值参考工具提供的 HEX 作为现代近似值,设计时根据具体文献/画作版本微调同一颜色名在不同朝代、不同典籍(如《说文》《本草纲目》《雪宧绣谱》)中色值有差异,工具取的是通用近似。
用 #F5F5DC(米色)作为背景、#FFFFF0(象牙白)作为文字,认为都是浅色没问题用 WCAG 2.1 对比度工具(如 WebAIM)计算实际对比度,确保 ≥ 4.5:1中国传统色包含大量低饱和度、高明度颜色,相邻色相间对比度可能不足 3:1,不适合做文字/背景组合。
直接复制工具给出的 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 标准)。
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 个高频疑问