JavaScript로 색상을 동적으로 변경하거나 계산해야 할 때가 있습니다. HEX, RGB 변환부터 색상 조작까지 JS에서 색상을 다루는 방법을 정리합니다.
HEX to RGB 변환
parseInt(hex.slice(1, 3), 16)으로 R값을 얻습니다. 같은 방식으로 G, B를 추출합니다. 반대로 RGB를 HEX로 바꾸려면 toString(16)을 사용합니다.
색상 밝기 조절
RGB 각 값에 같은 비율을 곱하면 밝기가 변합니다. 하지만 HSL로 변환 후 L값을 조절하는 게 더 자연스럽습니다. 색상 변환기의 로직을 참고하세요.
라이브러리 활용
color, chroma.js, tinycolor2 같은 라이브러리를 쓰면 복잡한 변환을 쉽게 처리할 수 있습니다. color.lighten(0.2)처럼 직관적인 API를 제공합니다.
Canvas API
canvas의 getImageData()로 픽셀 색상을 추출할 수 있습니다. 이미지 색상 분석에 활용됩니다.
밝기 조절 알고리즘
단순히 R, G, B에 같은 값을 더하면 색이 흐려지거나 너무 밝아집니다. 채도를 유지하려면 HSL 변환 후 L만 조절하는 게 낫습니다. 색상 변환기의 로직을 참고해서 변환 함수를 직접 구현해볼 수 있습니다.
상대적 밝기와 대비
WCAG의 상대 밝기(relative luminance) 공식은 R, G, B를 다른 가중치로 계산합니다. 초록이 밝기 인지에 가장 큰 영향을 줍니다. 이 공식으로 두 색상의 대비율을 계산할 수 있습니다.
color-js 라이브러리
최신 color.js 라이브러리는 Color Level 4 스펙을 완전히 지원합니다. LCH, Lab, P3 색 공간까지 다룰 수 있어 고급 색상 작업에 적합합니다. npm install colorjs.io로 설치하고 문서를 참고하세요.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.