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 поддерживает цветовые пространства, предназначенные для человека:

• CIELAB (также известен как «Lab»)
• CIELCh_ab (также известен как «LCh» или «HCL»)
• Цветовое пространство Cubehelix от Dave Green

Cubehelix характеризуется монотонным изменением светлоты, тогда как CIELAB и его полярная форма CIELCh_ab являются перцептивно равномерными.

Расширения

Дополнительные цветовые пространства см.:

• d3-cam16
• d3-cam02
• d3-hsv
• d3-hcg
• d3-hsluv

Для измерения различий в цветах см.:

• d3-color-difference

Установка

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

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

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

</script>

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

Справочник по API

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

Парсит указанную строку specifier CSS Color Module Level 3, возвращая цвет RGB или HSL, а также строки с шестнадцатеричным представлением цвета из CSS Color Module Level 4. Если указанный спецификатор некорректен, возвращается 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
• #ffeeaa22
• #fea2
• steelblue

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

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

color.opacity

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

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

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

color.copy([values]) Источник

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

color.copy({opacity: 0.5})

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

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

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

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

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

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

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

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

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

Возвращает строку, представляющую этот цвет в соответствии со спецификацией CSS Color Module Level 3, например hsl(257, 50%, 80%) или hsla(257, 50%, 80%, 0.2). Если этот цвет не отображается, вместо этого возвращается подходящий отображаемый цвет, обрезая значения каналов S и L до интервала [0, 100].

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

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

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

Псевдоним для color.formatRgb.

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

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

Если заданы r, g и b, они представляют значения каналов возвращаемого цвета; также может быть задана opacity. Если задана строка 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, они представляют значения каналов возвращаемого цвета; также может быть задана opacity. Если задана строка 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)

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

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

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

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

d3.hcl(h, c, l[, opacity]) Source
d3.hcl(specifier)
d3.hcl(color)

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

d3.lch(l, c, h[, opacity]) Source
d3.lch(specifier)
d3.lch(color)

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

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

d3.cubehelix(h, s, l[, opacity]) Source
d3.cubehelix(specifier)
d3.cubehelix(color)

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

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