Алгоритмическая цветовая палитра с помощью chroma.js и сдвига оттенков

Содержание

Вопрос или проблема
Ответ или решение
Определение направления изменения оттенка
Параметры для изменения оттенка
Пример реализации
Заключение

Вопрос или проблема

Я использую chroma.js для генерации цветовых палитр с определённым значением оттенка и насыщенности, т.е. он варьирует светлоту в зависимости от числа, переданного в цепочечном вызове функции colors(10), и проходит через цветовое пространство, как указано в цепочечном вызове функции mode().

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

Где мои знания заканчиваются, так это в том, как определить, в каком направлении должен изменяться оттенок? Зависит ли это от исходного оттенка, или существует какая-то процедура, которая всегда добавляет/вычитает значение оттенка по мере увеличения светлоты и соответственно вычитает/добавляет при снижении светлоты?

Я хотел бы добавить ещё один параметр hueShiftAmount, а также startingHue и endingHue, но не уверен, какие логичные значения могут быть для этих параметров.

  function generateColorPalette(hue: number, saturation: number) {
    const colors = chroma
      .scale([
        chroma.hsl(hue, saturation / 100, 0.9), // светлее
        chroma.hsl(hue, saturation / 100, 0.1), // темнее
      ])
      // .padding([0.1, 0.1])
      .correctLightness()
      .mode(colorSpaceStore.value)
      .colors(10);

    return colors.map((hex) => {
      const hslColor = chroma(hex).hsl();

      // округляем
      hslColor[0] = Math.round(hslColor[0]);
      hslColor[1] = Math.round(hslColor[1] * 100);
      hslColor[2] = Math.round(hslColor[2] * 100);

      return {
        hex,
        hsl: hslColor,
      };
    });
  }

Вот одна идея, которая у меня возникла:

  function generateColorPalette(hue: number, saturation: number) {
    const HUE_SHIFT = 10; // пример смещения оттенка.
    const colors = chroma
      .scale([
        chroma.hsl(hue + HUE_SHIFT, saturation / 100, 0.9), // светлее
        chroma.hsl(hue - HUE_SHIFT, saturation / 100, 0.1), // темнее
      ])
      // .padding([0.1, 0.1])
      .correctLightness()
      .mode(colorSpaceStore.value)
      .colors(10);

    return colors.map((hex) => {
      const hslColor = chroma(hex).hsl();

      // округляем
      hslColor[0] = Math.round(hslColor[0]);
      hslColor[1] = Math.round(hslColor[1] * 100);
      hslColor[2] = Math.round(hslColor[2] * 100);

      return {
        hex,
        hsl: hslColor,
      };
    });
  }

Может ли кто-то с хорошим знанием теории цвета посоветовать мне?

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

Ответ или решение

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

Определение направления изменения оттенка

При изменении оттенка в зависимости от светлоты (lightness) можно опираться на некоторые принципы цветовой теории. Обычно, когда светлота увеличивается (color lightness), рекомендуется изменять оттенок (hue) в определенном направлении, чтобы обеспечить гармоничное восприятие цветов. Направление изменения оттенка может зависеть от оригинального оттенка. Например, при светлых тонах можно добавить оттенка в сторону более теплых цветов (например, желтых), а для темных тонов – в сторону холодных (например, синих или фиолетовых).

Параметры для изменения оттенка

Вы предложили параметры hueShiftAmount, startingHue и endingHue. Давайте рассмотрим, как их можно использовать:

hueShiftAmount: значение, на которое будет изменяться оттенок. Это значение должно быть конвертируемым в диапазон от -360 до +360, чтобы получать правильные результаты. Например, начальное значение можно взять 10.
startingHue и endingHue: это могут быть оттенки, с которых вы начинаете и к которым стремитесь. Для начала можно установить значения, например, 0 (красный) и 240 (синий).

Пример реализации

Вот как может выглядеть функция generateColorPalette с учетом изменения оттенка:

function generateColorPalette(hue, saturation, hueShiftAmount = 10) {
    const colors = chroma
        .scale([
            chroma.hsl(hue + hueShiftAmount, saturation / 100, 0.9), // светлее
            chroma.hsl(hue - hueShiftAmount, saturation / 100, 0.1), // темнее
        ])
        .correctLightness()
        .mode(colorSpaceStore.value)
        .colors(10);

    return colors.map((hex) => {
        const hslColor = chroma(hex).hsl();

        // округляем значения
        hslColor[0] = Math.round(hslColor[0]);
        hslColor[1] = Math.round(hslColor[1] * 100);
        hslColor[2] = Math.round(hslColor[2] * 100);

        return {
            hex,
            hsl: hslColor,
        };
    });
}

// Пример использования
const palette = generateColorPalette(0, 100, 15);
console.log(palette);

Заключение

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

Также, вам стоит обратить внимание на эксперименты с различными значениями и режимами цвета в chroma.js, чтобы находить наиболее подходящие решения для ваших задач по генерации палитр. Следует помнить, что цветовая гармония – важная сторона визуального восприятия, поэтому потратьте время на исследование цветов и применения теории цвета в вашей работе.

Если у вас возникнут дополнительные вопросы или понадобятся советы по конкретным аспектам кода или теории, не стесняйтесь задавать их.