Объекты цвета в D3: d3.color, d3.rgb, d3.hsl, d3.lab, d3.hcl

Цветовые объекты в D3.js представляют собой унифицированный слой работы с цветом, позволяющий описывать, преобразовывать и интерполировать цвета в различных цветовых пространствах без привязки к конкретному формату представления. Основой этой системы является абстракция d3.color, от которой наследуются и расширяются конкретные реализации: d3.rgb, d3.hsl, d3.lab, d3.hcl.

d3.color не является конструктором в классическом смысле и чаще используется как базовый парсер и фабрика. Он принимает строковое представление цвета в любом поддерживаемом формате и возвращает объект соответствующего цветового пространства.

const c = d3.color("steelblue");

Возвращаемый объект содержит общие свойства:

  • r, g, b — для RGB-представления (если применимо)
  • h, s, l — для HSL
  • l, a, b — для LAB
  • opacity — прозрачность
  • format() — метод преобразования обратно в строку

Ключевая особенность d3.color заключается в том, что она не фиксирует пространство, а определяет его автоматически на основе входных данных или приводит к базовому RGB-представлению.

RGB-представление: d3.rgb

Модель RGB (Red, Green, Blue) является одной из наиболее распространённых систем описания цвета в компьютерной графике. В D3 она представлена объектом d3.rgb.

const c = d3.rgb(70, 130, 180);

Поддерживаются различные способы создания:

d3.rgb("steelblue");
d3.rgb("#4682b4");
d3.rgb("rgb(70, 130, 180)");

Структура объекта:

  • r — красный канал (0–255)
  • g — зелёный канал (0–255)
  • b — синий канал (0–255)
  • opacity — прозрачность (0–1)

Методы:

c.brighter(1);   // увеличение яркости
c.darker(1);     // уменьшение яркости
c.rgb();         // возвращает копию в RGB
c.formatHex();   // "#4682b4"
c.formatRgb();   // "rgb(70, 130, 180)"

RGB-модель используется как базовое пространство для большинства внутренних преобразований D3.

HSL: оттенок, насыщенность и светлота

d3.hsl описывает цвет через три компонента:

  • H (Hue) — оттенок, угол на цветовом круге (0–360)
  • S (Saturation) — насыщенность (0–1)
  • L (Lightness) — светлота (0–1)
const c = d3.hsl(207, 0.44, 0.49);

Также возможно создание через строку:

d3.hsl("steelblue");

Особенность HSL заключается в интуитивном управлении визуальными характеристиками. Изменение яркости или насыщенности не требует перерасчёта всех каналов, как в RGB.

Методы:

c.hsl();         // преобразование в HSL
c.brighter();    // увеличение светлоты
c.darker();      // уменьшение светлоты

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

LAB: перцептуально равномерное пространство

d3.lab основан на CIE LAB — модели, разработанной для приближения человеческого восприятия цвета. В отличие от RGB и HSL, LAB стремится к равномерности: одинаковое числовое изменение должно соответствовать примерно одинаковому визуальному изменению.

const c = d3.lab(50, -20, 30);

Компоненты:

  • L — светлота (0–100)
  • a — зелёно-красная ось
  • b — сине-жёлтая ось

Преимущества LAB:

  • корректная интерполяция цветов
  • предсказуемые градиенты
  • отсутствие визуальных артефактов при переходах
const c1 = d3.lab("steelblue");
const c2 = d3.lab("orange");

d3.interpolateLab(c1, c2)(0.5);

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

HCL: цилиндрическая модель LAB

d3.hcl является преобразованием LAB в цилиндрическое пространство:

  • H (Hue) — оттенок
  • C (Chroma) — насыщенность
  • L (Lightness) — светлота
const c = d3.hcl(240, 40, 60);

HCL сохраняет преимущества LAB, но делает управление оттенком более интуитивным.

Особенности:

  • стабильная светлота при изменении оттенка
  • более предсказуемая насыщенность по сравнению с HSL
  • удобство при генерации цветовых палитр
const base = d3.hcl("steelblue");
const shifted = base.copy().h + 20;

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

Преобразования между цветовыми пространствами

Все цветовые объекты D3 поддерживают взаимные преобразования:

const rgb = d3.rgb("steelblue");
const hsl = rgb.hsl();
const lab = rgb.lab();
const hcl = rgb.hcl();

Обратные преобразования также возможны:

const c = d3.lab(50, 20, 30);
const rgb = c.rgb();

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

Интерполяция цветов

Цветовые пространства тесно связаны с функциями интерполяции:

  • d3.interpolateRgb
  • d3.interpolateHsl
  • d3.interpolateLab
  • d3.interpolateHcl
const scale = d3.interpolateLab("steelblue", "orange");
scale(0.5);

Разница между пространствами проявляется в характере перехода:

  • RGB — линейный, часто визуально неравномерный
  • HSL — сохраняет оттенок, но может давать «грязные» переходы
  • LAB/HCL — наиболее равномерные и визуально предсказуемые

Работа с прозрачностью

Все цветовые объекты поддерживают альфа-канал:

const c = d3.rgb(70, 130, 180, 0.5);

или

const c = d3.hsl("steelblue");
c.opacity = 0.3;

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

Форматирование и сериализация

Любой цветовой объект может быть преобразован в строковое представление:

c.formatHex();   // "#4682b4"
c.formatRgb();   // "rgb(70, 130, 180)"

Формат выбирается в зависимости от задач визуализации: HEX удобен для хранения, RGB — для CSS и динамических вычислений.

Особенности внутренней архитектуры цветовых объектов

Цветовые объекты D3 построены на принципе неизменяемости в функциональном стиле: методы преобразования возвращают новые экземпляры, не изменяя исходный объект.

const c1 = d3.rgb("steelblue");
const c2 = c1.brighter();

Такой подход обеспечивает предсказуемость при построении цепочек преобразований и визуальных шкал.

Практическая согласованность цветовых моделей

Использование разных цветовых пространств в D3 связано с компромиссами:

  • RGB — точность аппаратного отображения
  • HSL — удобство ручного управления
  • LAB — визуальная корректность интерполяции
  • HCL — баланс восприятия и управляемости

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

Оглавление