티스토리 뷰
반응형
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 에서 확인할 수 있다.
수식을 통해 선형 값을 얻은 후, 다음 감마 보정을 통해 다시 비선형화 한다.
좀 더 상세한 내용은 필자가 번역한 위키의 섹션을 참고하자.
반응형
'프론트엔드' 카테고리의 다른 글
사이트 성능 측정 (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 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total