Получить цветовую палитру из заданного набора цветов

У меня есть набор цветов на веб-странице, где один цвет является основным:

#864062 <-- main color
#853f61
#925071
#541c38
#64304A
#eac9d7

Теперь я хотел бы получить аналогичную цветовую схему для любого произвольного основного цвета.

Моя идея заключалась в следующем:

  1. Преобразование всех цветов в десятичную запись (r, g, b)
  2. Рассчитать соотношение отдельных компонентов друг к другу по цвету и основному цвету
  3. Используйте эти коэффициенты в качестве матрицы преобразования для любого другого основного цвета.

Для моего примера rgb отдельных цветов:

134  64  98
133  63  97
146  80 113
84   28  56
100  48  74
234 201 215

Соотношение каждого компонента (другой цвет/основной цвет):

0.99 0.98 0.99
1.09 1.25 1.15
0.63 0.44 0.57
0.75 0.75 0.76
1.75 3.14 2.19

Теперь для любого нового основного цвета я могу рассчитать все остальные цвета:

100 100 100 <-- new main color
 99  98  99
109 125 115
 63  44  57
 75  75  76
175 255 219 (max is 255, cannot have 314)

Мой вопрос в том, имеет ли смысл этот способ расчета, поскольку я никогда раньше не занимался математикой с цветами.

Взгляните на Adobe Kuler . Вы можете установить базовый цвет и вторичные цвета, а затем повернуть/изменить базовый цвет с другими цветами в следующем порядке.
Если вы используете это на веб-странице, я бы посоветовал сначала взглянуть на чужой код, чтобы попытаться понять его математику. Посмотрите здесь: github.com/c0bra/color-scheme-js (прокрутите вниз) и это объясняет, что они делают
Я бы согласился с Винсентом, Адобр Кулер работает на меня и дает вам различные коды.

Ответы (1)

На мой взгляд, RGB трудно использовать для расчета цвета. Гораздо проще создавать цветовые схемы в цветовом пространстве HSL.

H = Hue,
S = Saturation,
L = Lightness

Цвета делятся на эти три значения. Вот пример ваших цветов в HSL:

H     S    L
331°, 35%, 39%
331°, 36%, 38%
330°, 29%, 44%
330°, 50%, 22%
330°, 35%, 29%
335°, 44%, 85%

Вы можете видеть, что оттенок почти одинаков для всех цветов. Таким образом, вы можете начать с основы оттенка 330°и настроить насыщенность и яркость по своему вкусу.

Теперь, если вы хотите применить эту схему к зеленоватому цвету, вы можете изменить значение оттенка на 112°и получить подходящую зеленую цветовую схему.

Получить цветовую палитру из заданного набора цветов
СпросиСетьПолитика конфиденциальности1y, 0v