В науке о цвете цветовой градиент (также известный как цветовая шкала или цветовая прогрессия ) определяет диапазон зависящих от положения цветов , обычно используемых для заполнения области.
При назначении цветов набору значений градиент представляет собой непрерывную цветовую карту, тип цветовой схемы . В компьютерной графике термин «образец» [1] стал означать палитру активных цветов.
Осевой цветовой градиент с сегментом белой линии, соединяющим две точки.
Осевой цветовой градиент (иногда его также называют линейным цветовым градиентом) задается двумя точками и цветом в каждой точке. Цвета вдоль линии, проходящей через эти точки, рассчитываются с использованием линейной интерполяции , а затем растягиваются перпендикулярно этой линии. В системах цифрового изображения цвета обычно интерполируются в цветовом пространстве RGB , часто с использованием гамма-сжатых значений цвета RGB, а не линейных. CSS и SVG поддерживают линейные градиенты. [8] [9]
Радиальные градиенты
Радиальный цветовой градиент
Радиальный градиент определяется как круг , имеющий один цвет по краю и другой в центре. Цвета рассчитываются путем линейной интерполяции на основе расстояния от центра. Это можно использовать для аппроксимации диффузного отражения света от точечного источника сферой . [ нужна цитация ] И CSS, и SVG поддерживают радиальные градиенты. [10] [11]
Конические градиенты
конический градиент
Конические или конические градиенты — это градиенты с цветовыми переходами, повернутыми вокруг центральной точки (а не исходящими из центра). Примеры конических градиентов включают круговые диаграммы и цветовые круги. [12] Конические градиенты иногда называют «градиентами развертки» (например, в спецификации OpenType ) или угловыми градиентами.
Внешний вид градиента зависит не только от самого цвета, но и от цветового пространства, в котором выполняются расчеты. Проблема обычно становится важной по двум причинам:
Гамма-коррекция цветового пространства. При типичном значении γ около 2 легко увидеть, что цветовое пространство с поддержкой гаммы будет темнее, чем цветовое пространство с линейной интенсивностью, поскольку сумма квадратов двух чисел никогда не превышает квадрата их суммы. Эффект наиболее заметен при смешивании дополнительных цветов, таких как красный и зеленый, при этом средний цвет становится темным, а не ожидаемым желтым. [13] [14] Радиальные и конические примеры на этой странице ясно демонстрируют эту ошибку.
Обработка других свойств восприятия. При визуализации информации нежелательно, чтобы якобы «плоский» градиент по ходу показывал немонотонные изменения яркости и насыщенности. Это связано с тем, что человеческое зрение подчеркивает эти качества, вызывая предвзятость или путаницу в интерпретации. [15]
«Линейное» смешивание соответствует физическому смешиванию света и долгое время было стандартом в игровых движках . [16] Однако в Интернете этому долгое время пренебрегали как цветовыми градиентами, так и масштабированием изображения. [17] Такое сочетание по-прежнему имеет небольшое отличие от того, которое выполнено в перцептивно однородном цветовом пространстве. [18]
заполнить область: [20] многие оконные менеджеры позволяют задавать фон экрана в виде градиента. Цвета, создаваемые градиентом, постоянно меняются в зависимости от положения, создавая плавные цветовые переходы.
визуализируйте ход расширенной компьютерной операции, такой как загрузка, передача файлов или установка. Посмотреть индикатор выполнения
книги образцов (например, в книге образцов цветов бумаги, веере цветов RAL CLASSIC K5 или шкалах цветов Pantone)
Рекомендации
^ cssgradient: Образцы градиентов CSS
^ Цветовая схема «кубиспирали» Дэйва Грина.
^ Расходящиеся цветовые карты для научной визуализации - Кеннет Морленд
^ Хороший, плохой и злой: теоретическая основа оценки непрерывных карт цветов Роксана Бьюджак, Терес Л. Тертон, Франческа Самсель, Колин Уэр
^ какую цветовую шкалу использовать в данных, Лиза Шарлотта Рост
^ Фабио Крамери: Научные цветные карты
^ Исследование и оценка качества статических 2D-цветовых карт на основе задач. Автор(ы): Бернард, Юрген; Штайгер, Мартин; Миттельштадт, Себастьян; Тум, Саймон; Кейм, Дэниел; Кольхаммер, Йорн, Ин Као, Дэвид Л. (Ред.); Общество науки и технологий визуализации -IS&T-; Общество инженеров фотооптических приборов -SPIE-, Беллингем/Вашингтон: Визуализация и анализ данных, 2015: 9–11 февраля 2015 г., Сан-Франциско, Калифорния Беллингем, Вашингтон: SPIE, 2015 (Труды SPIE 9397) ISBN 9781628414875
^
Линейные градиенты в «Значениях изображений CSS и замененном модуле контента, уровень 3», Кандидатская рекомендация W3C, апрель 2012 г.
^
Линейные градиенты в «SVG 1.1 (второе издание)», Рекомендация W3C, август 2011 г.
^
Радиальные градиенты в «Значениях изображений CSS и замененном модуле контента, уровень 3», Кандидатская рекомендация W3C, апрель 2012 г.
^
Радиальные градиенты в «SVG 1.1 (второе издание)», Рекомендация W3C, август 2011 г.
^ Документы Mozilla: Конический градиент CSS
^ Минута физики (20 марта 2015 г.). «Цвет компьютера нарушен». YouTube . Архивировано из оригинала 21 декабря 2021 года.
↑ Новак, Джон (21 сентября 2016 г.). «Что каждый программист должен знать о гамме».
^ Зейлейс, Ахим; Фишер, Джейсон С.; Хорник, Курт; Ихака, Росс; МакУайт, Клэр Д.; Мюррелл, Пол; Штауффер, Рето; Вилке, Клаус О. (2019). « Цветовое пространство : набор инструментов для управления и оценки цветов и палитр». Журнал статистического программного обеспечения . 96 . arXiv : 1903.06490 . doi : 10.18637/jss.v096.i01.