网易首页 > 网易号 > 正文 申请入驻

ColorArchive用3行代码生成3066色

0
分享至


3066个颜色,零数据库,零JSON文件,零API调用。一个前端团队用36个色相名、14个亮度词、6个饱和度档,在构建时凭空算出了整套色库。

这事听起来像程序员在炫技,但背后是个被忽视的设计痛点:手工调色板要么太少不够用,要么太多像垃圾堆。Material Design的256色被设计师吐槽"到处漏风",而某些工具的5000色库又像把颜料桶打翻在地,找个颜色得翻五分钟。

ColorArchive的解法是把颜色当成三维空间来导航——色相是经度,亮度是海拔,饱和度是浓度。每个颜色都有人类能念出的名字:Crimson Silk Clear、Amber Dusk Muted、Sage Whisper Faint。

这套系统的核心约束是:整个数据集必须能从单一函数调用复现,零外部依赖。

36个"根名"锚定色相环

色相数组按10度间隔切分,从Crimson(0度)到Merlot(350度)。每个根名都经过挑选——不是"Red-1""Red-2"这种工业编号,而是Coral、Ember、Garnet这种能唤起具体联想的词。

36个根名 × 14个亮度档 × 6个饱和度档 = 3024个彩色。再加42个中性灰(3个灰根 × 14亮度,无饱和度后缀),凑齐3066。

亮度层的命名尤其有意思。从Veil(98%亮度,近乎白)到Ink(14%亮度,近乎黑),中间插着Whisper、Mist、Pearl、Bloom、Silk、Tone、Radiant、Core、Velvet、Dusk、Shadow、Nocturne。这些词不是随便抓的——Bloom(76%)比Silk(68%)亮,但比Pearl(84%)暗,念出来就能感知层级。

饱和度六档从Faint(10%)到Pure(92%),命名逻辑同样直白:Muted比Soft更灰,Clear比Vivid更收敛。


一个flatMap调用造出全库

代码极简。三层嵌套循环展开成flatMap,每次迭代生成一个完整颜色对象:

名字是字符串拼接:根名 + 亮度后缀。ID用kebab-case:amber-pearl-muted。RGB从HSL实时算出,hex、rgb字符串、hsl字符串一并输出。还附赠色相、饱和度、亮度数值,以及自动归类的色族(family)。

构建时跑一遍,产物是静态JSON。但源文件里没有任何硬编码的色值——只有那三个小数组和转换函数。

这意味着什么?版本控制里不会出现"谁改了#FF5733"这种扯皮。想加新色相?往hueCatalog塞一行。想调整亮度曲线?改lightBands里的数字。整个色库的行为是可预测、可审计、可回滚的。

对比手工维护的色库,这相当于用生成式对抗网络替代了画师手绘——不是否定审美,是把审美编码成规则。

命名即导航

ColorArchive最被低估的设计是名字系统。传统色库用#1A2B3C或rgb(26,43,60)当标识,人类大脑根本记不住。而"Amber Dusk Muted"自带空间感:橙黄家族、偏暗、偏灰。

设计师找颜色时,脑子里先有色相意向("要个暖色"),再定亮度("但别太跳"),最后调饱和度("低调点")。三层命名正好对应这个决策路径。


团队透露,根名选择花了大量时间。Crimson和Ruby都偏红,但Crimson带蓝调、Ruby偏玫红,10度差距要用词义区分。Ember(20度)比Coral(30度)更橙,Garnet(340度)比Merlot(350度)更紫——这些微妙差别靠命名传递,而非让用户在色轮上瞎摸。

亮度词的间距也不均匀。Veil到Whisper只降4%,Whisper到Mist也是4%,但Tone到Radiant降6%,Core到Velvet降6%。这是有意为之:人眼对中间调的敏感度更高,所以Silk-Tone-Radiant-Core这段加密采样,暗部亮部则相对稀疏。

零依赖的代价与收益

放弃数据库存储,换来的是极致的可移植性。ColorArchive可以跑在静态站点生成器里,可以塞进CI流水线,可以离线使用,可以fork后魔改。没有服务宕机风险,没有API限额,没有供应商锁定。

代价是构建时间。3066次颜色转换+字符串操作,在现代硬件上忽略不计,但在极端性能场景(比如每次保存都重建)可能需要缓存策略。团队目前的解法是构建时生成一次,产物提交到CDN。

另一个隐性成本是命名维护。36个根名、14个亮度词、6个饱和度档,总共56个词汇需要持续打磨。如果某天发现"Radiant"和"Core"的区分度不够,改名会影响所有下游引用。这是规则系统的通病:灵活性换一致性,一致性换可预测性。

但相比手工维护3066条记录的 nightmare,这仍是更健康的架构。想象Material Design想新增一个色相——需要设计师提案、评审、生成全套变体、更新文档。ColorArchive改一行代码, rebuild,完事。

这套方法论正在溢出颜色领域。字体字重、间距系统、阴影层级——任何"有规律的离散集合"都可以尝试生成式定义。Tailwind CSS的spacing scale、Open Props的设计令牌,都是同类思路。

ColorArchive的独特之处在于把生成逻辑暴露得如此彻底。不是"我们有一套设计系统",而是"我们的设计系统就是这段代码,你可以读、可以改、可以fork"。

项目开源后,最意外的反馈来自无障碍领域。一位屏幕阅读器用户留言,说传统色库的"Light Blue 3"对盲人毫无意义,但"Sky Mist Clear"能让他建立心理模型——色相(天空)、亮度(薄雾)、饱和度(清透)。命名即语义,语义即可访问性。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
女排集训新变化:吴梦洁加强后二训练,06年主攻成右翼火力潜力股

女排集训新变化:吴梦洁加强后二训练,06年主攻成右翼火力潜力股

排球黄金眼
2026-04-14 00:00:03
小米收购玛莎拉蒂大反转,真相看傻全网!

小米收购玛莎拉蒂大反转,真相看傻全网!

财叔
2026-04-12 08:30:21
伊朗到现在都不敢相信,40天的血战,给自己打出了半个世纪的国运

伊朗到现在都不敢相信,40天的血战,给自己打出了半个世纪的国运

起喜电影
2026-04-13 10:46:04
5.8折后1599元:特斯拉推出家庭充电桩限时特惠活动

5.8折后1599元:特斯拉推出家庭充电桩限时特惠活动

IT之家
2026-04-13 14:18:27
欧尔班败选 冯德莱恩立即发声祝贺“匈牙利选择了欧洲”

欧尔班败选 冯德莱恩立即发声祝贺“匈牙利选择了欧洲”

新京报
2026-04-13 11:55:04
豪门太太不好当!这次,自曝人“废”了的郭碧婷,没给向太留颜面

豪门太太不好当!这次,自曝人“废”了的郭碧婷,没给向太留颜面

橙星文娱
2026-04-13 19:29:51
拿4亿筑墙!瓦罕走廊已被牢牢封死,中国对塔利班从未放下过戒心

拿4亿筑墙!瓦罕走廊已被牢牢封死,中国对塔利班从未放下过戒心

百科密码
2026-04-10 15:25:10
何穗居家做美食,变身最美厨娘,非常接地气!

何穗居家做美食,变身最美厨娘,非常接地气!

小小一米月儿
2026-04-14 00:20:08
周涛结束了和丈夫的12年婚姻,她说:这段婚姻太痛苦了,身心俱疲

周涛结束了和丈夫的12年婚姻,她说:这段婚姻太痛苦了,身心俱疲

阿讯说天下
2026-04-12 17:53:46
马伊琍官宣喜讯不到24小时 文章高调求“复合” 姚笛才是笑到最后

马伊琍官宣喜讯不到24小时 文章高调求“复合” 姚笛才是笑到最后

潮鹿逐梦
2026-04-11 14:48:49
“梅姨”被指除9名男生还拐过3名女孩,“梅姨案”延长侦查期限;实探“梅姨”生活过的村庄:与钟彬被卖地仅相距约40公里

“梅姨”被指除9名男生还拐过3名女孩,“梅姨案”延长侦查期限;实探“梅姨”生活过的村庄:与钟彬被卖地仅相距约40公里

扬子晚报
2026-04-13 15:36:22
撕毁合同倒向日本,拒赔中国361亿违约金,这个国家如今怎么样了

撕毁合同倒向日本,拒赔中国361亿违约金,这个国家如今怎么样了

涵豆说娱
2026-04-08 20:05:39
骗走50亿被央视曝光!用小鲜肉的血抗衰,“捞金女王”这次真栽了

骗走50亿被央视曝光!用小鲜肉的血抗衰,“捞金女王”这次真栽了

梦录的西方史话
2026-04-11 15:35:02
84年邓小平下榻广州白天鹅宾馆,指着软面包说:给我上法国硬面包

84年邓小平下榻广州白天鹅宾馆,指着软面包说:给我上法国硬面包

大运河时空
2026-04-11 06:00:03
C罗未进前十!外媒评足坛历史地位,梅西强势登顶,齐达内上榜

C罗未进前十!外媒评足坛历史地位,梅西强势登顶,齐达内上榜

祥谈体育
2026-04-13 20:25:54
空乘人员和郑丽文同框出镜,真是太美了!

空乘人员和郑丽文同框出镜,真是太美了!

达文西看世界
2026-04-12 09:39:42
脊柱断裂、前夫已死,62岁"亚洲天后"韦唯,现状曝光让人唏嘘不已

脊柱断裂、前夫已死,62岁"亚洲天后"韦唯,现状曝光让人唏嘘不已

丹妮观
2026-04-02 14:43:02
我国首任空军参谋长,因泄露国家机密被撤职,死后遗体被冰冻12年

我国首任空军参谋长,因泄露国家机密被撤职,死后遗体被冰冻12年

混沌录
2026-04-11 18:59:19
太突然!风向变了,很多人开始抨击全红婵,又印证了谷爱凌的话!

太突然!风向变了,很多人开始抨击全红婵,又印证了谷爱凌的话!

以茶带书
2026-04-04 15:06:37
“孩子太小不会看,随便投诉,去卫健委都行!”医生怒怼家属后,儿科只剩2名医生,医院无奈停诊!

“孩子太小不会看,随便投诉,去卫健委都行!”医生怒怼家属后,儿科只剩2名医生,医院无奈停诊!

医客
2026-04-12 12:15:44
2026-04-14 01:15:00
摸鱼算法
摸鱼算法
致力于用最前沿的AI技术,换取更多发呆时间的三十岁青年。
1295文章数 13关注度
往期回顾 全部

科技要闻

"抄作业"近四年,马斯克版微信周五上线

头条要闻

上海女子2个月内结2次婚 生下的孩子却是第3个男人的

头条要闻

上海女子2个月内结2次婚 生下的孩子却是第3个男人的

体育要闻

一支球队不够烂,也是一种悲哀

娱乐要闻

初代“跑男团”合体,邓超、鹿晗缺席

财经要闻

谈判未完全关闭?3国力促美伊重启谈判

汽车要闻

不止命名更纯粹 领克10/10+要做纯电操控新王

态度原创

旅游
数码
亲子
游戏
公开课

旅游要闻

世博文化公园繁花竞放,解锁上海春日限定浪漫

数码要闻

壹号本ONEXStation i1迷你主机发售,18999元

亲子要闻

老了才明白:不管多 心疼儿女,帮忙带 娃时,都要留意这3点

《GTA6》或不及前作轰动?前作配音:现实太抽象

公开课

李玫瑾:为什么性格比能力更重要?

无障碍浏览 进入关怀版