RU Цвета

Вики ▸ Справка по API ▸ Ядро ▸ Цвета
English | Русский

При построении визуализации нередко приходится работать с цветами. Даже если ваш браузер понимает толк в цветах, он не сильно помогает работать с ними через JavaScript. Так что D3 предоставляет представления обоих цветовых пространств — RGB и HSL — позволяя интерполировать цвета и делать их ярче или темнее. Более подробную информацию о манипуляциях с цветом можно найти в статьях Википедии по RGB и HSL.

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

Если вы ищете палитры цветов, смотрите справку по порядковым шкалам.

RGB

# d3.rgb(r, g, b)

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

# d3.rgb(color)

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

• десятичный rgb — "rgb(255,255,255)"
• десятичный hsl — "hsl(120,50%,20%)"
• шестнадцатеричный rgb — "#ffeeaa"
• краткий шестнадцатеричный rgb — "#fea"
• именованный — "red", "white", "blue"

Результирующий цвет сохраняется как красный, зелёный и синий каналы в диапазоне [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(color)

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

• десятичный rgb — "rgb(255,255,255)"
• десятичный hsl — "hsl(120,50%,20%)"
• шестнадцатеричный rgb — "#ffeeaa"
• краткий шестнадцатеричный rgb — "#fea"
• именованный — "red", "white", "blue"

Результирующий цвет сохраняется как тон в диапазоне [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)

…

# d3.hcl(color)

…

# hcl.brighter([k])

…

# hcl.darker([k])

…

# hcl.rgb()

…

# hcl.toString()

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

L*a*b*

# d3.lab(l, a, b)

…

# d3.lab(color)

…

# lab.brighter([k])

…

# lab.darker([k])

…

# lab.rgb()

…

# lab.toString()

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