RGBA 색상을 회색조(grayscale)로 변경하기

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 에서 확인할 수 있다.

 

 

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

 

 

 

 

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

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