把 QQ 超级调色盘的配色导出来：从原生模块到可复用数据
QQ 的设计团队在「超级调色盘」里准备了多套成组的界面配色，主色、背景、聊天气泡和浅色、深色模式都有对应安排。它们可以给其他 App 的设计提供参考：既能观察现成配色如何协调，也能研究主题算法怎样把一个基础色展开成整套颜色。
Windows QQ 9.9.36-53644 的「超级调色盘」配置里，提取到了 7 个系列、37 个固定配色条目：17 套静态配色保存了浅色、深色模式的主色、背景和气泡色；另外 20 个模板预设保存了主色种子，下面也列出了它们经原生算法派生后的颜色。
各主题配色一览
色块旁边是可复制的 HEX。每项标出的「背景 1、2…」「气泡 1、2…」表示颜色在配置数组中的位置；编号从 1 开始，JSON 数组索引从 0 开始。比如静态主题的「背景 1」对应原始 aioInfo.color[0]、导出数据 background[0] 和 CSS 变量 --qq-background-1。相同颜色出现在不同编号上时也照原样保留。八位 HEX 的末尾两位表示不透明度，例如 99 为 60%。
模板表的主色对应 brand_standard，背景 1–4 对应 bg_aio_1–4，气泡 1–2 对应 bubble_host_1 / 2。静态表保留原始数组；模板表保留派生后的 Token 编号。缤纷时刻、幻彩机核未生成第 4 个背景引用。
这些编号说明数据怎样排列，尚不足以确定 QQ 的渐变方向、位置或界面分区。 配置里的颜色数组还会与纹理、遮罩等绘制逻辑一起工作。复用时需要按目标界面安排颜色的位置与合成方式。
聊天界面配色示例
下面的示例支持全部 37 个主题和浅色、深色模式。「四角混色」把背景 1、2、3、4 放在左上、右上、左下、右下；「逐项色带」从左往右显示每一项；「只看背景 1」用于观察单色背景。我的消息使用气泡 1、2 作为 135° 渐变的两端，只有一项时使用纯色。
这些位置和角度是示例的设计选择，用于观察配色在界面中的组合。示例下方可以展开 QQ 配置自带的官方预览图，查看官方提供的产品效果；有些系列的浅色、深色配置使用同一张图，模板系列通常只提供小尺寸缩略图。示例中的聊天布局、渐变和文字补色也在旁边标出了来源与范围。
单独打开界面示例。这个 HTML 内含配色数据，可下载后直接用浏览器打开；官方预览图从 QQ 的公开资源地址按需加载。
故宫美学
| 主题 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 缥碧沧浪 | 浅色 | #439696 |
背景 1 #B1D5C8背景 2 #D5EBE1背景 3 #99BCAC背景 4 #80A492 |
气泡 1 #439696气泡 2 #439696 |
| 缥碧沧浪 | 深色 | #439696 |
背景 1 #B1D5C899背景 2 #D5EBE199背景 3 #99BCAC99背景 4 #80A49299 |
气泡 1 #439696气泡 2 #439696 |
| 生如夏花 | 浅色 | #4B394E |
背景 1 #9B8EA9背景 2 #D3CCD6背景 3 #8A618B背景 4 #A77DAB |
气泡 1 #4B394E气泡 2 #4B394E |
| 生如夏花 | 深色 | #4B394E |
背景 1 #9B8EA999背景 2 #D3CCD699背景 3 #8A618B99背景 4 #A77DAB99 |
气泡 1 #4B394E气泡 2 #4B394E |
| 象物新生 | 浅色 | #565535 |
背景 1 #BFC096背景 2 #D5D1AE背景 3 #A9A886背景 4 #9F9D6A |
气泡 1 #565535气泡 2 #565535 |
| 象物新生 | 深色 | #565535 |
背景 1 #BFC09699背景 2 #D5D1AE99背景 3 #A9A88699背景 4 #9F9D6A99 |
气泡 1 #565535气泡 2 #565535 |
| 流光溢彩 | 浅色 | #894E57 |
背景 1 #CF929E背景 2 #E3ADB9背景 3 #B27777背景 4 #BB737A |
气泡 1 #894E57气泡 2 #894E57 |
| 流光溢彩 | 深色 | #894E57 |
背景 1 #CF929E99背景 2 #E3ADB999背景 3 #B2777799背景 4 #BB737A99 |
气泡 1 #894E57气泡 2 #894E57 |
| 尘心不皂 | 浅色 | #787267 |
背景 1 #DAD8D7背景 2 #C5C5C5背景 3 #DFE0D9背景 4 #97968A |
气泡 1 #787267气泡 2 #787267 |
| 尘心不皂 | 深色 | #787267 |
背景 1 #DAD8D799背景 2 #C5C5C599背景 3 #DFE0D999背景 4 #97968A99 |
气泡 1 #787267气泡 2 #787267 |
敦煌美学
| 主题 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 红消绿冷 | 浅色 | #4C4E16 |
背景 1 #A4865B背景 2 #A07B55背景 3 #D8DFBD背景 4 #A89D8A |
气泡 1 #4C4E16气泡 2 #4C4E16 |
| 红消绿冷 | 深色 | #4C4E16 |
背景 1 #A4865B99背景 2 #A07B5599背景 3 #D8DFBD99背景 4 #A89D8A99 |
气泡 1 #4C4E16气泡 2 #4C4E16 |
| 碧落空歌 | 浅色 | #51476C |
背景 1 #73687D背景 2 #706F91背景 3 #E0C2B3背景 4 #889286 |
气泡 1 #51476C气泡 2 #51476C |
| 碧落空歌 | 深色 | #51476C |
背景 1 #73687D99背景 2 #706F9199背景 3 #E0C2B399背景 4 #88928699 |
气泡 1 #51476C气泡 2 #51476C |
| 白贲无咎 | 浅色 | #531C0B |
背景 1 #B25F47背景 2 #B16F4A背景 3 #D9BC9D背景 4 #B69584 |
气泡 1 #531C0B气泡 2 #531C0B |
| 白贲无咎 | 深色 | #531C0B |
背景 1 #B25F4799背景 2 #B16F4A99背景 3 #D9BC9D99背景 4 #B6958499 |
气泡 1 #531C0B气泡 2 #531C0B |
| 绿壁乌龙 | 浅色 | #537050 |
背景 1 #B3B4A2背景 2 #838F75背景 3 #C6A69B背景 4 #768166 |
气泡 1 #537050气泡 2 #537050 |
| 绿壁乌龙 | 深色 | #537050 |
背景 1 #B3B4A299背景 2 #838F7599背景 3 #C6A69B99背景 4 #76816699 |
气泡 1 #537050气泡 2 #537050 |
| 空即是色 | 浅色 | #32456E |
背景 1 #52678B背景 2 #6077A3背景 3 #D8C6A0背景 4 #896347 |
气泡 1 #32456E气泡 2 #32456E |
| 空即是色 | 深色 | #32456E |
背景 1 #52678B99背景 2 #6077A399背景 3 #D8C6A099背景 4 #89634799 |
气泡 1 #32456E气泡 2 #32456E |
精品尝鲜
| 主题 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 极简白 | 浅色 | #0099FF |
背景 1 #F2F2F2 |
气泡 1 #0099FF |
| 极简白 | 深色 | #0066CC |
背景 1 #1A1A1A |
气泡 1 #262626 |
| 经典蓝 | 浅色 | #0099FF |
背景 1 #EAF1FF背景 2 #FFF3FF背景 3 #E0EBFF背景 4 #D6E9FF |
气泡 1 #0099FF |
| 经典蓝 | 深色 | #0066CC |
背景 1 #1A1A1A |
气泡 1 #262626 |
| 地海蔚蓝 | 浅色 | #28C1FD |
背景 1 #D0F3FF背景 2 #D4E7FF背景 3 #FFFFFF |
气泡 1 #28C1FD气泡 2 #28C1FD |
| 地海蔚蓝 | 深色 | #187498 |
背景 1 #628D9B背景 2 #384F6D背景 3 #88B7C8 |
气泡 1 #187498气泡 2 #187498 |
| 樱语红粉 | 浅色 | #F297C2 |
背景 1 #FFDDEF背景 2 #FFDDEF背景 3 #F3FFE6 |
气泡 1 #F297C2气泡 2 #F297C2 |
| 樱语红粉 | 深色 | #915B74 |
背景 1 #866F7B背景 2 #775A69背景 3 #7A8C69 |
气泡 1 #915B74气泡 2 #915B74 |
| 妙手生春 | 浅色 | #9489CD |
背景 1 #FFDEB7背景 2 #FCADDF背景 3 #A8B6F8背景 4 #B0EBAE |
气泡 1 #9489CD气泡 2 #9489CD |
| 妙手生春 | 深色 | #8C80C8 |
背景 1 #7A7E76背景 2 #795A7D背景 3 #57648C背景 4 #5C726E |
气泡 1 #8C81C8气泡 2 #8C81C8 |
| 夏绿成荫 | 浅色 | #22A563 |
背景 1 #E5FDDD背景 2 #5FE289背景 3 #ADF2AC背景 4 #C5FBBB |
气泡 1 #22A563气泡 2 #22A563 |
| 夏绿成荫 | 深色 | #00863F |
背景 1 #7D8A7A背景 2 #3E7E52背景 3 #5E8360背景 4 #708A6B |
气泡 1 #00863F气泡 2 #00863F |
| 龙行绚烂 | 浅色 | #FF988A |
背景 1 #FFCAAC背景 2 #FFC8A1背景 3 #FFAA99背景 4 #FFEFB5 |
气泡 1 #FFB57B气泡 2 #FF988A |
| 龙行绚烂 | 深色 | #C34D3B |
背景 1 #F09B6A背景 2 #FFA15D背景 3 #FF8A6D背景 4 #F59066 |
气泡 1 #D57025气泡 2 #C34D3B |
水墨国风
| 主题 / 主色种子 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 典雅金 种子 #BB9F6D |
浅色 | #BB9F6D |
背景 1 #D9C4A1背景 2 #EDE1CF背景 3 #D9C4A1背景 4 #EDE1CF |
气泡 1 #BB9F6D气泡 2 #BB9F6D |
| 典雅金 种子 #BB9F6D |
深色 | #C4A775 |
背景 1 #6C5C40背景 2 #7F7667背景 3 #6C5C40背景 4 #7F7667 |
气泡 1 #C4A775气泡 2 #C4A775 |
| 丁香紫 种子 #7F7384 |
浅色 | #7F7384 |
背景 1 #CEC3CF背景 2 #E8E0E6背景 3 #CEC3CF背景 4 #E8E0E6 |
气泡 1 #7F7384气泡 2 #7F7384 |
| 丁香紫 种子 #7F7384 |
深色 | #B4A7B9 |
背景 1 #635C66背景 2 #7B757A背景 3 #635C66背景 4 #7B757A |
气泡 1 #B4A7B9气泡 2 #B4A7B9 |
| 芸豆青 种子 #80897A |
浅色 | #80897A |
背景 1 #C3C8BD背景 2 #E3E3DD背景 3 #C3C8BD背景 4 #E3E3DD |
气泡 1 #80897A气泡 2 #80897A |
| 芸豆青 种子 #80897A |
深色 | #A5AE9E |
背景 1 #5B6057背景 2 #767773背景 3 #5B6057背景 4 #767773 |
气泡 1 #A5AE9E气泡 2 #A5AE9E |
| 辰砂色 种子 #8A5A52 |
浅色 | #8A5A52 |
背景 1 #E6BDB6背景 2 #F4DDDA背景 3 #E6BDB6背景 4 #F4DDDA |
气泡 1 #8A5A52气泡 2 #8A5A52 |
| 辰砂色 种子 #8A5A52 |
深色 | #D79D94 |
背景 1 #775751背景 2 #857370背景 3 #775751背景 4 #857370 |
气泡 1 #D79D94气泡 2 #D79D94 |
| 天青色 种子 #93BAD1 |
浅色 | #8AB0C7 |
背景 1 #B3CAD8背景 2 #DCE4EA背景 3 #B3CAD8背景 4 #DCE4EA |
气泡 1 #8AB0C7气泡 2 #8AB0C7 |
| 天青色 种子 #93BAD1 |
深色 | #93BAD1 |
背景 1 #4C616E背景 2 #70787E背景 3 #4C616E背景 4 #70787E |
气泡 1 #93BAD1气泡 2 #93BAD1 |
神秘美学
| 主题 / 主色种子 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 心想事橙 种子 #FFB779 |
浅色 | #E09D61 |
背景 1 #FFDF92背景 2 #F4BF02背景 3 #E9DDFF背景 4 #FFFFFF |
气泡 1 #FFDCC2气泡 2 #FFDAD3 |
| 心想事橙 种子 #FFB779 |
深色 | #B16308 |
背景 1 #9473007F背景 2 #947300A5背景 3 #8267C27F背景 4 #323232 |
气泡 1 #D17C26气泡 2 #DD715C |
| 不再焦绿 种子 #CECB50 |
浅色 | #B2B037 |
背景 1 #A6F785背景 2 #8BDA6C背景 3 #FFD8E8背景 4 #FFFFFF |
气泡 1 #ECE848气泡 2 #FFDEAB |
| 不再焦绿 种子 #CECB50 |
深色 | #7D7B00 |
背景 1 #4B85357F背景 2 #4B8535A5背景 3 #B3588B7F背景 4 #323232 |
气泡 1 #97951B气泡 2 #BF8601 |
| 蓝以为情 种子 #AEC8FA |
浅色 | #92ACDC |
背景 1 #E5DEFF背景 2 #C9BFFF背景 3 #9EF88B背景 4 #FFFFFF |
气泡 1 #D6E3FF气泡 2 #C2E8FF |
| 蓝以为情 种子 #AEC8FA |
深色 | #4277C6 |
背景 1 #786AC67F背景 2 #786AC6A5背景 3 #44853A7F背景 4 #323232 |
气泡 1 #5F91E2气泡 2 #009CCE |
| 紫属于你 种子 #BF8AF8 |
浅色 | #BF8AF8 |
背景 1 #FFD7F0背景 2 #FFACE8背景 3 #00FDEE背景 4 #FFFFFF |
气泡 1 #EFDBFF气泡 2 #DFE0FF |
| 紫属于你 种子 #BF8AF8 |
深色 | #8E64BC |
背景 1 #AC5A9A7F背景 2 #AC5A9AA5背景 3 #00867E7F背景 4 #323232 |
气泡 1 #A97DD8气泡 2 #7D8AE4 |
| 青青松松 种子 #6DDF9C |
浅色 | #4CC080 |
背景 1 #00FDED背景 2 #00DECF背景 3 #FFDBCF背景 4 #FFFFFF |
气泡 1 #73FCAE气泡 2 #C2F26D |
| 青青松松 种子 #6DDF9C |
深色 | #138852 |
背景 1 #00867D7F背景 2 #00867DA5背景 3 #BC5B367F背景 4 #323232 |
气泡 1 #3AA36A气泡 2 #799C3A |
缤纷时刻
| 主题 / 主色种子 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 香芋啵啵 种子 #B389F8 |
浅色 | #B389F8 |
背景 1 #D5BAFF背景 2 #FFB1C2背景 3 #FFB870 |
气泡 1 #A57BE9气泡 2 #EF55B3 |
| 香芋啵啵 种子 #B389F8 |
深色 | #8A61CD |
背景 1 #A57BE9CC背景 2 #E2698BCC背景 3 #D27C00CC |
气泡 1 #7047B2气泡 2 #AF197E |
| 海盐粉荔 种子 #4095E1 |
浅色 | #4095E1 |
背景 1 #9CCAFF背景 2 #DFB7FF背景 3 #FFB2B9 |
气泡 1 #4095E1气泡 2 #9A7AFF |
| 海盐粉荔 种子 #4095E1 |
深色 | #177BC5 |
背景 1 #4095E1CC背景 2 #AE7BD9CC背景 3 #DF6D7CCC |
气泡 1 #0062A1气泡 2 #683DD9 |
| 橘子汽水 种子 #E3862F |
浅色 | #E3862F |
背景 1 #FFB77E背景 2 #FFB0CB背景 3 #CEBDFF |
气泡 1 #D47A23气泡 2 #F65A73 |
| 橘子汽水 种子 #E3862F |
深色 | #B56203 |
背景 1 #D47A23CC背景 2 #D96E98CC背景 3 #9981E4CC |
气泡 1 #914D00气泡 2 #B22644 |
| 绿豆冰沙 种子 #97D899 |
浅色 | #6BBD73 |
背景 1 #86D98C背景 2 #EFC141背景 3 #FFB4A6 |
气泡 1 #51A15B气泡 2 #A09200 |
| 绿豆冰沙 种子 #97D899 |
深色 | #368744 |
背景 1 #51A15BCC背景 2 #B48B00CC背景 3 #DD715ECC |
气泡 1 #176D2D气泡 2 #695F00 |
| 草莓大福 种子 #F1AFF2 |
浅色 | #DD90E0 |
背景 1 #FAABFD背景 2 #FFB4A6背景 3 #F0C041 |
气泡 1 #BF76C4气泡 2 #F45D71 |
| 草莓大福 种子 #F1AFF2 |
深色 | #A35DA8 |
背景 1 #BF76C4CC背景 2 #DD715ECC背景 3 #B48B00CC |
气泡 1 #87448E气泡 2 #B02A42 |
幻彩机核
| 主题 / 主色种子 | 模式 | 主色 | 聊天背景色 | 我的气泡色 |
|---|---|---|---|---|
| 霓虹灯光 种子 #D2F257 |
浅色 | #9AB71C |
背景 1 #CA51CD背景 2 #5E6AE7背景 3 #006492 |
气泡 1 #D2F257气泡 2 #D2F257 |
| 霓虹灯光 种子 #D2F257 |
深色 | #D2F257 |
背景 1 #CA51CD背景 2 #5E6AE7背景 3 #006492 |
气泡 1 #D2F257气泡 2 #D2F257 |
| 粉墨都市 种子 #89FBFD |
浅色 | #43BCBE |
背景 1 #CB6927背景 2 #B15C7C背景 3 #80449E |
气泡 1 #89FBFD气泡 2 #89FBFD |
| 粉墨都市 种子 #89FBFD |
深色 | #89FBFD |
背景 1 #CB6927背景 2 #B15C7C背景 3 #80449E |
气泡 1 #89FBFD气泡 2 #89FBFD |
| 废土朋克 种子 #EC83DE |
浅色 | #EC83DE |
背景 1 #009487背景 2 #488619背景 3 #705D00 |
气泡 1 #EF86E1气泡 2 #EF86E1 |
| 废土朋克 种子 #EC83DE |
深色 | #EF86E1 |
背景 1 #009487背景 2 #488619背景 3 #705D00 |
气泡 1 #EF86E1气泡 2 #EF86E1 |
| 魔幻丛林 种子 #EE907D |
浅色 | #EE907D |
背景 1 #008CC6背景 2 #00857E背景 3 #116D2E |
气泡 1 #F1927F气泡 2 #F1927F |
| 魔幻丛林 种子 #EE907D |
深色 | #F1927F |
背景 1 #008CC6背景 2 #00857E背景 3 #116D2E |
气泡 1 #F1927F气泡 2 #F1927F |
| 与光同尘 种子 #9DA5F8 |
浅色 | #9DA5F8 |
背景 1 #639126背景 2 #9C6F00背景 3 #A0410F |
气泡 1 #9DA5F8气泡 2 #9DA5F8 |
| 与光同尘 种子 #9DA5F8 |
深色 | #9DA5F8 |
背景 1 #639126背景 2 #9C6F00背景 3 #A0410F |
气泡 1 #9DA5F8气泡 2 #9DA5F8 |
配色数据与复用
这份快照包含两段内置 JSON 和两份配置缓存的全部原始数据，同时提供适合复用的 JSON 与 CSS。它的覆盖范围是 QQ 9.9.36-53644 的这些配置，不包含所有在线主题和远程纹理图片。
原始配置和算法派生结果分别保存；派生结果覆盖 20 个模板预设，共 1810 对浅色／深色 Token。CSV 将每个模式和 Token 放在独立一行，带 HEX、Alpha、RGB 通道，方便 Figma 导入脚本或 AI Agent 使用。
| 资源 | 用途 |
|---|---|
| 配色表 Markdown | 与正文一致的色块和 HEX 表格 |
| 模板派生 JSON | 20 个预设的根色、三条色阶、明暗 Token 及缺失引用 |
| Token CSV | 3620 行明暗色值，适合转换成 Figma Variables |
| 模板派生 CSS | 按模板和模式生成界面 Token 变量 |
| 派生算法说明 | 公式、角色绑定和验证依据 |
| 任意基础色生成脚本 | 本地输出自定义主题 JSON |
| 原生计算对照样本 | 100 组输入的原生派生色及 Token 结果 |
| 完整规范化 JSON | 颜色对象、主题分类、明暗模式、Token、引用和来源 |
| CSS 变量 | 直接接入固定色值和默认 Token |
| 原始主题配置 | 核对配色名称、数组和纹理字段 |
| 原始 Token 配置 | 核对整数和动态引用 |
| 缓存 1、缓存 2 | 比对本机主题配置快照 |
| 来源清单 | 版本、字节偏移、长度、SHA-256 |
| 文件索引 | 获取全部配套文件的路径 |
下载 JSON 后，静态配色在 palettes[].modes.light / dark 下提供 primary、background、bubble；模板主色在 palettes[].primary 下。每个颜色对象的 css 和 hex8 字段保留透明度，适合直接用于样式。
CSS 文件中的配色标识是 theme-<id> 或 template-<templateId>-<colorId>。例如选择「缥碧沧浪」的浅色模式：
<html data-qq-palette="theme-5001" data-qq-mode="light">
<head>
<link rel="stylesheet" href="qq-palettes.css">
</head>
</html>页面样式可以读取 --qq-primary-1、--qq-background-1、--qq-bubble-1 等变量；编号对应原始数组顺序。默认界面 Token 使用 --qq-<名称>，字段中的下划线转成连字符。
这里的 Token 指界面角色对应的样式值，例如文字、边框和填充色。配色主色决定风格，Token 决定具体元素怎样使用这些颜色。
default_theme 有 96 个 Token，每项是按浅色、深色排列的两个整数。colorful_theme 有 91 个 Token 绑定，值既可能是固定整数，也可能是 secondary_95、neutral_10、primary_root、root_e 等字符串引用。
原始快照保留 { "reference": "secondary_95" }，便于核对配置。另附的 qq-derived-palettes.json 将这些引用解析成实际颜色：roots 保存模板根色，toneColors 保存 primary / secondary / neutral 色阶，modes.light.tokens 和 modes.dark.tokens 保存界面角色。每个色值同时提供 ARGB、HEX、Alpha；unresolvedTokens 保留原生算法未生成的引用。
CSS 中，qq-palettes.css 提供原始固定色值和默认 Token，qq-derived-palettes.css 提供 20 个模板的运行时 Token。使用相同的 data-qq-palette 与 data-qq-mode 属性选择模板即可。
换一个基础色，重新生成整套颜色
在生成器中选颜色和系列，就能对照两种模式，并下载当前结果。独立生成器使用相同的公开算法模块。
将源码包中的 copy/ 及其 vendor/、data/raw/theme-tokens.json 一起保存，本地也能生成：
node copy/generate-qq-palette.mjs --color '#B389F8' --template 1001 --out palette.json模板编号为 1001 缤纷时刻、1002 幻彩机核、1003 水墨国风、1004 神秘美学。生成器直接接受任意六位 HEX；--help 查看参数。HCT 依赖已随源码包附带，终端生成无须安装 npm 包。
四个模板系列各有一个「随心调」入口，原始主色为空数组，单独保存在 customTemplates 中。这四个入口需要用户自己选择颜色。
背景色块保留配置顺序，纹理地址和合成字段保留在 JSON 中。渐变位置、角度和纹理合成规则尚未解析；跨项目复用时，还需要按目标界面检查文字对比度和透明背景的合成结果。
配色数据是怎样解析出来的
QQ 的配色在截图里已经和背景合成，直接取色会丢掉原始透明度。读取安装文件中的配置，可以同时保留色值、明暗模式和数据来源。以下过程基于上面这份 Windows 版本的安装资源与两份本地配置缓存。
从 ASAR 找到原生模块中的 JSON
Electron 应用常用 ASAR 存放资源。ASAR 的官方格式说明把它描述为带 JSON 索引的归档：索引记录文件名、大小和偏移，文件内容排列在后面。读出目录和文件，解决的是归档这一层。
QQ 的安装目录下，versions/config.json 指向当前版本。对应 resources/app/package.json 里有这样的字段：
{
"main": "./application.asar/app_launcher/index.js",
"isByteCodeShell": true
}这份 application.asar 的索引可以解析，里面有 1452 个文件条目。但抽出的脚本和样式内容不是普通 UTF-8 文本，无法靠搜索 JavaScript 源码找到颜色数组。isByteCodeShell 也提示这里存在字节码壳；仅凭这些现象还不足以确定全部文件的处理算法。
配色功能需要把配置交给界面使用，所以继续检查应用目录中的原生模块。wrapper.node 虽然是二进制文件，其中仍保存了两段以 NUL（零字节）结束的 UTF-8 JSON 常量。找到前缀、取到结束标记，再 JSON.parse 就能读到结构。
| 内容 | 搜索前缀 | 字节偏移 | 长度 |
|---|---|---|---|
| 主题配置 | {"systemThemeInfoList": |
67920864 | 21688 字节 |
| Token 配置 | {"default_theme": |
67942560 | 7727 字节 |
偏移属于这份 117866024 字节的模块，换版本后会变化。提取脚本每次搜索前缀，并把模块 SHA-256、JSON 偏移、长度和哈希写进来源清单，便于复核。读取常量的关键步骤只有这些：
const offset = nativeData.indexOf('{"systemThemeInfoList":');
const end = nativeData.indexOf(0, offset);
const bytes = nativeData.subarray(offset, end);
const config = JSON.parse(bytes.toString('utf8'));完整脚本还会检查前缀和结束标记是否存在、验证结构，并保存原始字节。这条路径需要读取本机安装文件，提取过程没有修改 QQ。
把 ARGB 转换成 CSS
原始配置中的颜色是十进制整数。例如经典蓝的 4278229503，写成十六进制是 0xFF0099FF。
ARGB 用四个字节分别保存 Alpha、红、绿、蓝，每个字节取值 0–255。Alpha 为 0 表示完全透明，255 表示完全不透明。QQ 的顺序是
AARRGGBB；CSS 八位 HEX 的顺序是RRGGBBAA。
这个蓝色完全不透明，转成 #0099FF 很直观。但另一个实际色值 2578568648 对应 0x99B1D5C8，Alpha 是 0x99 / 255，也就是 0.6（60% 不透明度）。正确 CSS 是 #B1D5C899，或 rgba(177, 213, 200, 0.6)。直接截成六位 HEX 会丢掉透明度；把原始八位十六进制直接写进 CSS，则连 RGB 通道都会错位。
可以在演示里切换样本，或输入自己的整数，看四个字节怎样重新排列。独立演示页可直接打开。
截图来自上面的色值演示。棋盘格让透明度更容易看清，三块色样分别对应正确转换、只取 RGB、把 ARGB 直接交给 CSS。
脚本拆分通道时使用无符号右移，避免最高位为 1 的颜色被当成负数：
const alphaByte = value >>> 24;
const red = (value >>> 16) & 255;
const green = (value >>> 8) & 255;
const blue = value & 255;每个颜色对象同时保留 argb、argbHex、hex、hex8、rgba、channels 和 css。用于样式时优先取 css 或 hex8；argb 与 argbHex 留给追溯和重新转换。
从一个基础色生成模板配色
在 wrapper.node 中继续追踪 GetTokenMapFromThemeInfo 的字符串引用，能找到模板派生函数和 Token 解析分支。派生函数先取得主色，转换成 HCT，再按模板编号选择规则；生成的根色和色阶最后由 colorful_theme 绑定到界面角色。
基础色先转换成 HCT
一套界面配色要分别控制颜色的倾向、鲜艳程度和明暗层级。RGB 的三个通道适合保存和显示颜色，但「把绿色通道减一点」很难直接表达「保留紫色倾向，让背景更浅、更柔和」这样的设计要求。
HSL 把颜色改写成色相、饱和度和亮度，也还没有解决感知明度的问题。例如下面两个纯色，HSL 的 L 都是 50%，转换成 CIE L* 后却差得很远。数值由配套的颜色模块计算：
| 颜色 | HEX | HSL | CIE L* / HCT T |
|---|---|---|---|
| 纯蓝 | #0000FF |
240° / 100% / 50% |
32.303 |
| 纯黄 | #FFFF00 |
60° / 100% / 50% |
97.138 |
如果用同一组 HSL 亮度直接生成蓝色、黄色主题，组件的明暗层级会随着色相改变。HCT 将色相 H、彩度 C 与感知明度 T 分开处理，方便用相同的明度规则生成不同主题。H、C 来自 CAM16 色貌模型，T 使用 CIE L*；H 是 0–360° 的角度，T 从 0 的黑到 100 的白，C 表示颜色偏离中性色的程度，它的可用上限随 H、T 改变。HCT 的实现与定义说明了这三个量的组合方式。
RGB 到感知明度之间还隔着一次线性化。HEX 里的 sRGB 通道经过非线性编码，字节值 128 并不代表白色一半的光强。把一个通道除以 255 得到 u，先按 sRGB 传递函数还原为线性通道值，再计算相对亮度 Y。以 0–1 为取值范围，公式是：
linear(u) = u / 12.92 当 u ≤ 0.04045
= ((u + 0.055) / 1.055) ^ 2.4 其他情况
Y = 0.2126 × Rlinear + 0.7152 × Glinear + 0.0722 × Blinear绿色与蓝色对 Y 的权重不同，因此三个通道的数值平均不能表示明度。sRGB 的解码方式见 CSS Color 4 的颜色转换定义。T 再由 Y 计算成 CIE L*，使用分段函数近似感知明度：
T = (24389 / 27) × Y 当 Y ≤ 216 / 24389
= 116 × Y^(1/3) − 16 其他情况H、C 则使用 RGB 转成的 XYZ 三刺激值继续计算。XYZ 是颜色测量的一种表示，Y 就是其中的亮度分量。CAM16 再根据参考白、背景和适应亮度等观察条件处理这些量，得到色相与彩度。CAM16 的实现包含这条转换链。本次复现使用库的默认观察条件，没有根据真实屏幕亮度或 QQ 窗口背景动态调整它们。
记基础色转换结果为 (h, c, t)，QQ 的主题规则先定义两个明度范围：
const low = Math.max(10, Math.min(70, t));
const high = Math.max(70, Math.min(95, t));
const F = (h, c, t) => Hct.from(h, c, t).toInt();例如种子明度是 30，low 为 30，high 为 70；种子明度是 90，low 为 70，high 为 90。它们把任意输入约束到两个范围，供不同界面角色选择。具体上限、下限属于 QQ 的主题规则，HCT 本身不会自动规定这些数值。
HCT 转回 RGB 时怎样处理色域
F 返回可显示的不透明 ARGB。它要同时寻找接近目标 H、C、T 的 sRGB 颜色，但屏幕能表示的 RGB 组合有限。
色域是一个颜色空间能够表示的颜色范围。同一个色相在不同明度下，可达到的最大彩度不同；接近白色或黑色时，许多鲜艳颜色无法同时满足指定的明度。
配套模块的 Hct.from() 会调用 HctSolver.solveToInt()。对普通有彩色目标，求解器先把 T 还原为目标 Y，再固定 H、C，迭代调整 CAM16 的明度参数 J，让反算的 RGB 具有目标 Y。J 与 HCT 的 T 是不同的量，因此这一步需要求解。本次附带版本使用近似牛顿迭代，最多进行 5 轮。
如果找不到范围合法的 RGB，求解器沿固定 Y 的平面与 RGB 色域边界的交线二分，寻找接近目标色相的可显示颜色。最后进行 sRGB 编码和 8 位量化。靠近黑、白或彩度接近零的输入有单独的灰阶分支。这些路径可以对照 HCT 求解器的实现。
以「香芋啵啵」的色相 304.365°、目标彩度 57.019 为例，只改变目标 T，求解器的实际结果如下：
| 目标 T | 求解后的 HEX | 实际 H | 实际 C | 实际 T |
|---|---|---|---|---|
| 20 | #400E81 |
304.011° | 57.102 | 20.000 |
| 50 | #8A61CD |
304.309° | 57.146 | 49.930 |
| 80 | #D5BAFF |
304.338° | 37.882 | 79.888 |
| 95 | #F7EDFF |
303.553° | 11.670 | 94.976 |
目标 T 为 80、95 时，实际彩度分别降到了 37.882、11.670，才能留在 sRGB 色域中；色相和明度也会有量化误差。因此根色规则里的三元组表示目标参数，读者拿最终 HEX 反算 HCT 时，不应要求三个参数逐字相等。派生时每个目标都从同一份原始 (h, c, t) 独立求解，避免把上一层已经降低的彩度继续传给下一层。
颜色与数值使用正文已有求解样本。虚线是目标彩度，柱形是最终颜色反算的实际彩度，不表示求解迭代过程。
三条色阶
| 系列 | 编号 | 主色阶彩度 cp |
|---|---|---|
| 缤纷时刻 | 1001 | max(c, 50) |
| 幻彩机核 | 1002 | c |
| 水墨国风 | 1003 | min(c, 30) |
| 神秘美学 | 1004 | c |
三条色阶都保持基础色色相 h：primary 使用 cp，secondary 使用 cp/3，neutral 使用 cp/6。primary_root、secondary_root、neutral_root 的明度都是 low；其余明度取固定列表：
100, 99, 98, 95, 90, 80, 70, 60, 50, 40, 35, 30, 25, 20, 15, 10, 5, 0例如 secondary_95 = F(h, cp / 3, 95)。这三条色阶各包含 19 个颜色，并不等于 Material 的标准 CorePalette / Scheme。复用实现只调用 HCT 求解器，不套用标准主题角色和新版 TonalPalette 的额外调整。
降低 secondary、neutral 的彩度，会让辅助文字、边框和表面色保留一点主题色倾向，同时减弱鲜艳程度。再按角色选不同明度，就能用同一种色相形成清楚的层级。这是这组公式的效果；cp/3、cp/6 和固定明度列表是 QQ 的具体选择，其他产品可以采用不同的比例与层级。
四个系列的根色规则
下表每个三元组表示 F 的参数。s 只用于缤纷时刻：基础色色相 h 在 150°–330°（含端点）时为 +1，其他情况为 −1；偏移方向由基础色判断一次。
| 根色 | 缤纷时刻 1001 | 幻彩机核 1002 | 水墨国风 1003 | 神秘美学 1004 |
|---|---|---|---|---|
| root_a | (h, cp, 60) |
(h, c, low) |
(h, cp, low) |
(h, 60, 80) |
| root_b | (h, cp, 50) |
(h, c, high) |
(h, cp, high) |
(h, 50, 50) |
| root_c | (h, cp, 60) |
(h, c, high) |
(h, cp, low) |
(h, 60, 90) |
| root_d | (h+s×45, cp+20, 60) |
(h, c, high) |
(h, cp, low) |
(h−30, 60, 90) |
| root_e | (h, cp, 80) |
(h+210, c+10, 55) |
(h, 2×cp/3, 80) |
(h+30, 60, 90) |
| root_f | (h+s×60, cp, 80) |
(h+160, c, 50) |
(h, cp/3, 90) |
(h+30, 60, 80) |
| root_g | (h+s×120, cp, 80) |
(h+120, c+10, 40) |
(h, 2×cp/3, 80) |
(h−120, 60, 90) |
| root_h | 未生成 | 未生成 | (h, cp/3, 90) |
固定 #FFFFFF |
| root_i | (h, cp, 40) |
(h, c, high) |
(h, cp, high) |
(h, 50, 60) |
| root_j | (h+s×45, cp+20, 40) |
(h, c, high) |
(h, cp, high) |
(h−30, 50, 60) |
| root_k | (h, cp, 60)，Alpha=204 |
同 root_e | (h, 2×cp/3, 40) |
(h+30, 50, 50)，Alpha=127 |
| root_l | (h+s×60, cp, 60)，Alpha=204 |
同 root_f | (h, cp/3, 50) |
(h+30, 50, 50)，Alpha=165 |
| root_m | (h+s×120, cp, 60)，Alpha=204 |
同 root_g | (h, 2×cp/3, 40) |
(h−120, 50, 50)，Alpha=127 |
| root_n | 未生成 | 未生成 | (h, cp/3, 50) |
固定 #323232 |
未标 Alpha 的根色完全不透明。204/255 是 80% 不透明度；127/255 约 49.8039%，165/255 约 64.7059%。保留字节原值可以避免把 7F 或 A5 误写成四舍五入后的透明度。
把根色和色阶绑定到界面角色
原始 colorful_theme 保存了 91 个 Token 的浅色／深色绑定。先把字符串引用查成颜色，整数值保持不变。例如：
| Token | 浅色引用 | 深色引用 |
|---|---|---|
| brand_standard | primary_root | root_b |
| text_primary | secondary_10 | secondary_90 |
| bg_aio_1 / 2 / 3 / 4 | root_e / f / g / h | root_k / l / m / n |
| bubble_host_1 / 2 | root_c / d | root_i / j |
on_brand* 和 on_bubble* 是额外分支：它们表示主色或气泡上的前景色，按背景明度选择原始绑定的第一项（偏深）或第二项（偏浅）。
| 前景角色 | 浅色模式选择第一项的条件 | 深色模式选择第一项的条件 |
|---|---|---|
| on_brand* | 基础色 t > 60 |
基础色 t > 60 |
| on_bubble*，缤纷时刻 | 恒为真 | 恒为假 |
| on_bubble*，幻彩机核 | high > 60 |
high > 60 |
| on_bubble*，水墨国风 | low > 60 |
high > 60 |
| on_bubble*，神秘美学 | 恒为真 | 恒为真 |
严格大于 60，等于 60 时选第二项。缤纷时刻与幻彩机核缺少 root_h / root_n，原生 Token 解析函数遇到 bg_aio_4 的缺失引用会跳过整个 Token。复用实现把它保存在 unresolvedTokens；每套这两个系列的预设得到 90 个 Token，其余两个系列得到 91 个。没有补造第四个聊天背景色，也没有推断界面最终使用的回退色。
这里只选取三个界面角色。root 与色阶都从原始种子参数独立求解，避免沿用上一次求解后已经降低的彩度。
用一个主题串起整条计算链
「香芋啵啵」的种子 #B389F8 转成 HCT，得到 h ≈ 304.365°、c ≈ 57.019、t ≈ 65.162。它属于缤纷时刻，所以 cp = max(c, 50) ≈ 57.019，low 为 65.162，high 为 70；h 落在 150°–330° 内，色相偏移方向 s 为 +1。
三条色阶使用相同的 h，目标彩度分别是 57.019、19.006、9.503。根色按缤纷时刻的规则另行生成，再与色阶一起交给 Token 映射：
| 界面角色 | 浅色模式的计算路径 | 浅色色值 | 深色模式的计算路径 | 深色色值 |
|---|---|---|---|---|
| 主色 | primary_root = F(h, cp, low) |
#B389F8 |
root_b = F(h, cp, 50) |
#8A61CD |
| 我的气泡 1 | root_c = F(h, cp, 60) |
#A57BE9 |
root_i = F(h, cp, 40) |
#7047B2 |
| 我的气泡 2 | root_d = F(h+45, cp+20, 60) |
#EF55B3 |
root_j = F(h+45, cp+20, 40) |
#AF197E |
| 聊天背景 1 | root_e = F(h, cp, 80) |
#D5BAFF |
root_k = F(h, cp, 60)，Alpha=204 |
#A57BE9CC |
| 主要文字 | secondary_10 = F(h, cp/3, 10) |
#20172E |
secondary_90 = F(h, cp/3, 90) |
#EBDDFC |
同一个主题的主色和气泡色也会不同，因为它们采用不同的明度目标；深色模式又重新选择一组角色颜色。知道角色的用途后，才知道该从色阶中取哪一层。primary_50 这样的名字描述颜色来源，brand_standard、text_primary 这样的名字描述界面用途，二者通过映射连接起来。
把这套思路用于其他 App
一套自动主题至少要有基础色、配色规则和角色映射。基础色提供色相、彩度、明度的起点；规则决定保留多少彩度、哪些角色旋转色相、各角色使用什么明度；映射把计算出的颜色安排到背景、文字、按钮、边框等组件用途上。
以一个阅读 App 为例，先定义页面背景、正文文字、次要文字、链接、按钮背景和按钮文字这几种角色。长时间占据屏幕的页面背景可以从低彩度色阶取值，链接与主按钮从主色阶取值；正文与背景拉开明度，再分别为浅色、深色模式安排映射。这样换一个基础色时，组件可以继续使用相同的角色名。QQ 的 bg_aio、bubble_host 描述聊天场景，阅读 App 则需要自己的角色和明度规则。
从 QQ 的规则输出可以分析出几种配色手法：水墨国风限制主色阶彩度，并进一步降低大面积背景的彩度；缤纷时刻设定彩度下限、旋转部分色相，让气泡与背景出现多种颜色；神秘美学的多组根色使用固定彩度，使这些根色的风格较少受种子彩度影响。这里分析的是规则产生的效果，原始设计稿和各常量的选择过程没有包含在安装配置中。
检查前景和背景的实际对比
生成了颜色，还要检查文字与它背后颜色的组合。QQ 的前景分支只是按照固定条件选深色或浅色，没有在这段解析逻辑中逐个计算对比度，也没有对不达标的组合做搜索修正。
对两个最终、不透明的 sRGB 颜色，沿用线性化得到的相对亮度 Y，按下式计算对比度：
contrast = (max(Yforeground, Ybackground) + 0.05)
/ (min(Yforeground, Ybackground) + 0.05)这里 Y 是 0–1 的相对亮度，不是 0–100 的 HCT T。WCAG 2.2 的文字对比要求为普通文字规定至少 4.5:1，大号文字至少 3:1，并另列标识等例外。用于自己的产品时，可以在主题生成后逐对检查正文／页面背景、按钮文字／按钮背景、链接／页面背景；不满足目标时，调整对应角色的明度并重新求解，而不是只根据颜色名称判断是否清楚。
带 Alpha 的颜色还依赖下面的背景；渐变和纹理则会让文字背后的颜色随位置变化。应先按目标渲染环境取得合成后的背景，再测量文字对比。换用 HCT 能让明度控制更方便，但最终可读性仍由前景、背景和合成方式共同决定。
检查基础色变化的边界
纯黑、纯白、灰色、鲜艳的蓝黄绿都值得单独检查。中性色的色相信息很弱，设置彩度下限后可能出现输入中原本不明显的色彩倾向；鲜艳色容易遇到色域压缩；极亮、极暗输入会触发 low / high 的限制。这些边界会改变主色与种子的关系。
此外，阈值分支会造成跳变。例如缤纷时刻的偏移方向在 h 越过 150° 或 330° 时切换，on_brand* 的前景色在 t 越过 60 时切换。如果产品支持连续拖动颜色选择器，需要检查这些边界两侧的结果。可以按自己的设计目标采用连续插值、调整阈值或重新选择前景，但这些变化属于新的配色规则。
复用到 Figma 时，可以把主色阶、辅助色阶、中性色阶存成基础颜色变量，再建立引用它们的语义变量，并为语义变量配置浅色、深色模式；变量引用与模式可以承载这两层关系。交给 Agent 时，同时提供基础色、模板规则、角色映射和实际 HEX，才能让它区分「颜色怎样算出」与「颜色用在哪里」。
验证依据
安装模块 SHA-256 为 0d8b94448f4dafe7337b88d6a568b004224c37fcbe2bd1142c1af7624fbd534c。原生模板派生函数 RVA 是 0x581976，Token 解析函数是 0x57E7BA，明度列表生成函数是 0x577D2F，HCT 转换入口分别是 0x63E1F4 和 0x63E064。
使用 Unicorn 对该模块的 x86-64 指令做隔离仿真：输入查找、C++ 容器和字符串读写用适配函数替代，pow / fmod 使用标准数学函数，栈保护检查跳过；颜色运算、模板分支和 Token 选择分支执行原始指令，没有启动 QQ 或改动安装文件。
验证输入包括 20 个预设，以及黑、白、灰、RGB 纯色、额外基础色和 12 个固定随机色在四种模板中的结果，共 100 组。JavaScript 实现与原生仿真的 7000 个派生色、18100 个 Token 色值逐项整数相等。对照样本、模块哈希与函数入口保存在配套数据中。这个核对证明的是这些颜色函数和分支的输出，不包含纹理、渐变布局或 QQ 最终界面合成。
完整复用模块可在源码工作区查看：
用本地缓存交叉核对
Windows QQ 还在当前用户文档目录的 Tencent Files/nt_qq/global/nt_data/Skin 中保存主题配置。本机找到两份有效 JSON，修改时间分别是 2026 年 3 月和 1 月。
两份缓存中重复出现的命名配色，与内置配置一致。它们合计包含 27 个固定条目，故宫和敦煌系列的另外 10 个条目只在内置配置中出现。这里的 presentInCache 只说明某条目出现在配置缓存里，不能据此判断当前界面是否展示、账号是否可用，或在线目录还有哪些主题。
缓存也不该一股脑覆盖内置配置。旧缓存中，系统主题 0 / 1 的浅色背景只有 #F2F2F2；内置配置和较新的缓存保存了四个背景色。规范化数据用 systemThemes 保留内置值，用 cachedSystemThemes 分来源保留缓存值，原始两份 JSON 也一起附上。
在自己的 QQ 上重新提取
想提取自己安装的版本，下载独立脚本，安装 Node.js，在脚本所在目录运行：
node .\extract-qq-palettes.mjs默认安装路径是 C:/Program Files/Tencent/QQNT，脚本从 versions/config.json 读取当前版本，再检查 wrapper.node 和 Skin 主题配置目录。结果写入脚本所在目录，同名导出文件会被覆盖。安装位置不同可传 --qq-root，文档目录不同可传 --skin-cache；--app 可直接指定某个版本的 resources/app，--out 指定输出目录。
node .\extract-qq-palettes.mjs --qq-root 'D:\Apps\QQNT' --out '.\export'重新提取依赖该版本仍保存相同形态的 JSON 常量。若前缀或结构改变，脚本会报告缺失或解析错误，需要重新检查资源；已有偏移不能跨版本硬用。
把数据交给 Coding Agent 接入项目时，可以用这个入口：
工具包根路径：/files/qq-super-palette-extraction/kits/qq-palette-extractor/
先读 README.md、MANIFEST.json、FILES.json，再按索引读取源码。
现成主题读取 data/qq-palettes.json 与 data/qq-derived-palettes.json，保留透明度与来源。
自定义主题参考 data/qq-derivation-algorithm.md，迁移 copy/ 中的派生模块及 vendor/。
分别保留基础色阶与界面角色，检查最终前景／背景对比和阈值边界。原始 JSON 已做字节与 SHA-256 比对，规范化颜色也逐项转换回原整数核对。更新版本时，先检查来源清单和原始配置，再复用转换后的色值；主题的在线可用范围仍需以客户端实际展示为准。