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

редактировать

Линейный или осевой цветовой градиент

В компьютерной графике цветовой градиент определяет диапазон зависимых от позиции цветов, обычно используется для заполнения области. Например, многие менеджеры окон позволяют задавать фон экрана как градиент. Цвета, создаваемые градиентом, непрерывно меняются в зависимости от положения, обеспечивая плавные переходы цветов.

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

Содержание

1 Определения
- 1.1 Строгое определение
2 Типа
- 2.1 Осевые градиенты
- 2.2 Радиальные градиенты
- 2.3 Конические градиенты
- 2.4 Другие формы
3 Влияние цветового пространства
4 Примеры
- 4.1 Радуга HSV
5 Инструменты
6 См. Также
7 Ссылки

Определения

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

кривая через цветовое пространство RGB
серый
cubehelix
HSV радуга
расходящиеся

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

Цветовая карта - это функция, которая связывает реальное значение r с точкой c в цветовом пространстве $C {\ displaystyle C}$ $C$

f: [rmin, rmax] ⊂ R → C {\ displaystyle f: [r_ {min}, r_ {max] }] \ subset \ mathbf {R} \ to C}

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

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

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

где:

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

Типы

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

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

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

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

Радиальный цветовой градиент

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

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

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

Конические или конические градиенты - это градиенты с переходами цвета, повернутыми вокруг центральной точки (а не излучающими от центра). Примеры конических градиентов включают круговые диаграммы и цветовые круги.

Другие формы

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

Эффект цветового пространства

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

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

Примеры

Профили 2D RGB

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

радуга HSV

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

Инструменты

CCC-Tool - это общий инструмент для создания, анализа и тестирования цветовых карт с целью минимизировать необходимые компоненты взаимодействия.
ColorMeasures онлайн-инструмент, позволяющий математически анализировать свойства цветовой карты в нескольких цветовых пространствах
Цвет Брюэр - Веб-инструмент для руководства по выбору цветовых схем хороплетной карты, основанный на исследовании Dr. Cynthia Brewer
gencolormap - инструменты для создания цветовых карт для визуализации
Chroma.js Color Palette Helper для освоения многоцветных и многоступенчатых цветовых шкал

См. Также

Викибуки книга на тему: Цвета / Цветовой градиент

Викискладе есть материалы, связанные с Цветовой градиент.

Градиент изображения
Цветовые полосы
Постеризация
Кривая диффузии
Цветовое различие
перцептивно однородное цветовые пространства
Цветовое отображение ; функция, которая отображает (преобразует) цвета одного изображения в цвета другого изображения.
Палитра ; конечный набор цветов в произвольном порядке
Bokashi (печать)

Ссылки