컬러 그라데이션

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

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

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

 엄밀한 정의 

컬러맵The Good, the Bad, and the Ugly: A Theoretical Framework for the Assessment of Continuous Colormaps by Roxana Bujack, Terece L. Turton, Francesca Samsel, Colin Ware은 실수 r을 색 공간 의 점 c와 연관시키는 함수이다.

이는 다음과 같이 정의된다:
 색 공간 C
 증가하는 표본화 지점의 수열 
 색 공간에서의 일련의 값 
 매핑 
 중간 값 을 보간하기 위한 규칙

여기서:
 r은 실수 이다.
 은 실수 집합이다.
 c는 색 = 색 공간 C의 점이다.

 유형 
분류 기준:
 차원
 이산(분류된, 배색)which-color-scale-to-use-in-data-vis by Lisa Charlotte Rost / 연속
 모양
 범위: 전체 또는 제한됨. 예: 채도 범위가 제한된 파스텔 색.
 지각적 균일성Fabio Crameri: Scientific colour maps
 순서
 순서형(연속적) 및 비순서형(범주적)
 지각적 순서
 색각 결핍 또는 색맹인을 위한 가독성 (색맹 친화적)
 색 공간
 색 깊이

 차원 
 1D
 2D:A survey and task-based quality assessment of static 2D colormaps Author(s): Bernard, Jürgen; Steiger, Martin; Mittelstädt, Sebastian; Thum, Simon; Keim, Daniel; Kohlhammer, Jörn, In Kao, David L. (Ed.) ; Society for Imaging Science and Technology -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE-, Bellingham/Wash.: Visualization and Data Analysis 2015 : 9–11 February 2015, San Francisco, California Bellingham, WA: SPIE, 2015 (Proceedings of SPIE 9397)  다변량 지도, 이변량 또는 삼변량
 3D

 모양 
 축형 그라데이션 
섬네일|150px|두 점을 연결하는 흰색 선분이 있는 축형 컬러 그라데이션
축형 컬러 그라데이션(선형 컬러 그라데이션이라고도 함)은 두 점과 각 점의 색상으로 지정된다. 해당 점들을 통과하는 선을 따른 색상은 선형 보간법을 사용하여 계산된 다음, 그 선에 수직으로 확장된다. 디지털 이미징 시스템에서 색상은 일반적으로 선형이 아닌 감마 압축된 RGB 색상 값을 사용하여 RGB 색 공간에서 보간된다. CSS와 SVG는 모두 선형 그라데이션을 지원한다.Linear Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012Linear Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011

 방사형 그라데이션 
섬네일|150px|방사형 컬러 그라데이션
방사형 그라데이션은 가장자리에 한 색상이 있고 중심에 다른 색상이 있는 원으로 지정된다. 색상은 중심으로부터의 거리에 기반한 선형 보간법으로 계산된다. 이는 점광원에서 구에 의해 반사되는 빛의 난반사를 근사화하는 데 사용될 수 있다. CSS와 SVG는 모두 방사형 그라데이션을 지원한다.Radial Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012Radial Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011

 원추형 그라데이션 

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

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

 색 공간 

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

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

 예시 

 HSV 무지개 

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

 같이 보기 

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

 각주 

분류:컴퓨터 그래픽스