d3-color

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

Например, рассмотрим цвет с именем «steelblue»:

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

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

const 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 от Дейва Грина

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

Расширения

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

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

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

• d3-color-difference

Установка

Если вы используете npm, npm install d3-color. Вы также можете загрузить последнюю версию с GitHub. Для обычного HTML в современных браузерах импортируйте d3-color из Skypack:

<script type="module">

import {rgb} from "https://cdn.skypack.dev/d3-color@3";

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

</script>

Для устаревших сред вы можете загрузить UMD пакет d3-color с npm-базированного CDN, такого как jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script>

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

</script>

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

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

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

Парсит указанную CSS Цвет Модуль Уровень 3 строку specifier, возвращая цвет RGB или HSL, а также CSS Цвет Модуль Уровень 4 шестнадцатеричные строки specifier. Если указанный спецификатор недействителен, возвращается 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.formatHex8() Источник

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

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

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

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

Возвращает строку, представляющую этот цвет в соответствии со спецификацией CSS Объектная Модель, например 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 Цвет Модуль Уровень 3, она анализируется и преобразуется в цветовое пространство RGB. См. color для примеров. Если указан экземпляр цвета color, он преобразуется в цветовое пространство RGB с помощью color.rgb. Отметим, что в отличие от color.rgb, этот метод всегда возвращает новый экземпляр, даже если color уже является цветом RGB.

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

Возвращает новый RGB цвет, где r, g, и b каналы ограничены диапазоном [0, 255] и округляются до ближайшего целого значения, и opacity ограничены диапазоном [0, 1].

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

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

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

hsl.clamp() Источник

Возвращает новый цвет HSL, где h канал ограничен диапазоном [0, 360), а s, l, и opacity каналы ограничены диапазоном [0, 1].

d3.lab(l, a, b[, opacity]) Source
d3.lab(specifier)
d3.lab(color)

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

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

d3.gray(l[, opacity]) Source

Создаёт новый цвет 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, они представляют значения каналов возвращаемого цвета; также может быть указана прозрачность. Если указана строка specifier в формате 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, они представляют значения каналов возвращаемого цвета; также может быть указана прозрачность. Если указана строка specifier в формате CSS Color Module Level 3, она анализируется и преобразуется в цветовое пространство Cubehelix. См. color для примеров. Если указан экземпляр color, он преобразуется в цветовое пространство RGB с помощью color.rgb, а затем преобразуется в Cubehelix. (Цвета, уже находящиеся в цветовом пространстве Cubehelix, пропускают преобразование в RGB.)