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 и vanilla. В vanilla экспортируется глобальная переменная 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) Источник

Парсит указанную строку specifier CSS Color Module Level 3, возвращая цвет 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 тогда и только тогда, когда цвет отображается на стандартном оборудовании. Например, это возвращает false для цвета RGB, если какое-либо значение канала меньше нуля или больше 255, или если непрозрачность не находится в диапазоне [0, 1].

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

Возвращает шестнадцатеричную строку, представляющую этот цвет в RGB пространстве, например #f7eaba. Если этот цвет не отображается, возвращается подходящий отображаемый цвет. Например, значения каналов RGB, большие, чем 255, обрезаются до 255.

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

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

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

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

Если r, g и b указаны, они представляют значения каналов возвращаемого цвета; также может быть указана непрозрачность. Если указана строка specifier 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 указаны, они представляют значения каналов возвращаемого цвета; также может быть указана непрозрачность. Если указана строка specifier 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 обычно находится в диапазоне [0, 100], а a и b обычно в диапазоне [-160, +160].

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

d3.gray(l[, opacity]) Источник

Создаёт новый цвет Lab со значением l и a = b = 0.

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

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

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

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

Эквивалентно d3.hcl, но с обратным порядком аргументов.

d3.cubehelix(h, s, l[, opacity]) Исходный код
d3.cubehelix(specifier)
d3.cubehelix(color)

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

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