켈빈 색온도를 sRGB 색으로 바꾸기: Tanner Helland의 근사식

About this offer

색온도 슬라이더가 들어가는 무언가를 만들다 보면, 예를 들어 야간 모드 미리보기나 조명 컨트롤, 사진 도구 같은 것을 만들다 보면, 곧 작은 질문 하나에 답해야 합니다. "2700 K" 옆에 있는 견본 색은 실제로 어떤 RGB 색이어야 할까요? 물리적으로 정확한 답은 흑체 스펙트럼과 CIE 등색 함수를 거쳐야 하는데, 미리보기 사각형 하나를 위해서는 너무 큰 장치입니다. UI 작업이라면 훨씬 짧은 길이 있습니다. 공식은 어디에서 왔나 2012년에 Tanner Helland는 자신의 블로그에 "How to Convert Temperature (K) to RGB: Algorithm and Sample Code"라는 글을 올렸습니다. 그는 여러 온도에서 흑체가 보이는 sRGB 색을 정리한 Mitchell Charity의 흑체 색 표를 가져와서, 채널마다 간단한 곡선 몇 개를 맞췄습니다. 그 결과는 로그와 거듭제곱 몇 개로 이루어진 식이고, 슬라이더가 움직일 때마다 계산해도 될 만큼 가볍습니다. 곡선에 대한 공로는 모두 그에게 있으며, 그의 글은 처음부터 끝까지 읽어 볼 만합니다. 코드 아래는 이 근사식을 JavaScript로 옮긴 것입니다. 곡선이 그 단위로 맞춰졌기 때문에, 먼저 온도를 100으로 나눕니다. function clamp(x, lo, hi) { return Math.min(hi, Math.max(lo, x)); } function kelvinToRgb(kelvin) { const t = clamp(kelvin, 1000, 40000) / 100; let r, g, b; if (t <= 66) { r = 255; g = -161.1195681661 + 99.4708025861 * Math.log(t); } else { r = 329.698727446 * Math.pow(t-60, -0.1332047592); g = 288.1221695283 * Math.pow(t-60, -0.0755148492); } if (t >= 66) { b = 255; } else if (t <= 19) { b = 0; } else { b = -305.0447927307 + 138.5177312231 * Math.log(t-10); } return { r: Math.round(clamp(r, 0, 255)), g: Math.round(clamp(g, 0, 255)), b: Math.round(clamp(b, 0, 255)), }; } kelvinToRgb(2700); // { r: 255, g: 167, b: 87 } kelvinToRgb(6600); // { r: 255, g: 255, b: 255 } 쓰기 전에 알아 둘 점 곡선은 1000 K에서 40000 K 사이에서 맞춰졌기 때문에, 함수는 입력을 그 범위로 제한합니다. 슬라이더가 그보다 더 내려간다면 1000 K 아래는 모두 같은 색으로 나오므로, 곡선이 만들어진 범위 밖에서 그 결과를 믿기보다는 그 구간에서 무엇을 보여 줄지 직접 정해야 합니다. 출력은 표가 정의한 sRGB입니다. 실제로 표시되는 디스플레이의 화이트 포인트와 감마는 무시하므로, 측정값이 아니라 보기 좋은 미리보기로 다루는 것이 맞습니다. 6600 K 근처에서 빨강과 초록 곡선이 만나 결과가 순백색이 되는데, 그래서 6500 K 근처의 "중립" 화면 설정이 이 함수에서는 흰색으로 보입니다. 마지막으로, 이것은 맞춘 곡선이라 조금 울퉁불퉁합니다. 각 구간은 매끄럽지만 t = 66 경계에서 곡선이 바뀌기 때문에, 그 경계를 가로지르는 그라데이션을 그리면 희미한 이음매가 보일 수 있습니다. 슬라이더 견본에서는 문제가 되지 않습니다. 소개 저희는 Sundown 을 만들면서 이런 미리보기를 씁니다. Sundown은 Jack Richards가 만든 Mac 메뉴 막대 앱으로, 디스플레이를 6500 K에서 500 K까지 100 K 단위로 따뜻하게 바꾸고, 일정에 따라 밝기를 낮춥니다. 흔히 쓰는 야간 모드가 켈빈으로 어디쯤인지 비교해 보고 싶다면, 저희 사이트의 Blue Light Calculator 에서 브라우저로 바로 확인할 수 있습니다.

Offer details

Provider

velog

Source

velog-rss

Score

54.33

Confidence

49%