解析門與它的六處出口
本頁只有六個出口: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 次 |
圖 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"。顏色轉換入口頁即此被測模板。
圖 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漸變生成器 用同一色值走一遍。