杂记 › 技术笔记 › 取色器只收六位数:三位短写摘出能算、页面永远走不到,全空间恒等率 10.5813%

取色器只收六位数:三位短写摘出能算、页面永远走不到,全空间恒等率 10.5813%

取色页的HEX门只认六位十六进制:三位短写摘出可算、页面全扫33554432条命中0;fromRgb的parseInt无0–255夹取,300撑成超长HEX又被自己的门拒回,Math.round令往返恒等率仅10.5813%。

解析门与它的六处出口

本页只有六个出口:c-hex、c-rgb、c-hsl、c-css 四个输出格,加上原生取色控件的 value 与预览底色,取色控件实测 1 个、默认值直接写在 markup 里。模板 5039 字节 / 4981 码元 / 115 行 CRLF、无 BOM,1 个脚本段 2105 字节、9 个具名函数、fetch/XHR/localStorage/axios 命中全 0;末句 updateAll('#39FF14') 让首屏自动算一次。

HEX 框的门逐字 /^#?[0-9a-fA-F]{6}$/:带锚点、先 trim、只认六位十六进制。七条非法输入 "#f0a"、"12345"、"1234567"、"gggggg"、"#1234 56"、空串、"#FFF" 正则全 false,六处保持旧值——静默、零提示、四格仍是上一次成功的结果。

三位短写:摘出可算、页面不可达

hexToRgb 里 if (hex.length===3) hex.split('').map(c=>c+c) 那条补位分支:把函数逐字摘出喂 "f0a",翻倍成 "ff00aa" 得 [255,0,170],值正确;对照不翻倍直接 parseInt("f0a",16) 得 3850 折出 [0,15,10]。但这条分支在本页任何输入下都进不去:门放行域整个扫一遍,16777216 个色值 × 有#无# 共 33,554,432 条逐条喂 fromHex,length===6 命中 33,554,432 次、length===3 命中 0 次,耗时 115.334 秒。

喂法输入结果
摘出直喂"f0a"[255,0,170](翻倍 ff00aa)
页面 fromHex"#f0a"、"#FFF"正则 false,六处旧值
门放行域全扫33554432 条length===3 命中 0 次
同一串 "f0a",两条路各自走到哪 hexToRgb 摘出直喂 翻倍得 [255,0,170] 页面 fromHex 的门 正则 false,六处旧值 门放行域全扫 33554432 条 length===3 命中 0 次 三位补位为死分支

图 1:三位短写的两条路与全扫结论

无夹取:超长 HEX 与含负号的串

fromRgb 的正则不锚定也不 trim:小数、负号、空格错位、全角括号、缺右括号、第四参、rgba/hsla 逐条拒;而 "xrgb(1,2,3)y" 裹垃圾的串照收。parseInt 没有 0–255 夹取,256 转 "100"、300 转 "12c"、999 转 "3e7"、1000 转 "3e8" 都是 3 码元段,padStart(2,'0') 只补不截,拼出 8–10 码元超长 HEX 直接上屏——rgb(1000,1000,1000) → "#3E83E83E8";这批串喂回 fromHex 全 false,页面不收自己刚写出的 HEX。

fromHsl 的 %? 可选让 "hsl(110,100%,54%)" 与 "hsl(110,100,54)" 两写法逐字同结果;同样无夹取:hsl(400,150%,150%) 出 [191,319,574] → "#BF13F23E",hsl(110,200%,20%) 出负通道 [-17,153,-51] → 带减号的 "#-1199-33" 明晃晃写进 c-hex 与 c-css。

取整、恒等率与五处写出

rgbToHsl 三处 Math.round 在默认色 rgb(57,255,20) 上给 [111,100,54];未取整中间量 h*360=110.5532、l*100=53.92156862745098。intro 速查表 hsl(110,100,54) 逐格差 +1,0,0,喂回本页 HSL 框得 "#3CFF14" / rgb(60, 255, 20);HSL 框 placeholder 的 109 差 +2,0,0。

HEX→HSL→HEX 全空间 16,777,216 条(hex = n.toString(16).padStart(6,'0'))恒等 1,775,241 条 = 10.5813%,非恒等 15,001,975 条里最大单通道差 1 档 9,123,157 条、恰好一通道差 1 的 4,024,886 条;反向 HSL→HEX→HSL 取 h 0–359 × s/l 步长 2 共 936,360 条,恒等 444,318 条 = 47.4516%,l 恒同 936,360、h 同 562,431、s 同 635,760。

updateAll 的大写化只发生在 c-hex 与 c-css 两处(toUpperCase 计数 2),色轮 value 与预览底色收原样串——fromHex("AbCdEf") 后四格大写、色轮 "#AbCdEf"。颜色转换入口页即此被测模板。

往返恒等率:正向与反向两档 正向 HEX→HSL→HEX 恒等 1775241 / 16777216 恒等率 10.5813% 反向 HSL→HEX→HSL 恒等 444318 / 936360 恒等率 47.4516% 无 0–255 / 0–360 夹取 超长 HEX 上屏后再被门拒

图 2:往返恒等统计与无夹取路径

控件计数与文案对照

grep 口径:色板 12 格、UU.copy 按钮 3 个(id c-hex、c-rgb、c-hsl 逐个给出,--color 只读框不在其中);alpha / rgba / hsla 三关键字命中 0。逐字符敲入 "#39ff14" 共 7 键只有第 7 键触发,RGB 15 键、HSL 17 键同样末键生效——没有「边敲边出半成品色」的中间态。文案对照 15 条:[一致] 5、[部分一致] 5、[冲突] 5,冲突集中在 RGBA/HSLA/Alpha 与速查表色相 110 对实算 111 那格。想看格式换算公式与手算路径,旧文 颜色格式转换 把三种格式当被解释对象,本页只测门。

常见问题

Q:为什么 "#f0a" 敲进去没反应?

门只放行六位十六进制串,三位短写整族被挡,页面四格保持旧值;补位分支在函数里写得出来,在页面上到不了。

Q:rgb(300,300,300) 为什么算出别的数?

parseInt 无夹取,300 转 "12c" 拼出超长 HEX 上屏,再被 hexToRgb 按位切折叠回别的通道值。

Q:恒等率 10.5813% 是不是算错了?

是 rgbToHsl 三处 Math.round 的取整损失,不是崩溃也不是报错;想再比一版可去 CSS渐变生成器 用同一色值走一遍。

📎 相关文章

改了盐值不点按钮,四个框一动不动:MD5 页的三段拼接与多行输入实测 2026-11-08 60 位时间戳在这一页只剩 28 个位:UUID 生成器 v1 分支的移位与掩码逐毫秒实测 2026-11-08 替换次数报 5 还是报 1:批量查找替换的三个开关与零宽匹配实测 2026-11-07 空一个框就 0 张卡:分数通分页的静默失败、跳号的「分数N」与 990 行不约分 2026-11-07 删右侧给空串、截右侧还整行:text-line-ops 的码元口径与越界不对称实测 2026-11-07