Цвета

Справочник API ▸ Основной модуль ▸ Цвета

Создание визуализаций часто подразумевает работу с цветами. Хотя ваш браузер хорошо понимает цвета, он не предлагает много возможностей по их манипулированию через JavaScript. Поэтому D3 предоставляет представления для различных цветовых пространств, включая RGB, HSL, LAB и HCL, позволяя задавать, интерполировать, преобразовывать и изменять цвета (например, делать их светлее или темнее).

Примечание: хотя вы можете работать с цветами напрямую, вам также может быть полезно ознакомиться с встроенной интерполяцией цветов D3, такой как interpolateRgb, interpolateHsl и масштабирования. Если вам нужны цветовые палитры, см. ссылку на порядковые шкалы.

RGB

d3.rgb(r, g, b)

Создает новый цвет RGB с указанными значениями каналов r, g и b. Каждый канал должен быть задан как целое число в диапазоне [0,255]. Канал доступен как атрибут r, g и b возвращаемого объекта.

d3.rgb(цвет)

Создает новый цвет RGB, анализируя указанную строку цвет. Если цвет не является строкой, он приводится к строке; таким образом, этот конструктор также можно использовать для создания копии существующего цвета или принудительного преобразования цвета d3.hsl в RGB. Строка цвета может иметь различные форматы:

• десятичный RGB - "rgb(255,255,255)"
• десятичный HSL - "hsl(120,50%,20%)"
• шестнадцатеричный RGB - "#ffeeaa"
• сокращенный шестнадцатеричный RGB - "#fea"
• имя - "красный", "белый", "синий"

Полученный цвет хранится как значения каналов красного, зеленого и синего в виде целых чисел в диапазоне [0,255]. Каналы доступны как атрибуты r, g и b возвращаемого объекта. Список поддерживаемых имен цветов определяется CSS. Если цвет задан в пространстве HSL, он преобразуется в RGB аналогичным образом, как и в hsl.rgb.

rgb.brighter([k])

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

rgb.darker([k])

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

rgb.hsl()

Возвращает эквивалентный цвет в пространстве HSL; см. d3.hsl для подробностей о возвращаемом объекте. Преобразование из HSL в RGB описано в CSS3 Color Module Level 3; это обратная операция.

rgb.toString()

Преобразует этот цвет RGB в шестнадцатеричную строку, например, "#f7eaba".

HSL

d3.hsl(h, s, l)

Создает новый цвет HSL с указанным оттенком h, насыщенностью s и светлотой l. Оттенок должен быть числом в диапазоне [0,360]. Насыщенность и светлота должны быть в диапазоне [0,1] (а не в процентах). Эти значения доступны как атрибуты h, s и l возвращаемого объекта.

d3.hsl(цвет)

Создает новый цвет HSL, анализируя указанную строку цвет. Если цвет не является строкой, он приводится к строке; таким образом, этот конструктор также можно использовать для создания копии существующего цвета или принудительного преобразования цвета d3.rgb в HSL. Строка цвета может иметь различные форматы:

• десятичный RGB - "rgb(255,255,255)"
• десятичный HSL - "hsl(120,50%,20%)"
• шестнадцатеричный RGB - "#ffeeaa"
• сокращенный шестнадцатеричный RGB - "#fea"
• имя - "красный", "белый", "синий"

Полученный цвет хранится как оттенок в диапазоне [0,360] и значения насыщенности и светлоты в диапазоне [0,1]. Эти значения доступны как атрибуты h, s и l возвращаемого объекта. Список поддерживаемых имен цветов определяется CSS. Если цвет задан в пространстве RGB, он преобразуется в HSL аналогичным образом, как и в rgb.hsl.

hsl.brighter([k])

Возвращает более светлую копию этого цвета. Канал светлоты умножается на 0.7 ^ -k. Если значение гамма k опущено, оно по умолчанию равно 1.

hsl.darker([k])

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

hsl.rgb()

Возвращает эквивалентный цвет в пространстве RGB; см. d3.rgb для подробностей о возвращаемом объекте. Преобразование из HSL в RGB описано в CSS3 Color Module Level 3.

hsl.toString()

Преобразует этот цвет HSL в шестнадцатеричную строку RGB, например, "#f7eaba".

HCL

d3.hcl(h, c, l)

Создает новый цвет HCL с заданным оттенком h, цветовым тоном c и яркостью l. Оттенок должен быть числом в диапазоне [0,360]. Цветовой тон и яркость должны быть в диапазоне 0,1. Эти значения доступны как атрибуты h, c, и l возвращаемого объекта.

d3.hcl(цвет)

Создает новый цвет HCL, анализируя указанную строку цвет. Если цвет не является строкой, он приводится к строке; таким образом, этот конструктор также можно использовать для создания копии существующего цвета или принудительного преобразования цвета d3.rgb в HCL. Строка цвета может иметь различные форматы:

• десятичный RGB - "rgb(255,255,255)"
• десятичный HSL - "hsl(120,50%,20%)"
• шестнадцатеричный RGB - "#ffeeaa"
• сокращенный шестнадцатеричный RGB - "#fea"
• имя - "красный", "белый", "синий"

Полученный цвет хранится как оттенок в диапазоне [0,360], а значения цветового тона и яркости в диапазоне [0,1]. Эти значения доступны как атрибуты h, c и l возвращаемого объекта. Список поддерживаемых имен цветов определяется CSS.

hcl.brighter([k])

Возвращает более светлую копию этого цвета. Канал яркости умножается на 18 * k. Если значение гамма k опущено, оно по умолчанию равно 1. Максимальная возможная яркость — 100.

hcl.darker([k])

Возвращает более темную копию этого цвета. Канал яркости умножается на -18 * k. Если значение гамма k опущено, оно по умолчанию равно 1. Минимальная возможная темнота — 0.

hcl.rgb()

Возвращает эквивалентный цвет в пространстве RGB; см. d3.rgb для подробностей о возвращаемом объекте.

hcl.toString()

Преобразует этот цвет HCL в шестнадцатеричную строку RGB, например, "#f7eaba".

L*a*b*

d3.lab(l, a, b)

Создает новый цвет L*a*b* с указанными значениями светлоты l, a и b; a и b являются цветовыми измерениями. Светлота должна быть в диапазоне [0,100]. Эти значения доступны как атрибуты l, a, и b возвращаемого объекта.

d3.lab(цвет)

Создает новый цвет L*a*b*, анализируя указанную строку цвет. Если цвет не является строкой, он приводится к строке; таким образом, этот конструктор также можно использовать для создания копии существующего цвета или принудительного преобразования цвета d3.rgb в L*a*b*. Строка цвета может иметь различные форматы:

• десятичный RGB - "rgb(255,255,255)"
• десятичный HSL - "hsl(120,50%,20%)"
• шестнадцатеричный RGB - "#ffeeaa"
• сокращенный шестнадцатеричный RGB - "#fea"
• имя - "красный", "белый", "синий"

Полученный цвет хранится как светлота в диапазоне [0,100] и соответствующие значения a и b. Эти значения доступны как атрибуты l, a и b возвращаемого объекта. Список поддерживаемых имен цветов определяется CSS. Если цвет задан в пространстве RGB, он преобразуется в L*a*b*, сначала в пространство XYZ, а затем в RGB.

lab.brighter([k])

Возвращает более светлую копию этого цвета. Канал светлоты умножается на 18 * k. Если значение гамма k опущено, оно по умолчанию равно 1. Максимальная возможная яркость — 100.

lab.darker([k])

Возвращает более темную копию этого цвета. Канал светлоты умножается на -18 * k. Если значение гамма k опущено, оно по умолчанию равно 1. Минимальная возможная темнота — 0.

lab.rgb()

Возвращает эквивалентный цвет в пространстве RGB; см. d3.rgb для подробностей о возвращаемом объекте.

lab.toString()

Преобразует этот цвет L*a*b* в шестнадцатеричную строку RGB, например, "#f7eaba".

Цвет

Тип базового цвета d3.color предоставляется, если вы хотите расширить D3 дополнительными цветовыми пространствами. Этот тип позволяет автоматически интерполировать RGB с помощью d3.interpolate (обнаружен через instanceof d3.color).

d3.color()

Базовый конструктор для типов цветов.

color.rgb()

Возвращает эквивалент RGB этого цвета. Должен быть реализован всеми цветовыми пространствами.

color.toString()

Преобразует строку RGB в шестнадцатеричном формате, представляющую этот цвет, например, "#f7eaba".