Javascript RGB到颜色名称映射（近似颜色映射）

我在建颜色选择器。如果用户选择颜色方块，它将转换为近似颜色名称

例如，如果用户为

c0c0

或

bebebebe

选择颜色，则两种颜色字符串都将转换为

灰色

，即使每种颜色都有特定的颜色名称

我甚至不知道如何解决这个问题，谷歌也没有帮我（

这是我的颜色函数sudo代码

getApproxColor = (colorString) => {
    if(`BBBBBB` <= colorString  <= 'CCCCCC') {
        return 'grey'
    }
    ...
}

getApproxColor=（colorString）=>{
if（`BBBBBB`TL；DR:只要使用这个库就行了。它是我所说内容的混合体，但具有Kaido提到的复杂性：


将原始答案保留在此处，但它不会完全起作用。请参见上文

每种颜色都是六位数的组合

如果你把这个数字转换成整数，比如说，BEBEBE是12500670

然后可以有一个小表，其中包含已知名称的每个键/对及其对应的整数值

然后就是在表中查找最接近的整数

编辑：

基本上，如果你有一个颜色选择器，上面写着这个人选择了“BEBEBE”，你必须：

将十六进制转换为十进制。有多个教程和在线工具，我在这里不详细介绍。这不是很难
然后，您将拥有一个表、对象、数组，以及任何您希望按十进制值及其对应名称排序的内容。例如：
您可以使用这个包含十六进制代码的表，并将它们转换为十进制。
[{
名称：“灰色”，十六进制：“bebebe”，十进制：“12500670”
}, 
[…]//插入更多颜色
]
然后，您可以在列表上迭代，将用户输入的十进制数与您拥有的十进制数进行比较，并在达到高于您的十进制数时停止，您可以存储刚刚找到的十进制数和上一个十进制数
你会发现你刚找到的和上一个之间的差异，差异较小的是最近的一个
利润
TL；DR：只要使用这个库。它是我所说的混合体，但具有Kaido提到的复杂性：


将原始答案保留在此处，但它不会完全起作用。请参见上文

每种颜色都是六位数的组合

如果你把这个数字转换成整数，比如说，BEBEBE是12500670

然后可以有一个小表，其中包含已知名称的每个键/对及其对应的整数值

然后就是在表中查找最接近的整数

编辑：

基本上，如果你有一个颜色选择器，上面写着这个人选择了“BEBEBE”，你必须：

将十六进制转换为十进制。有多个教程和在线工具，我在这里不详细介绍。这不是很难
然后，您将拥有一个表、对象、数组，以及任何您希望按十进制值及其对应名称排序的内容。例如：
您可以使用这个包含十六进制代码的表，并将它们转换为十进制。
[{
名称：“灰色”，十六进制：“bebebe”，十进制：“12500670”
}, 
[…]//插入更多颜色
]
然后，您可以在列表上迭代，将用户输入的十进制数与您拥有的十进制数进行比较，并在达到高于您的十进制数时停止，您可以存储刚刚找到的十进制数和上一个十进制数
你会发现你刚找到的和上一个之间的差异，差异较小的是最近的一个
利润
我不确定这是否是最好的方法，但如果我不得不这样做，我想我会首先将这些十六进制值转换为hsl

然后，您必须检查饱和度和亮度，以便找到灰度，并在您的发现中添加更多粒度

这里是一个粗略的概念证明，仅使用6种基本颜色，并使用a来完成此十六进制=>hsl转换


inp.oninput=e=>{
如果（！inp.checkValidity（））返回；
var val=输入值；
如果（val.length！==3&&val.length！==6）返回；
var color=hexToName（输入值）；
如果（颜色）{
inp.style.backgroundColor='#'+val；
log.textContent=颜色；
}
}
函数hexToName（hex）{
//首先得到hsl对应
var hsl=十六进制hsl（十六进制）；
如果（！hsl）{
返回；
}
//得到底色
var color=getColorName（hsl[0]*360）；
//检查饱和度和亮度
//需要更多的粒度，留给读者作为练习
如果（hsl[1]<.5）{
返回hsl[2]c.repeat（2））.join（“”）；
}
如果（十六进制长度！==6）{
返回；
}
var r=parseInt（十六进制[0]+十六进制[1]，16）；
var g=parseInt（十六进制[2]+十六进制[3]，16）；
var b=parseInt（十六进制[4]+十六进制[5]，16）；
r/=255，g/=255，b/=255；
var max=数学最大值（r，g，b），
min=数学min（r，g，b）；
变量h，s，l=（最大+最小）/2；
如果（最大=最小）{
h=s=0；//消色差
}否则{
var d=最大-最小值；
s=l>0.5？d/（2-最大-最小）：d/（最大+最小）；
开关（最大值）{
案例r：
h=（g-b）/d+（g

#
我不确定这是否是最好的方法，但如果我不得不这样做，我想我会首先将这些十六进制值转换为hsl

然后，您必须检查饱和度和亮度，以便找到灰度，并在您的发现中添加更多粒度

这里是一个粗略的概念证明，仅使用6种基本颜色，并使用a来完成此十六进制=>hsl转换


inp.oninput=e=>{
如果（！inp.checkValidity（））返回；
var val=输入值；
如果（val.length！==3&&val.length！==6）返回；
var color=hexToName（输入值）；
如果（颜色）{
inp.style.backgroundColor='#'+val；
log.textContent=颜色；
}
}
函数hexToName（hex）{
//首先获得相应的hsl