颜色选择脚本中current_color对象的rgb属性值异常固定问题求助

AI 小北

2026-4-7

各位好，我做了一个网页颜色调试工具，支持用户通过HSL或RGB滑块来调整颜色效果。但最近碰到一个很诡异的问题：当我用RGB滑块调出某个和CSS预定义颜色名匹配的颜色，或者直接通过最右侧的下拉列表选择一个预定义颜色名称后，current_color对象的rgb属性就像被“粘住”一样固定在对应的值上，后续再拖动滑块调整颜色，这个属性也没办法正常更新了。

我已经把页面的XHTML代码放在对应的页面中，下面是完整的JavaScript文件代码：

const colour_names = {
    '000000': {'rgb': [0,0,0], 'hsl': [0,0,0]}, //'Black'
    '000080': {'rgb': [0,0,128], 'hsl': [240,100,25]}, //'Navy'
    '00008B': {'rgb': [0,0,139], 'hsl': [240,100,27]}, //'DarkBlue'
    '0000CD': {'rgb': [0,0,205], 'hsl': [240,100,40]}, //'MediumBlue'
    '0000FF': {'rgb': [0,0,255], 'hsl': [240,100,50]}, //'Blue'
    '006400': {'rgb': [0,100,0], 'hsl': [120,100,20]}, //'DarkGreen'
    '008000': {'rgb': [0,128,0], 'hsl': [120,100,25]}, //'Green'
    '008080': {'rgb': [0,128,128], 'hsl': [180,100,25]}, //'Teal'
    '008B8B': {'rgb': [0,139,139], 'hsl': [180,100,27]}, //'DarkCyan'
    '00BFFF': {'rgb': [0,191,255], 'hsl': [195,100,50]}, //'DeepSkyBlue'
    '00CED1': {'rgb': [0,206,209], 'hsl': [181,100,41]}, //'DarkTurquoise'
    '00FA9A': {'rgb': [0,250,154], 'hsl': [157,100,49]}, //'MediumspringGreen'
    '00FF00': {'rgb': [0,255,0], 'hsl': [120,100,50]}, //'Lime'
    '00FF7F': {'rgb': [0,255,127], 'hsl': [150,100,50]}, //'SpringGreen'
    '00FFFF': {'rgb': [0,255,255], 'hsl': [180,100,50]}, //'Cyan,Aqua'
    '191970': {'rgb': [25,25,112], 'hsl': [240,64,27]}, //'MidnightBlue'
    '1E90FF': {'rgb': [30,144,255], 'hsl': [210,100,56]}, //'DodgerBlue'
    '20B2AA': {'rgb': [32,178,170], 'hsl': [177,70,41]}, //'LightseaGreen'
    '228B22': {'rgb': [34,139,34], 'hsl': [120,61,34]}, //'ForestGreen'
    '2E8B57': {'rgb': [46,139,87], 'hsl': [146,50,36]}, //'SeaGreen'
    '2F4F4F': {'rgb': [47,79,79], 'hsl': [180,25,25]}, //'DarkSlateGray,DarkSlateGrey'
    '32CD32': {'rgb': [50,205,50], 'hsl': [120,61,50]}, //'LimeGreen'
    '3CB371': {'rgb': [60,179,113], 'hsl': [147,50,47]}, //'MediumseaGreen'
    '40E0D0': {'rgb': [64,224,208], 'hsl': [174,72,56]}, //'Turquoise'
    '4169E1': {'rgb': [65,105,225], 'hsl': [225,73,57]}, //'RoyalBlue'
    '4682B4': {'rgb': [70,130,180], 'hsl': [207,44,49]}, //'SteelBlue'
    '483D8B': {'rgb': [72,61,139], 'hsl': [248,39,39]}, //'DarkSlateBlue'
    '48D1CC': {'rgb': [72,209,204], 'hsl': [178,60,55]}, //'Mediumturquoise'
    '4B0082': {'rgb': [75,0,130], 'hsl': [275,100,25]}, //'Indigo'
    '556B2F': {'rgb': [85,107,47], 'hsl': [82,39,30]}, //'DarkOliveGreen'
    '5F9EA0': {'rgb': [95,158,160], 'hsl': [182,25,50]}, //'CadetBlue'
    '663399': {'rgb': [102,51,153], 'hsl': [270,50,40]}, //'Rebeccapurple'
    '6495ED': {'rgb': [100,149,237], 'hsl': [219,79,66]}, //'CornflowerBlue'
    '66CDAA': {'rgb': [102,205,170], 'hsl': [160,51,60]}, //'Mediumaquamarine'
    '696969': {'rgb': [105,105,105], 'hsl': [0,0,41]}, //'DimGray,DimGrey'
    '6A5ACD': {'rgb': [106,90,205], 'hsl': [248,53,58]}, //'SlateBlue'
    '6B8E23': {'rgb': [107,142,35], 'hsl': [80,60,35]}, //'Olivedrab'
    '708090': {'rgb': [112,128,144], 'hsl': [210,13,50]}, //'SlateGray,SlateGrey'
    '778899': {'rgb': [119,136,153], 'hsl': [210,14,53]}, //'LightSlateGray,LightSlateGrey'
    '7B68EE': {'rgb': [123,104,238], 'hsl': [249,80,67]}, //'MediumSlateBlue'
    '7CFC00': {'rgb': [124,252,0], 'hsl': [90,100,49]}, //'LawnGreen'
    '7FFF00': {'rgb': [127,255,0], 'hsl': [90,100,50]}, //'Chartreuse'
    '7FFFD4': {'rgb': [127,255,212], 'hsl': [160,100,75]}, //'Aquamarine'
    '800000': {'rgb': [128,0,0], 'hsl': [0,100,25]}, //'Maroon'
    '800080': {'rgb': [128,0,128], 'hsl': [300,100,25]}, //'Purple'
    '808000': {'rgb': [128,128,0], 'hsl': [60,100,25]}, //'Olive'
    '808080': {'rgb': [128,128,128], 'hsl': [0,0,50]}, //'Gray,Grey'
    '87CEEB': {'rgb': [135,206,235], 'hsl': [197,71,73]}, //'SkyBlue'
    '87CEFA': {'rgb': [135,206,250], 'hsl': [203,92,75]}, //'LightSkyBlue'
    '8A2BE2': {'rgb': [138,43,226], 'hsl': [271,76,53]}, //'BlueViolet'
    '8B0000': {'rgb': [139,0,0], 'hsl': [0,100,27]}, //'DarkRed'
    '8B008B': {'rgb': [139,0,139], 'hsl': [300,100,27]}, //'DarkMagenta'
    '8B4513': {'rgb': [139,69,19], 'hsl': [25,76,31]}, //'Saddlebrown'
    '8FBC8F': {'rgb': [143,188,143], 'hsl': [120,25,65]}, //'DarkSeaGreen'
    '90EE90': {'rgb': [144,238,144], 'hsl': [120,73,75]}, //'LightGreen'
    '9370D8': {'rgb': [147,112,216], 'hsl': [260,57,64]}, //'Mediumpurple'
    '9400D3': {'rgb': [148,0,211], 'hsl': [282,100,41]}, //'DarkViolet'
    '98FB98': {'rgb': [152,251,152], 'hsl': [120,93,79]}, //'PaleGreen'
    '9932CC': {'rgb': [153,50,204], 'hsl': [280,61,50]}, //'DarkOrchid'
    '9ACD32': {'rgb': [154,205,50], 'hsl': [80,61,50]}, //'YellowGreen'
    'A0522D': {'rgb': [160,82,45], 'hsl': [19,56,40]}, //'Sienna'
    'A52A2A': {'rgb': [165,42,42], 'hsl': [0,59,41]}, //'Brown'
    'A9A9A9': {'rgb': [169,169,169], 'hsl': [0,0,66]}, //'DarkGray,DarkGrey'
    'ADD8E6': {'rgb': [173,216,230], 'hsl': [195,53,79]}, //'LightBlue'
    'ADFF2F': {'rgb': [173,255,47], 'hsl': [84,100,59]}, //'GreenYellow'
    'AFEEEE': {'rgb': [175,238,238], 'hsl': [180,65,81]}, //'Paleturquoise'
    'B0C4DE': {'rgb': [176,196,222], 'hsl': [214,41,78]} //'LightSteelBlue'
};

我已经排查了好一阵子，但还是没找到问题的根源。有没有大佬能帮忙分析下，到底是哪里的逻辑出了问题，导致current_color.rgb属性被固定住无法更新呢？

内容来源于stack exchange