d3-color

Несмотря на то, что ваш браузер хорошо понимает цвета, он не предлагает много помощи в манипулировании цветами через JavaScript. Модуль d3-color, поэтому, предоставляет представления для различных цветовых пространств, позволяя задавать, преобразовывать и манипулировать цветами. (Также см. d3-interpolate для интерполяции цвета.)

Например, возьмём цвет под названием «steelblue»:

var c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

Попробуем преобразовать его в HSL:

var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}

Теперь повернём оттенок на 90°, увеличим насыщенность и отформатируем как строку для CSS:

c.h += 90;
c.s += 0.2;
c + ""; // rgb(198, 45, 205)

Чтобы немного осветлить цвет:

c.opacity = 0.8;
c + ""; // rgba(198, 45, 205, 0.8)

Помимо повсеместно используемого и удобного для машин цветового пространства RGB и HSL, d3-color поддерживает два цветовых пространства, разработанных для людей:

Цветовое пространство Cubehelix Дэва Грина
Lab (CIELAB) и HCL (CIELCH)

Cubehelix характеризуется монотонной светлотой, в то время как Lab и HCL — перцептивно равномерными. Обратите внимание, что HCL — это цилиндрическая форма Lab, аналогично тому, как HSL — это цилиндрическая форма RGB.

Установка

Если вы используете NPM, npm install d3-color. В противном случае скачайте последнюю версию. Вы также можете загрузить его напрямую с d3js.org, как самостоятельную библиотеку или как часть D3 4.0. Поддерживаются AMD, CommonJS и обычные среды. В обычной среде экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script>

var steelblue = d3.rgb("steelblue");

</script>

Попробуйте d3-color в своём браузере.

Справочник API

d3.color(specifier) Источник

Парсит указанную CSS Color Module Level 3 строку specifier, возвращая цвет RGB или HSL. Если указанный спецификатор был некорректным, возвращается null. Некоторые примеры:

rgb(255, 255, 255)
rgb(10%, 20%, 30%)
rgba(255, 255, 255, 0.4)
rgba(10%, 20%, 30%, 0.4)
hsl(120, 50%, 20%)
hsla(120, 50%, 20%, 0.4)
#ffeeaa
#fea
steelblue

Список поддерживаемых имен цветов определяется CSS.

Примечание: эта функция также может использоваться с instanceof для проверки, является ли объект экземпляром цвета. То же самое верно для подклассов цветов, что позволяет проверить, принадлежит ли цвет определённому цветовому пространству.

color.opacity

Непрозрачность этого цвета, обычно в диапазоне [0, 1].

color.rgb() Источник

Возвращает эквивалент RGB этого цвета. Для RGB-цветов это this.

color.brighter([k]) Источник

Возвращает более светлую копию этого цвета. Если k задано, оно определяет, насколько ярче должен быть возвращаемый цвет. Если k не указано, оно по умолчанию равно 1. Поведение этого метода зависит от реализуемого цветового пространства.

color.darker([k]) Источник

Возвращает более тёмную копию этого цвета. Если k задано, оно определяет, насколько тёмнее должен быть возвращаемый цвет. Если k не указано, оно по умолчанию равно 1. Поведение этого метода зависит от реализуемого цветового пространства.

color.displayable() Источник

Возвращает true только в том случае, если цвет отображается на стандартном оборудовании. Например, для RGB-цвета это возвращает false, если любое значение канала меньше нуля или больше 255, или если непрозрачность не находится в диапазоне [0, 1].

color.toString() Источник

Возвращает строку, представляющую этот цвет в соответствии со спецификацией CSS Object Model, например rgb(247, 234, 186). Если этот цвет не отображается, возвращается подходящий отображаемый цвет. Например, значения RGB каналов, превышающие 255, ограничены 255.

d3.rgb(r, g, b[, opacity]) Источник
d3.rgb(specifier)
d3.rgb(color)

Создаёт новый цвет RGB. Значения каналов представлены как r, g и b свойства возвращённого экземпляра. Используйте RGB-выборщик цвета для изучения этого цветового пространства.

Если заданы r, g и b, они представляют значения каналов возвращаемого цвета; также может быть задана непрозрачность. Если задана строка спецификатора CSS Color Module Level 3, она разбирается и преобразуется в цветовое пространство RGB. См. color для примеров. Если задан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb. Обратите внимание, что в отличие от color.rgb, этот метод всегда возвращает новый экземпляр, даже если color уже является RGB-цветом.

d3.hsl(h, s, l[, opacity]) Источник
d3.hsl(specifier)
d3.hsl(color)

Создаёт новый цвет HSL. Значения каналов представлены как h, s и l свойства возвращённого экземпляра. Используйте HSL-выборщик цвета для изучения этого цветового пространства.

Если заданы h, s и l, они представляют значения каналов возвращаемого цвета; также может быть задана непрозрачность. Если задана строка спецификатора CSS Color Module Level 3, она разбирается и преобразуется в цветовое пространство HSL. См. color для примеров. Если задан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb, а затем в HSL. (Для цветов, уже имеющих цветовое пространство HSL, преобразование в RGB пропущено.)

d3.lab(l, a, b[, opacity]) Источник
d3.lab(specifier)
d3.lab(color)

Создаёт новый цвет Lab. Значения каналов представлены как l, a и b свойства возвращённого экземпляра. Используйте Lab-выборщик цвета для изучения этого цветового пространства.

Если заданы l, a и b, они представляют значения каналов возвращаемого цвета; также может быть задана непрозрачность. Если задана строка спецификатора CSS Color Module Level 3, она разбирается и преобразуется в цветовое пространство Lab. См. color для примеров. Если задан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb, а затем в Lab. (Для цветов, уже имеющих цветовое пространство Lab, преобразование в RGB пропущено, а для цветов цветового пространства HCL преобразование происходит непосредственно в Lab.)

d3.hcl(h, c, l[, opacity]) Источник
d3.hcl(specifier)
d3.hcl(color)

Создаёт новый цвет HCL. Значения каналов представлены как h, c и l свойства возвращённого экземпляра. Используйте HCL-выборщик цвета для изучения этого цветового пространства.

Если заданы h, c и l, они представляют значения каналов возвращаемого цвета; также может быть задана непрозрачность. Если задана строка спецификатора CSS Color Module Level 3, она разбирается и преобразуется в цветовое пространство HCL. См. color для примеров. Если задан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb, а затем в HCL. (Для цветов, уже имеющих цветовое пространство HCL, преобразование в RGB пропущено, а для цветов цветового пространства Lab преобразование происходит непосредственно в HCL.)

d3.cubehelix(h, s, l[, opacity]) Источник
d3.cubehelix(specifier)
d3.cubehelix(color)

Создаёт новый цвет Cubehelix. Значения каналов представлены как h, s и l свойства возвращённого экземпляра. Используйте Cubehelix-выборщик цвета для изучения этого цветового пространства.

Если заданы h, s и l, они представляют значения каналов возвращаемого цвета; также может быть задана непрозрачность. Если задана строка спецификатора CSS Color Module Level 3, она разбирается и преобразуется в цветовое пространство Cubehelix. См. color для примеров. Если задан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb, а затем в Cubehelix. (Для цветов, уже имеющих цветовое пространство Cubehelix, преобразование в RGB пропущено.)