Loading...
JavaScript | Ближайший цвет js
Есть json массив с цветами в rgb, и их названиями (пример):
var  palette = [
{
"color": [255, 0, 0],
"name": "red"
},
{
"color": [0, 255, 0],
"name": "green"
},
{
"color": [0, 0, 255],
"name": "blue"
}
]

Также рандомный цвет:
var color = [167, 10, 23]

Нужно определять ближайший к нему за схожестью цвет из массива, и называть его
________
посл. ред. 11.11.2022 в 12:23; всего 3 раз(а); by mrDima
Теоретически можно так попробовать:
const rgbSum = (rgbArray) => rgbArray.reduce((pval, cval) => pval + cval, 0)
const compareColor = (palette, color) => {
const colorSum = rgbSum(color)
let best = 0
let bestEl = null
palette.forEach(el => {
const elSum = rgbSum(el.color) - colorSum
if(elSum < best || bestEl === null) {
best = elSum
bestEl = el
}
})
return bestEl
}

const palette = [
{
"color": [255, 0, 0],
"name": "red"
},
{
"color": [0, 255, 0],
"name": "green"
},
{
"color": [0, 0, 255],
"name": "blue"
}
]
const color = [167, 10, 23]
console.log(compareColor(palette, color).name)

для 167,10,23 выведет "red"
steel97 , хмм, оно в любом случае выводит red :/
mrDima , и вправду, голова уже туго сображает, поправил:
const scoreSum = scoreArray => scoreArray.reduce((pval, cval) => pval + cval, 0)
const compareColor = (palette, color) => {
let score = 0;
let bestEl = null
palette.forEach(el => {
const curScoreArray = [
Math.abs(el.color[0] - color[0]),
Math.abs(el.color[1] - color[1]),
Math.abs(el.color[2] - color[2])
]

const curScore = scoreSum(curScoreArray)
if(curScore < score || bestEl === null) {
score = curScore
bestEl = el
}
})
return bestEl
}

const palette = [
{
"color": [255, 0, 0],
"name": "red"
},
{
"color": [0, 255, 0],
"name": "green"
},
{
"color": [0, 0, 255],
"name": "blue"
}
]

const color = [167, 255, 23]
console.log(compareColor(palette, color).name)
steel97 , спасибо, очень помог)
Онлайн: 2
Время:
Gen. 0.0896
(c) ByMAS.RU 2010-2025