Створення серії кольорів між двома кольорами

Враховуючи початковий колір і кінцевий колір, чи можливо алгоритмічно генерувати діапазон кольорів між ними? Наприклад, враховуючи світлі та темні відтінки синього / сірого на початку та в кінці зображення нижче, як я можу генерувати проміжні відтінки?

Одне з можливих рішень, які я розглядаю, - це створити градієнт з двох кольорів, а потім відібрати колір у рівновіддалених точках уздовж цього градієнта. Це, мабуть, найкращий підхід?

Це називається кольоровою інтерполяцією . Це те, що градієнти роблять під капотом. Це можна зробити, використовуючи різноманітні засоби та методи, і від того, як саме інтерполюються результати, залежить метод.

Я зазвичай роблю це для веб-проектів за допомогою JavaScript, щоб я міг динамічно змінювати кольори, наприклад, у цьому музичному візуалізаторі . Реалізація JavaScript, що має дуже простий метод лінійної інтерполяції з використанням RGB, виведений із наведеного вище прикладу, полягає в наступному:

Демонстраційна демонстрація

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

Який використовується так і повертає масив інтерпольованих кольорів:

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

Ви також можете знайти розширення PhotoShop (і, можливо, іншу програму) для розширення кольорової інтерполяції. Однак ви можете перевірити, щоб переконатися, що метод інтерполяції є тим самим, який ви бажаєте, оскільки ви можете використовувати будь-яку функцію для інтерполяції на основі.

Погляньте на цю відповідь. Як зробити даний колір трохи темнішим або світлішим?

Де ви просто взяли розділені значення кожного компонента RGB і розділили значення.

Але у нас є одна проблема, існує не один спосіб зробити кольоровий перехід.

Перший підхід дасть вам найкоротший маршрут (1), але, ймовірно, цей маршрут не є тим, що вам потрібно.

На це також впливає кольорова модель або логіка. Наприклад, у кольоровій моделі Lab * Червоний і Зелений є додатковими кольорами, тому короткий маршрут на цій моделі буде проходити через нейтральний сірий (3).

Якщо вам потрібні лише відтінки кольору, інша відповідь - відповідна.

Використовуйте суміш в Illustrator або RGB, або CMYK:

• створити по 2 фігури кожна з початком і кінцем кольором (один сірий та один чорний у цьому прикладі, але виберіть все, що вам потрібно)
• перейдіть Object → Blend → Blend Optionsі введіть скількиSpecified steps вам потрібно між ними (20 у моєму прикладі нижче)
• виберіть два об'єкти і виберіть Object → Blend → Make. Це створить суміш, яку ви зможете потім перетворити на окремі об’єкти за допомогою Object → Expand. Тоді ви можете побачити кожен проміжний об’єкт із власним кольоровим кодом.

Це доповнення до інших відповідей.

Під час інтерполяції кольорів у sRGB ви повинні враховувати, що значення RGB не є лінійними по інтенсивності світла, а лінійними по інтенсивності сприйняття людиною. Це полегшує збереження значень, але для різних кольорових операцій необхідно переходити до лінійного кольорового простору.

Сприйняття людиною інтенсивності світла відповідає закону потужності, так з

linear = sRGB^2.2
sRGB = linear^(1/2.2)

може використовуватися для перетворення між ними. При цьому використовується гамма-значення 2,2, яке є значенням для sRGB. Детальну інформацію про це дивіться у цій статті у Вікіпедії.

Детальний аналіз цієї проблеми та приклади неправильних реалізацій можна знайти тут . Один з яких - це градієнт кольору з використанням лінійної та sRGB інтерполяції.

Градієнт Photoshop (або еквівалентно "Blend" в Ai) вже представлений як спосіб отримати лінійний перехід кольорів між початковим і кінцевим кольорами. Як ми можемо отримати щось нелінійне (вигнутий шлях переходу) без програмування якогось коду сценарію?

Одне рішення - змінити шлях переходу градієнта шляхом регулювання шарів або режимів змішування або обох. Це дійсно створює безперервне перетворення від початкового кольору до кінцевого кольору, якщо модифікуючі шари мають маску шару, яка є безперервною і робить афект = Нуль на початку та в кінці.

Ось досить складний поворот. Шар "Один цільовий" має градієнт, а шар "Модифікатор" створює безперервний зміщення кольорів шляхом змішування режиму "Колір". Щоб зробити все закрученим, сам модифікатор є градієнтом.

Більше скручування створюється коригувальним шаром "Криві", що додає контраст. Він має ту саму маску шару, що і Модифікатор, але це не обов'язково. Будь-яка маска гаразд, якщо вона на початку та в кінці суцільна і чорна.

Існує кілька режимів безперервного змішування та кривих, що спричиняють різкий стрибок. Один з таких - "Відтінок". Інша можливість зіпсувати ефект - це "без змін", видима постійна кольорова зона, викликана відсіканням до всього нуля або всіх 255. Я не перевіряв і не підраховував, наскільки це на практиці допомагає використовувати 48-бітовий / піксельний режим RGB. Можливо, зовсім не так, тому що у нас на екрані є лише 24 біти / пікселі.