雜記 › 技術筆記 › 取色器的解析門只收六位十六進位:三位短寫摘出能算、頁面永遠走不到

取色器的解析門只收六位十六進位:三位短寫摘出能算、頁面永遠走不到

取色頁的 HEX 門只認六位十六進位:三位短寫摘出可算、頁面全掃 33554432 條命中 0;fromRgb 的 parseInt 無 0–255 夾取,300 撐成超長 HEX 又被自己的門拒回。

解析門與它的六處出口

本頁只有六個出口: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