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

Метод 1: преобразование RGB в HSL
Одним из популярных методов работы с цветовым кругом является преобразование цветов из цветового пространства RGB (красный, зеленый, синий) в HSL (оттенок, насыщенность, яркость). Это преобразование позволяет дизайнерам манипулировать значением оттенка для создания различных цветовых вариаций.

Пример фрагмента кода на JavaScript:

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }
  return [h, s, l];
}
const [h, s, l] = rgbToHsl(255, 0, 0);
console.log(`HSL: ${h}, ${s}, ${l}`);

Метод 2: Аналогичные цвета
Аналогичные цвета — это цвета, расположенные рядом друг с другом на цветовом круге. Они создают гармоничную и единую цветовую гамму. Один из способов создания аналогичных цветов – манипулировать значением оттенка основного цвета, сохраняя при этом постоянные насыщенность и яркость.

Пример фрагмента кода в CSS:

.base-color {
  background-color: #ff0000; /* Red */
}
.analogous-color-1 {
  background-color: hsl(30, 100%, 50%); /* Orange */
}
.analogous-color-2 {
  background-color: hsl(60, 100%, 50%); /* Yellow */
}
.analogous-color-3 {
  background-color: hsl(90, 100%, 50%); /* Green */
}

Метод 3: дополнительные цвета
Дополнительные цвета — это цвета, которые находятся прямо напротив друг друга на цветовом круге. Они создают высокую контрастность и яркую цветовую гамму. Чтобы найти дополнительный цвет к основному цвету, можно прибавить или вычесть 180 градусов из значения оттенка.

Пример фрагмента кода на Python:

def get_complementary_color(hue):
    complementary_hue = (hue + 180) % 360
    return complementary_hue
base_color = 120  # Green
complementary_color = get_complementary_color(base_color)
print(f"Complementary color: {complementary_color}")

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