색구배

선형 또는 축 색 그라데이션

컴퓨터 그래픽스에서 색 그라데이션은 위치에 의존하는 색 범위를 지정합니다. 일반적으로 영역을 ^[1]채우는 데 사용됩니다.예를 들어 많은 창 관리자에서는 화면 배경을 그라데이션으로 지정할 수 있습니다.그라데이션에 의해 생성되는 색상은 위치에 따라 지속적으로 변화하며 부드러운 색 전환을 실현합니다.

색상 구배는 색상 램프 또는 색상 진행이라고도 합니다.값 집합에 색상을 할당할 때 그라데이션은 색상표의 일종인 연속 콜로맵입니다.

정의들

색 그라데이션은 선형 순서(순서)로 배열된 색상 세트입니다.
연속 콜로맵은 색 공간을 통과하는 곡선입니다.

RGB 색공간에서 곡선을 그리다
잿빛
입방정체^[2]
HSV 무지개
분기하다^[3]

엄밀한 정의

colormap은^[4] $색공간$ C $(\displaystyle$ C $)$ 의 점 c에 실수값 r을 연관짓는 함수입니다.

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

이는 다음 항목으로 정의됩니다.

색공간 C
샘플링 $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ r $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ < $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ . $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ . $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ . < $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ [ $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ n , $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ m $r_{0}<...<r_{m}\in [r_{min},r_{max}]$ $]{$ $display style$ r _ { $0$ }<... $<r_{m}\in [r_{min},r_{max}}}$
$c_{0},...,c_{m}\in C$ 공간 $c_{0},...,c_{m}\in C$ 0 $c_{0},...,c_{m}\in C$ , $c_{0},...,c_{m}\in C$ . $c_{0},...,c_{m}\in C$ , $c_{0},...,c_{m}\in C$ m $c_{0},...,c_{m}\in C$ C { $displaystyle c$ _ { $0$ , ... , $c$ _ { $m$ } \ $in$ C $c_{0},...,c_{m}\in C$ }의 일련의 값
$f(r_{i})=c_{i},i=0,...,m$ f $f(r_{i})=c_{i},i=0,...,m$ i $f(r_{i})=c_{i},i=0,...,m$ $f(r_{i})=c_{i},i=0,...,m$ $f(r_{i})=c_{i},i=0,...,m$ i $f(r_{i})=c_{i},i=0,...,m$ i $f(r_{i})=c_{i},i=0,...,m$ , $f(r_{i})=c_{i},i=0,...,m$ . $f(r_{i})=c_{i},i=0,...,m$ , $f(r_{i})=c_{i},i=0,...,m$ m { $displaystyle$ f $(r_{i$ } = $c_{i},$ i $f(r_{i})=c_{i},i=0,...,m$ = $0,$ ... $m}$
$r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ r $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ - $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ 1 < $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ < $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ i $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ [ $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ n , $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ $r_{i-1}<r<r_{i}\in [r_{min},r_{max}]$ $]{$ $displaystyle r_{i-1}$ < $r$ < r $_$ ${min$ , r $_$ { $max$ } $}$ 를 보간하는 규칙

여기서:

r은 실수 $r\in [r_{min},r_{max}]\subset \mathbf {R}$ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ [ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ i $r\in [r_{min},r_{max}]\subset \mathbf {R}$ , $r\in [r_{min},r_{max}]\subset \mathbf {R}$ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ $r\in [r_{min},r_{max}]\subset \mathbf {R}$ ] $r\in [r_{min},r_{max}]\subset \mathbf {R}$ R $r\in [r_{min},r_{max}]\subset \mathbf {R}$ \ \ $displaystyle$ r \ $in$ [ $r$ _ $min$ , r $_ max$ } \ $subset$ \ $mathbf$ { $R$ } $}$
$(\$ 은 $\mathbf {R}$ 실수의 집합입니다.
c는 색상 공간 C의 색상 = 포인트입니다.

종류들

분류 기준:

치수
이산(밀착형)/연속형
모양.
범위: full 또는 limited.예: 채도 범위가 제한된 파스텔 색상.
지각^[6] 균일성
주문
- 순서부여(시퀀셜) 및 비순서부여(시퀀셜)
- 지각 질서
색각 결핍자 또는 색맹자(색맹 친화적)를 위한 가독성
색공간

치수

1차원
이차원^[7]
3D

모양들

축방향 구배

두 점을 연결하는 흰색 선 세그먼트가 있는 축 색상 그라데이션

축 색 그라데이션(선형 색 그라데이션이라고도 함)은 두 점 및 각 점의 색으로 지정됩니다.이러한 점을 통과하는 선을 따라 색상은 선형 보간법을 사용하여 계산된 다음 해당 선에 수직으로 연장됩니다.디지털 이미징 시스템에서 색상은 보통 RGB 색 공간에서 보간되며, 종종 선형과 반대로 감마 압축 RGB 색 값을 사용합니다.CSS와 SVG는 모두 선형 ^[8]^[9]구배를 지원합니다.

반지름 그라데이션

반지름 색 그라데이션

반지름 그라데이션은 모서리에 한 가지 색상과 중심에 다른 색상이 있는 원으로 지정됩니다.색상은 중심으로부터의 거리를 기준으로 선형 보간으로 계산됩니다.이 값을 사용하여 점 광원에서 구에 ^{[citation needed]}의한 빛의 확산 반사를 근사할 수 있습니다.CSS와 SVG는 모두 반경 ^[10]^[11]구배를 지원합니다.

원뿔형 구배

원뿔 경사

원뿔 또는 원뿔 그라데이션은 (중앙에서 방사선이 아닌) 중앙점을 중심으로 색 전환이 회전하는 그라데이션입니다.원뿔 그라데이션의 예로는 파이 차트 및 컬러 ^[12]휠이 있습니다.

기타 도형

벡터 그래픽스에서는 Adobe Illustrator가 지원하는 그라데이션 메쉬 등 폴리곤 메쉬를 사용할 수 있습니다.

색공간

LCH
HSV

색공간 효과

그라데이션의 모양은 색상 자체뿐만 아니라 계산이 수행되는 색 공간에 따라 달라집니다.이 문제는 보통 다음 두 가지 이유로 중요해집니다.

색 공간에 대한 감마 보정.일반적인 θ가 약 2인 경우, 두 숫자의 제곱합이 두 숫자의 제곱합보다 크지 않기 때문에 감마 유효 색공간이 선형 강도 색공간보다 더 어둡게 혼합된다는 것을 쉽게 알 수 있다.그 효과는 빨간색과 녹색과 같은 보색들을 혼합하는 데 가장 뚜렷하게 나타나며, 중간 색상은 예상된 ^[13]^[14]노란색이 아닌 어두운 색이다.이 페이지의 방사형 및 원뿔형 예에서는 이 오류가 분명하게 나타납니다.
기타 지각 속성의 취급.정보 시각화에 있어서, 「평탄한」구배를 가지는 것은 바람직하지 않습니다만, 그 도중에 밝기와 채도의 비단조적인 편차를 나타내고 있습니다.이는 인간의 시력이 이러한 특성을 강조하여 ^[15]해석의 편견이나 혼란을 야기하기 때문이다.

"선형" 혼합은 물리적 빛 혼합과 일치하며 오랫동안 ^[16]게임 엔진에서 표준이 되어 왔습니다.그러나 웹상에서는 오랫동안 컬러 그라데이션과 이미지 ^[17]스케일링 모두 무시되어 왔습니다.이러한 혼합은 지각적으로 균일한 ^[18]색 공간에서 이루어지는 것과 여전히 미묘한 차이를 가지고 있습니다.

예

2D RGB 프로파일

HSV 컬러 휠의 경사
단일 색상(단색) 그라데이션
다색(다색조) 색구배

HSV 무지개

HSV 무지개
RGB 2D 프로파일
HSV 2D 프로파일
3D RGB 프로파일

도구들

CCC-Tool은^[19] 필요한 상호작용 ^[20]컴포넌트를 최소화하기 위해 Colormap 작성, 분석 및 테스트를 위한 일반적인 도구입니다.
Color Measures - 여러 색 공간에서 콜로맵의 속성을 수학적으로 분석할 수 있는 온라인 도구입니다.
Color Brewer - Cynthia Brewer의 연구를 바탕으로 Choropleth 지도 색상표 선택을 안내하는 웹 도구
Gencolormap - 시각화를 위한 컬러 맵을 생성하는 도구
Color Palette Helper - 멀티 색상, 멀티 스톱 색상 스케일 마스터용
색 그라데이션 - 온라인 그라데이션 작성 도구

「」를 참조해 주세요.

보카시(인쇄)
컬러 밴딩
색차이
색상 매핑: 한 이미지의 색상을 다른 이미지의 색상으로 매핑(변환)하는 기능
확산 곡선
이미지 그라데이션
옴브레
팔레트, 특정 순서가 없는 유한한 색상 세트
지각적으로 균일한 색공간
포스터화

레퍼런스

^ Eisenberg, J. David (2002). SVG Essentials. O'Reilly Media. p. 107. ISBN 0-596-00223-8.
^ 데이브 그린의 '큐브헬릭스' 색채 구성표
^ 과학적 시각화를 위한 색채 지도 분산 - 케네스 모어랜드
^ The Good, Bad, and the Ugly: Roxana Bujack, Terece L.의 연속 콜로맵 평가를 위한 이론적 프레임워크.터튼, 프란체스카 샘젤, 콜린 웨어
^ Lisa Charlotte Rost의 데이터에 사용할 수 있는 색상 배율
^ Fabio Crameri: 과학 색채 지도
^ 정적 2D 콜로맵의 조사 및 작업 기반 품질 평가 작성자:베르나르, 위르겐, 슈타이거, 마르틴, 미텔슈테트, 세바스찬;Thum, Simon, Keim, Daniel, Kohlhammer, Jörn, In Kao, David L. (Ed.); 영상과학기술협회 -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE -, Bellingham/Wash:2015년 시각화 및 데이터 분석: 2015년 2월 9일~11일, 캘리포니아 주 샌프란시스코 벨링햄, WA: SPIE, 2015(SPIE 9397 진행) ISBN 9781628414875
^ "CSS 이미지 값과 교환된 콘텐츠 모듈 레벨 3", W3C 후보 추천, 2012년 4월
^ "SVG 1.1 (Second Edition)", W3C 권장, 2011년 8월 리니어 그라데이션
^ "CSS 이미지 값과 교환된 콘텐츠 모듈 레벨 3", W3C 후보 추천, 2012년 4월
^ "SVG 1.1 (제2판)", W3C 권장, 2011년 8월
^ Mozilla 문서: CSS conic-gradient
^ Minute Physics (March 20, 2015). "Computer Color is Broken". YouTube. Archived from the original on December 21, 2021.
^ Novak, John (September 21, 2016). "What every coder should know about gamma".
^ Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. (2019). "Colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes". arXiv:1903.06490 [stat.CO].
^ "Chapter 24. The Importance of Being Linear". NVIDIA Developer.
^ "Web color is still broken".
^ "How software gets color wrong". bottosson.github.io.
^ CCC-툴
^ Nardini, Pascal; Chen, Min; Samsel, Francesca; Bujack, Roxana; Bottinger, Michael; Scheuermann, Gerik (2019). "The Making of Continuous Colormaps". IEEE Transactions on Visualization and Computer Graphics. 27 (6): 3048–3063. doi:10.1109/TVCG.2019.2961674. PMID 31870986. S2CID 209461386.

[1] Eisenberg, J. David (2002). SVG Essentials. O'Reilly Media. p. 107. ISBN 0-596-00223-8.

[2] 데이브 그린의 '큐브헬릭스' 색채 구성표

[3] 과학적 시각화를 위한 색채 지도 분산 - 케네스 모어랜드

[4] The Good, Bad, and the Ugly: Roxana Bujack, Terece L.의 연속 콜로맵 평가를 위한 이론적 프레임워크.터튼, 프란체스카 샘젤, 콜린 웨어

[5] Lisa Charlotte Rost의 데이터에 사용할 수 있는 색상 배율

[6] Fabio Crameri: 과학 색채 지도

[7] 정적 2D 콜로맵의 조사 및 작업 기반 품질 평가 작성자:베르나르, 위르겐, 슈타이거, 마르틴, 미텔슈테트, 세바스찬;Thum, Simon, Keim, Daniel, Kohlhammer, Jörn, In Kao, David L. (Ed.); 영상과학기술협회 -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE -, Bellingham/Wash:2015년 시각화 및 데이터 분석: 2015년 2월 9일~11일, 캘리포니아 주 샌프란시스코 벨링햄, WA: SPIE, 2015(SPIE 9397 진행) ISBN 9781628414875

[8] "CSS 이미지 값과 교환된 콘텐츠 모듈 레벨 3", W3C 후보 추천, 2012년 4월

[9] "SVG 1.1 (Second Edition)", W3C 권장, 2011년 8월 리니어 그라데이션

[10] "CSS 이미지 값과 교환된 콘텐츠 모듈 레벨 3", W3C 후보 추천, 2012년 4월

[11] "SVG 1.1 (제2판)", W3C 권장, 2011년 8월

[12] Mozilla 문서: CSS conic-gradient

[13] Minute Physics (March 20, 2015). "Computer Color is Broken". YouTube. Archived from the original on December 21, 2021.

[14] Novak, John (September 21, 2016). "What every coder should know about gamma".

[Zeileis2019-15] Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. (2019). "Colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes". arXiv:1903.06490 [stat.CO].

[16] "Chapter 24. The Importance of Being Linear". NVIDIA Developer.

[17] "Web color is still broken".

[18] "How software gets color wrong". bottosson.github.io.

[19] CCC-툴

[20] Nardini, Pascal; Chen, Min; Samsel, Francesca; Bujack, Roxana; Bottinger, Michael; Scheuermann, Gerik (2019). "The Making of Continuous Colormaps". IEEE Transactions on Visualization and Computer Graphics. 27 (6): 3048–3063. doi:10.1109/TVCG.2019.2961674. PMID 31870986. S2CID 209461386.

[1]

[2]

[3]

[4]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

Search

색구배

네임스페이스

더

목차