中日传统色彩

中国与日本传统色的色名、色值和来历对照。点色卡即复制,切一下写法就能复制 HEX、RGB 或 HSL,点开还能看相近色。

显示 132 / 132 个色|中国 80 个、日本 52 个

色值是怎么定的

传统色不是潘通色卡那种标准色,它更像一个范围。古人写「月白」,指的是月光下那类偏蓝的浅白,既没有配方也没有色号;后代从织物、瓷器、绘画上把它取下来,取的又是不同的样品、用不同的仪器、在不同光源下读的数。所以同一个色名在几份色卡之间差几阶是常态而不是谁抄错了。这一页能做的是把口径写清楚:中国部分用的是流传最广的那份中国传统色色卡,日本部分用的是「和色大辞典」的日本传统色一栏,两边都能顺着色名查到出处。

正因为如此,把传统色直接搬进设计规范之前,最好先定一个来源并记下来,不要这一版用 A 网站的月白、下一版用 B 网站的月白。想要更稳的做法是先拿这里的色值起稿,再用取色器从真实载体上取一次正式值,然后把它当成自定义色号来维护。这张表最大的用处是给配色找灵感、给文案找词,以及避免跨语言时把两种不同的色当成同一个用。

中日同名不同色,是这一页最该看的部分

中日两国都用汉字给颜色起名,恰好有几百个色名是两边共有的,比如月白、茜色、琥珀、群青、栗色、象牙。麻烦在于:名字一样,色值不一定一样。日本传统色经过近代染色工业的整理,很多色名被标准化成了固定的色值;中国的传统色则更多来自文献和文物的复现,两者对同一个词的理解会分叉。月白是个典型——中国色卡给的是 #D6ECF0 这种偏蓝的浅白,日本色卡给的是 #EAF4FC,更冷也更接近纯白。

页面对比时会把结尾的「色」字去掉再比,所以「琥珀」「琥珀色」会被视为同一个名字;只有两边色值真的不同才收录。用的时候只要记住一条:和一个日本设计师说「月白」,他脑子里的那个色,未必是你手上的那个色。要沟通就把色值一起发过去,别只发色名。

相近色为什么只能当参考

相近色用的是「redmean」加权欧氏距离:把两个颜色在 sRGB 空间里的红绿蓝差值分别平方,按权重加权求和再开方。它的权重随红色通道的均值变化,绿色权重固定是 4 最高(人眼对绿色最敏感),红蓝权重在偏红时红多一点、偏蓝时蓝多一点。这个公式比直接算三通道的直线距离更贴近人眼感受,但仍然是近似——真正感知均匀的是 CIELAB 那类色彩空间,算起来也重得多。

所以「相近色」给出的是排序,不是「这就是最接近的那个色」。同一个色在不同的显示器、不同的色域设置下,最近邻甚至可能换一个。要判断两个色在实际场景里能不能区分开,比距离更该看的是对比度比值:用颜色对比度检查算一下具体数值,比凭感觉猜准得多。要在几种写法之间来回换算用颜色转换,要按屏幕观感实时调色用颜色选择器,想看看某个色在色盲眼里是什么样子用色盲模拟。

常见问题

这里的色值为什么和别的网站对不上?

因为传统色本来就不是标准色。同一个色名在不同色卡上的差别来自三件事:古人配的是染料和颜料,本来就只能给你一个范围;近代整理者从织物、瓷器上取色,取的是不同样本;不同色卡在屏幕上再一调,又是几阶的偏差。这一页中国部分用的是流传最广的那份中国传统色色卡,日本部分用的是和色大辞典,两边的口径都在页面里写明了,比「哪个数字才是真的」更要紧的是知道手上这份数字是从哪儿来的。

「中日同名却不同色」是什么意思?

指中国和日本都有同一个汉字色名,但两边给的色值差得能一眼看出来。页面对比时会把结尾的「色」字去掉,所以「琥珀」和「琥珀色」会被当成同一个名字来比。这类色名是跨语言沟通里最容易踩的坑:听到对方说「月白」,你可能拿到的是中国那种偏蓝的浅白,也可能拿到日本那种更冷的青白。需要用哪个就点开那一条,两边的色值和来历都列在一起。

相近色是按什么算出来的?

按「redmean」加权欧氏距离在 sRGB 空间里算。它是把两色的红绿蓝分量的差平方后加权求和再开方,权重随红通道的均值变化:绿色权重固定最高,因为人眼对绿色最敏感;红蓝的权重则看当前是偏红还是偏蓝。它是对人眼感受的一个粗略近似,比直接算 RGB 直线距离好,但离真正感知均匀的 CIELAB 还差一截,所以相近色的顺序只当参考,别当成唯一答案。

色系分类是怎么定的?

十二个色系是按色相和明度人工归的,一条一条看过。它没有唯一解,因为传统色里本来就有一大批模棱两可的:缥色可以说成绿,也可以说成青;雪青在紫和粉之间。归类的目的只是让你在几百个色里先缩小范围,真要找某个具体色名,用搜索直接打名字或者打十六进制更快。另外每个色系按钮上的数字是这一类的条数,中日两边的色会一起算进去。

为什么复制的是 hex,不是 rgb 或者 hsl?

复制哪种写法可以自己切。默认给十六进制是因为它最短、在 CSS 里最通用,粘进设计软件或者代码里基本都认。切换到 RGB 会复制成 rgb(74, 66, 102) 这种写法,直接粘进 CSS 就能用;切到 HSL 则是 hsl(253, 22%, 33%)。同一份颜色的三种写法是同一个色,差别只在于 HSL 的百分比更适合人手动微调明暗。

点一下色卡会复制,为什么复制失败?

浏览器的剪贴板接口要求页面在安全上下文里,也就是 https 或者 localhost。用 http 打开时页面会退回老式的 execCommand 方式复制;两种都不成的话会在页面上提示「复制失败,请手动选中复制」,这时点开色卡详情,把十六进制那一行选中复制即可。

色卡上的字为什么要自动换黑或白?

因为色值跨度很大:明黄 #FFE211 上放白字根本看不清,墨 #595857 上放黑字也一样。这里用 WCAG 的相对亮度公式判断该用黑还是白——先把每个通道按 0.03928 分档做线性化,再按人眼对红绿蓝的敏感度加权,最后比较黑字和白字谁和这个底色的对比度更高,选高的那个。所以浅色配深字、深色配浅字是算出来的,不是按明度大概估的。

这些色名能当 CSS 变量或者设计规范直接用吗?

可以拿来起稿,但不建议当成严格规范。传统色的色值受资料版本影响,同一份清单换个来源就可能有几阶偏差,把它写进设计规范之前最好先定死一个来源并记下来。真正的配色校验还得靠数值:想确认某个传统色配白字够不够清楚,用颜色对比度检查算具体比值;要在不同写法之间换算,用颜色转换;要按纸张或屏幕的观感挑近似色,用颜色选择器会更直观。

相关:颜色对比度检查颜色转换颜色选择器