Цветовой градиент

В науке о цвете цветовой градиент (также известный как цветовая шкала или цветовая прогрессия ) определяет диапазон зависящих от положения цветов , обычно используемых для заполнения области.

При назначении цветов набору значений градиент представляет собой непрерывную цветовую карту, тип цветовой схемы . В компьютерной графике термин «образец» ^[1] стал означать палитру активных цветов.

реальные цветовые градиенты или книги образцов
Цветной вентилятор RAL CLASSIC K5
Путеводитель по цветам Pantone
карты базовых цветов и смесей Pantone
Цветной вентилятор HKS

Определения

Цветовой градиент — это набор цветов, расположенных в линейном порядке (упорядоченном).
Непрерывная цветовая карта — это кривая, проходящая через цветовое пространство.

кривая через цветовое пространство RGB
серый
кубеспираль ^[2]
ВПГ радуга
расходящийся ^[3]

Строгое определение

Цветовая карта ^[4] — это функция , которая связывает вещественное значение r с точкой c в цветовом пространстве. $C$

f:[r_{min},r_{max}]\subset \mathbf {R} \to C

который определяется:

цветовое пространство C
возрастающая последовательность точек отбора проб $r_{0}<...<r_{m}\in [r_{min},r_{max}]$
ряд значений в цветовом пространстве $c_{0},...,c_{m}\in C$
картографирование $f(r_{i})=c_{i},i=0,...,m$
правило интерполяции промежуточных значений $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$

где:

r - действительное число $r\in [r_{min},r_{max}]\subset \mathbf {R}$
$\mathbf {R}$ это набор действительных чисел
c — цвет = точка в цветовом пространстве C

Типы

Критерии классификации:

измерение
дискретный (классифицированный, цветовая схема ) ^[5] / непрерывный
форма
диапазон: полный или ограниченный. Пример: пастельный цвет с ограниченным диапазоном насыщенности.
единообразие восприятия ^[6]
заказ
- упорядоченные (последовательные) и неупорядоченные (категориальные)
- порядок восприятия
удобочитаемость для людей с нарушением цветового зрения или дальтоников (для дальтоников)
цветовое пространство
глубина цвета

Измерение

1Д
2D: ^[7] Многомерная карта , двумерная или трехмерная.
3D

Формы

Осевые градиенты

Осевой цветовой градиент с сегментом белой линии, соединяющим две точки.

Осевой цветовой градиент (иногда его также называют линейным цветовым градиентом) задается двумя точками и цветом в каждой точке. Цвета вдоль линии, проходящей через эти точки, рассчитываются с использованием линейной интерполяции , а затем растягиваются перпендикулярно этой линии. В системах цифрового изображения цвета обычно интерполируются в цветовом пространстве RGB , часто с использованием гамма-сжатых значений цвета RGB, а не линейных. CSS и SVG поддерживают линейные градиенты. ^[8]^[9]

Радиальные градиенты

Радиальный градиент определяется как круг , имеющий один цвет по краю и другой в центре. Цвета рассчитываются путем линейной интерполяции на основе расстояния от центра. Это можно использовать для аппроксимации диффузного отражения света от точечного источника сферой . ^{[ нужна цитация ]} И CSS, и SVG поддерживают радиальные градиенты. ^[10]^[11]

Конические градиенты

Конические или конические градиенты — это градиенты с цветовыми переходами, повернутыми вокруг центральной точки (а не исходящими из центра). Примеры конических градиентов включают круговые диаграммы и цветовые круги. ^[12] Конические градиенты иногда называют «градиентами развертки» (например, в спецификации OpenType ) или угловыми градиентами.

Другие формы

В векторной графике можно использовать полигональные сетки , например градиентные сетки , поддерживаемые Adobe Illustrator .

Цветовое пространство

ЛЧ
ВПГ

Влияние цветового пространства

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

Гамма-коррекция цветового пространства. При типичном значении γ около 2 легко увидеть, что цветовое пространство с поддержкой гаммы будет темнее, чем цветовое пространство с линейной интенсивностью, поскольку сумма квадратов двух чисел никогда не превышает квадрата их суммы. Эффект наиболее заметен при смешивании дополнительных цветов, таких как красный и зеленый, при этом средний цвет становится темным, а не ожидаемым желтым. ^[13]^[14] Радиальные и конические примеры на этой странице ясно демонстрируют эту ошибку.
Обработка других свойств восприятия. При визуализации информации нежелательно, чтобы якобы «плоский» градиент по ходу показывал немонотонные изменения яркости и насыщенности. Это связано с тем, что человеческое зрение подчеркивает эти качества, вызывая предвзятость или путаницу в интерпретации. ^[15]

«Линейное» смешивание соответствует физическому смешиванию света и долгое время было стандартом в игровых движках . ^[16] Однако в Интернете этому долгое время пренебрегали как цветовыми градиентами, так и масштабированием изображения. ^[17] Такое сочетание по-прежнему имеет небольшое отличие от того, которое выполнено в перцептивно однородном цветовом пространстве. ^[18]

Примеры

2D RGB-профили

Градиент на цветовом круге HSV
Одноцветный ( монохроматический ) градиент
полихроматический (многоцветный) цветовой градиент

ВПГ радуга

ВПГ радуга
RGB 2D-профили
HSV 2D-профили
3D-профиль RGB

Приложения

представляют количественные или порядковые значения, как на тепловых картах . Более точное описание находится в цветной рамке. ^[19]
- визуализация данных
заполнить область: ^[20] многие оконные менеджеры позволяют задавать фон экрана в виде градиента. Цвета, создаваемые градиентом, постоянно меняются в зависимости от положения, создавая плавные цветовые переходы.
визуализируйте ход расширенной компьютерной операции, такой как загрузка, передача файлов или установка. Посмотреть индикатор выполнения
Раскраски картографических карт