Вычислить, принадлежит ли определенный цвет к тому же семейству данного цвета

Question

Как рассчитать, если определенное значение RGB находится в том же приближении цвета

, например, если у нас есть набор

var color = {
   r : 20,
   g : 20,
   b : 80
}

, тогда тот же цвет при освещении или затемнении должен даватьпримерно такое же соотношение, может быть, что-то вроде

var colorBrighter = {
   r : 40,
   g : 40,
   g : 100
}

Вопрос, может ли кто-нибудь придумать функцию или формулу, чтобы проверить, находятся ли цвета в одном диапазоне ... способ определить, является ли цвет более яркимили более темный вариант данного цвета ...

Спасибо!

Answer 1

Прямые вычисления в RGB будут очень далеки от того, что воспринимает глаз.Даже не пытайтесь вычислить расстояния в этом пространстве, они ничего не значат.

Обычное решение при поиске простых вычислений, соответствующих человеческому восприятию (например, поиск более темного или близкого цвета или поиск пары).контрастных цветов) - преобразовать ваши цвета в другое цветовое пространство.

HSL дает очень хорошие результаты для этого.

Отрывок из Википедия :

Модель HSL описывает цвета с точки зрения оттенка, насыщенности и яркости (также называемой яркостью).(Примечание: определение насыщенности в HSL существенно отличается от HSV, и яркость не является интенсивностью.) Модель имеет два выдающихся свойства:

• Переход от черного к оттенку к белому является симметричным иконтролируется исключительно за счет увеличения яркости
• Уменьшение переходов насыщенности в оттенок серого в зависимости от яркости, что позволяет сохранять общую интенсивность относительно постоянной. Упомянутые выше свойства привели к широкому использованию HSL, в частности, вЦветовая модель CSS3. 3

Как и в HSV, оттенок напрямую соответствует понятию оттенка в разделе «Основы цвета».Преимущества использования оттенка:

Угловое соотношение между тонами вокруг цветового круга легко идентифицируется. Тени, оттенки и тона можно легко генерировать, не затрагивая оттенок

Вы будетенайдите много фрагментов и библиотек, выполняющих преобразование (один пример ).

Кроме того, если ваша цель - установить цвета для элементов DOM, вам следует рассмотреть возможность использования hsl напрямую, так как он поддерживается всеми браузерами:

color: hsl(120, 100%, 25%);

Answer 2

формула для проверки того, находятся ли цвета в одном диапазоне

  const difference = (one, two) => Math.sqrt(
    (one.r - two.r) ** 2 +
    (one.g - two.g) ** 2 +
    (one.b - two.b) ** 2
 );

Используется как:

console.log(difference(color, colorBrighter));

Это в основном вычисляет расстояние в трехмерном«цветовая комната», которая (afaik) является общим способом определения разницы между двумя цветами.

способ определения, является ли цвет более ярким или более темным вариантом данного цвета

Если вы представляете цвета как векторы, один вектор должен быть кратным другому:

 color1 * k = color2

Так что нам просто нужно проверить это уравнение:

const differOnlyInBrightness = (one, two) => (
   k => one.g * k === two.g && one.b * k === two.b
 )(two.r / one.r);