RGB → OKLCH 변환기
RGB 값을 입력하면 OKLCH 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
RGB를 선형 RGB로 되돌린 뒤 Oklab을 거쳐 L·C·H를 구합니다. HSL의 명도는 최대·최소 채널의 평균이라 색상마다 체감 밝기가 달라지는데, OKLCH의 L은 그 문제를 크게 줄인 값입니다.
RGB
RGB 는 화면이 색을 만드는 방식 그대로입니다. 빛 세 개를 더하며, 각각 0~255 입니다. 셋 다 0 이면 검정, 셋 다 255 면 흰색입니다. 하드웨어와 같은 구조라 정확하고 손실이 없지만, 사람이 다루기는 불편합니다. "조금만 더 따뜻하게" 하려면 두세 숫자를 동시에 바꿔야 하는데 어느 쪽으로 가야 할지가 눈에 보이지 않습니다.
OKLCH
OKLCH 는 HSL 과 같은 세 가지 개념(명도·채도·색상)을 쓰지만, 사람 눈이 실제로 반응하는 방식을 모델로 삼아 만들어졌습니다. L 이 같은 두 색은 실제로 비슷하게 밝아 보이고, 그래서 명도 단계를 만들거나 대비를 점검할 때 유용합니다. 또 sRGB 가 표현하지 못하는 색까지 닿기 때문에, 올바른 OKLCH 값인데도 정확히 대응하는 HEX 가 없을 수 있습니다. 변환기는 그런 값을 화면에 낼 수 있는 범위로 되돌려 놓습니다.
RGB → OKLCH 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
감마 해제(선형 RGB)
R 1 G 0.125 B 0.063 -
Oklab 좌표
L 0.696 a 0.165 b 0.105 -
극좌표로 — 채도와 색상각
C = √(a²+b²) = 0.196 H = atan2(b, a) = 32.3° -
결과
oklch(69.6% 0.1955 32.32)
RGB → OKLCH 변환 예시
| Color | RGB | OKLCH |
|---|---|---|
| Red | rgb(255, 0, 0) |
oklch(62.8% 0.2577 29.23) |
| Tomato | rgb(255, 99, 71) |
oklch(69.6% 0.1955 32.32) |
| Orange | rgb(255, 165, 0) |
oklch(79.3% 0.171 70.67) |
| Gold | rgb(255, 215, 0) |
oklch(88.7% 0.1822 95.33) |
| Limegreen | rgb(50, 205, 50) |
oklch(74.2% 0.2286 142.83) |
| Teal | rgb(0, 128, 128) |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | rgb(30, 144, 255) |
oklch(65.2% 0.1901 253.21) |
| Royalblue | rgb(65, 105, 225) |
oklch(56% 0.1882 266.4) |
| Blueviolet | rgb(138, 43, 226) |
oklch(53.4% 0.2503 301.37) |
| Hotpink | rgb(255, 105, 180) |
oklch(72.8% 0.1971 351.99) |
자주 묻는 것
변환할 때 RGB 를 먼저 선형화하는 이유는?
화면의 RGB 값은 감마가 적용된 값이라 실제 빛의 양에 비례하지 않습니다. 지각 기반 모델로 계산하려면 그 인코딩을 먼저 풀어야 합니다.
L 이 같은데 두 색이 달라 보입니다. 정상인가요?
정상입니다. L 은 체감 밝기만 맞춰 줍니다. 채도와 색상은 여전히 다르므로 한쪽이 훨씬 선명해 보일 수 있습니다. 단계를 만들 때 원하는 성질이 바로 이것입니다. 밝기는 맞고 색은 다른 상태입니다.
이 용도에는 LAB 보다 OKLCH 가 낫나요?
색을 고르고 조정하는 용도라면 그렇습니다. 기존 LAB 는 명도를 바꾸면 색상이 틀어져서 파랑이 보라 쪽으로 밀리는데, Oklab 은 바로 그 문제를 고치려고 만들어졌습니다.