컬러 그라데이션

섬네일|150px|선형 또는 축형 컬러 그라데이션

색과학에서 **컬러 그라데이션**(color gradient, 컬러 그라디언트, **색 변화** 또는 **색 진행**)은 일반적으로 영역을 채우는 데 사용되는 위치 의존적 색의 범위를 지정한다.

일련의 값에 색을 할당할 때, 그라데이션은 배색의 일종인 연속적인 컬러맵이다.
컴퓨터 그래픽스에서 스와치(swatch)라는 용어는 활성 색상의 팔레트를 의미하게 되었다.


RAL K5 Fächer RGB.jpg|RAL CLASSIC K5 컬러 팬
Guidapantonestandard.JPG|팬톤 컬러 가이드
Nuancier Pantone.jpg|팬톤 기본 색상 및 혼합 카드
HKS-K-Farbfaecher.jpg|HKS 컬러 팬


## 정의
* 컬러 그라데이션은 선형 순서로 배열된(순서가 있는) 색상의 집합이다.
* 연속 컬러맵은 색 공간을 통과하는 곡선이다.


3D RGB profile of the Linear Gray Continous color gradient.png|회색
3D RGB profile of cubehelix color gradient.png|cubehelix
0 3d 60 75 v.png|HSV 무지개
3D RGB profile of the Smooth Cool Warm diverging color gradient by Kenneth Moreland.png|발산형(diverging)


### 엄밀한 정의

컬러맵은 실수 r을 색 공간 C의 점 c와 연관시키는 함수이다.

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

이는 다음과 같이 정의된다:
* 색 공간 C
* 증가하는 표본화 지점의 수열 r_0 
* 색 공간에서의 일련의 값 c_0,..., c_m \in C
* 매핑 f(r_i) = c_i ,i = 0,...,m 
* 중간 값 r_{i-1} 을 보간하기 위한 규칙

여기서:
* r은 실수  r \in [r_{min}, r_{max}] \subset \mathbf{R} 이다.
* \mathbf{R}은 실수 집합이다.
* c는 색 = 색 공간 C의 점이다.

## 유형
분류 기준:
* 차원
* 이산(분류된, 배색) / 연속
* 모양
* 범위: 전체 또는 제한됨. 예: 채도 범위가 제한된 파스텔 색.
* 지각적 균일성
* 순서
** 순서형(연속적) 및 비순서형(범주적)
** 지각적 순서
* 색각 결핍 또는 색맹인을 위한 가독성 (색맹 친화적)
* 색 공간
* 색 깊이

### 차원
* 1D
* 2D: 다변량 지도, 이변량 또는 삼변량
* 3D

### 모양
#### 축형 그라데이션
섬네일|150px|두 점을 연결하는 흰색 선분이 있는 축형 컬러 그라데이션
축형 컬러 그라데이션(선형 컬러 그라데이션이라고도 함)은 두 점과 각 점의 색상으로 지정된다. 해당 점들을 통과하는 선을 따른 색상은 선형 보간법을 사용하여 계산된 다음, 그 선에 수직으로 확장된다. 디지털 이미징 시스템에서 색상은 일반적으로 선형이 아닌 감마 압축된 RGB 색상 값을 사용하여 RGB 색 공간에서 보간된다. CSS와 SVG는 모두 선형 그라데이션을 지원한다.

#### 방사형 그라데이션
섬네일|150px|방사형 컬러 그라데이션
방사형 그라데이션은 가장자리에 한 색상이 있고 중심에 다른 색상이 있는 원으로 지정된다. 색상은 중심으로부터의 거리에 기반한 선형 보간법으로 계산된다. 이는 점광원에서 구에 의해 반사되는 빛의 난반사를 근사화하는 데 사용될 수 있다. CSS와 SVG는 모두 방사형 그라데이션을 지원한다.

#### 원추형 그라데이션

섬네일|오른쪽|원추형 그라데이션
원추형 그라데이션은 중심점을 기준으로 회전하는 색상 전환이 있는 그라데이션이다(중심에서 퍼져 나가는 것이 아님). 원추형 그라데이션의 예로는 파이 차트와 색상환이 있다. 원추형 그라데이션은 때때로 "스윕 그라데이션(sweep gradients)"(오픈타입 사양 등에서) 또는 각도 그라데이션(angular gradients)이라고도 불린다.

#### 기타 모양
벡터 그래픽스에서 폴리곤 메시를 사용할 수 있다. 예를 들어, 어도비 일러스트레이터는 그라데이션 메시를 지원한다.

### 색 공간


LCH Gradient Example.png|LCH
HSV Gradient Example.png|HSV


#### 색 공간의 영향
그라데이션의 외관은 색상 자체뿐만 아니라 계산이 수행되는 색 공간에 따라서도 달라진다. 이 문제는 보통 두 가지 이유로 중요해진다:
* 색 공간에 대한 감마 보정. 약 2 정도의 전형적인 γ값에서, 두 숫자의 제곱의 합은 그들 합의 제곱보다 결코 크지 않기 때문에, 감마가 적용된 색 공간은 선형 강도 색 공간보다 더 어둡게 혼합되는 것을 쉽게 알 수 있다. 이 효과는 빨강과 녹색 같은 보색을 혼합할 때 가장 두드러지는데, 중간 색상이 기대했던 노랑 대신 어두운 색이 된다. 이 페이지의 방사형 및 원추형 예시는 이러한 오류를 명확히 보여준다.
* 기타 지각적 특성의 처리. 정보 시각화에서, "평탄한" 그라데이션이 진행 과정 중에 밝기와 채도에서 비단조적인 변화를 보이는 것은 바람직하지 않다. 인간의 시각은 이러한 특성을 강조하여 해석에 편향이나 혼란을 일으킬 수 있기 때문이다.

"선형" 혼합은 물리적인 빛의 혼합과 일치하며 오랫동안 게임 엔진의 표준이었다. 그러나 웹에서는 컬러 그라데이션과 이미지 스케일링 모두에서 오랫동안 무시되어 왔다. 그러한 혼합은 여전히 지각적으로 균일한 색 공간에서 수행된 것과는 미세한 차이가 있다.

## 예시

Cubehelix gnuplot palette.png
Gnuplot color gradient, defined as 0 0 0 0, 1 0 0 1, 3 0 1 0, 4 1 0 0, 6 1 1 1.png
P hot inv.gif
P hot.gif
Gnuplot color gradient RGB defined ( 0 "red", 0.5 "yellow", 1 "green" ).png
Matlab gradient.png
Gnuplot HSV gradient.png



Mono1.png| 단일 색상(단색형) 그라데이션
Le Jeu Analogue.png|다색(여러 색상) 컬러 그라데이션


### HSV 무지개


Gnuplot HSV gradient.png| RGB 2D 프로필
HSV 2D profile of the rainbow gradient.png|HSV 2D 프로필
0 3d 60 75 v.png|3D RGB 프로필


## 응용
* 히트 맵에서와 같이 정량적 또는 서수적 값을 나타낸다. 더 정밀한 설명은 컬러 박스에 있다.
** 데이터 시각화
* 영역 채우기: 많은 창 관리자가 화면 배경을 그라데이션으로 지정할 수 있도록 허용한다. 그라데이션에 의해 생성된 색상은 위치에 따라 연속적으로 변하여 매끄러운 색상 전환을 만든다.
* 다운로드, 파일 전송 또는 설치와 같은 확장된 컴퓨터 작업의 진행 상황을 시각화한다. 진행 표시줄 참조.
* 지도 채색

Color temperature black body 800-12200K.svg|흑체의 색온도 800-12200K
Colours of the visible light spectrum.png|가시광선 스펙트럼의 색상들
20180522 Color palette for warming stripes - ColorBrewer 9-class single hue.svg|분류된 컬러 그라데이션
1850- Warming stripes - global average surface temperature.svg|분류된 컬러 그라데이션을 사용하는 온난화 줄무늬


## 같이 보기

* 색차 (색 공간)
* 컬러 그레이딩
* 디더링
* 팔레트; 특별한 순서가 없는 한정된 색상 집합
* 지각적으로 균일한 색 공간
* 포스터리제이션
* 컬러 차트

## 각주

분류:컴퓨터 그래픽스