티스토리 뷰

반응형

RGB

색상을 회색조로 변경하기 위해선 각각의 RGB에 적절한 가중합을 적용하여 선형 휘도를 얻고 RGB 값을 모두 계산된 선형 휘도 값으로 대체하면 된다.

선형 휘도는 다음과 같은 수식을 통해 얻을 수 있다. 인간의 시각은 초록색에 가장 민감하기 때문에 가장 큰 계수를 갖고, 파란색에 가장 덜 민감하기 때문에 가장 작은 계수를 갖는다.

 

 

r, g, b, a 값이 주어졌을 때 다음과 같이 사용된다.

// Javascript
const y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
const grayscale = `rgba(${y}, ${y}, ${y}, ${a})`;

 

 

 

sRGB

전형적인 sRGB 색상은 비선형인데 이를 회색조로 변경하기 위해선 선형화 처리를 해야한다.

선형화 작업은 감마 보정을 통해 이루어지며, 그 이후에 선형 색상에 적절한 가중합을 적용하여 선형 휘도를 얻고 다시 감마 보정을 통해 비선형화하여 결과를 얻는다.

 

수식은 wikipedia 에서 확인할 수 있다.

 

 

수식을 통해 선형 값을 얻은 후, 다음 감마 보정을 통해 다시 비선형화 한다.

 

 

 

 

좀 더 상세한 내용은 필자가 번역한 위키의 섹션을 참고하자.

 

회색조 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 사진술, 컴퓨팅, 그리고 표색계에서, 회색조[1] 또는 그레이스케일(grayscale, greyscale) 디지털 영상은 각 화소의 값이 빛의 양을 나타내는 하나의 샘플인 이미지를 가리키며, 광도의 정보만을 전달한다. 이러한 종류의 이미지는 흑백 또는 단색화로도 알려져 있으며 회색 음영으로 이루어져 있어서 가장 여린 광도의 "검정"부터 가장 센 광도의 "백색"에 이르기까지 다양하다.[2] 회색조 이미지는 1비트 투톤의 흑

ko.wikipedia.org

반응형

'프론트엔드' 카테고리의 다른 글

사이트 성능 측정  (0) 2020.05.27
Lighthouse no_fcp 에러  (0) 2020.04.21
[Vue] storybook - knobs 적용하기  (0) 2020.01.07
[TIF] scss partial 파일과 import  (0) 2019.09.04
css transition에 opacity 적용 시 주의사항  (0) 2019.04.18
댓글