HEX → OKLCH 변환기
HEX 값을 입력하면 OKLCH 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
HEX를 RGB로 바꾼 뒤 Oklab을 거쳐 명도(L)·채도(C)·색상각(H)으로 변환합니다. OKLCH는 사람 눈이 느끼는 밝기에 맞춰 설계돼서, 색상만 바꿔도 밝기가 들쑥날쑥해지지 않습니다.
HEX
HEX 는 RGB 와 똑같은 빨강·초록·파랑 세 값을 16진수로 적은 것뿐입니다. 채널 하나가 두 글자로 떨어져서 짧고 헷갈리지 않기 때문에 CSS·디자인 도구·설정 파일 어디서나 쓰입니다. 대소문자는 상관없고, #abc 는 #aabbcc 의 줄임입니다. 여덟 자리로 쓰면 마지막 두 자리가 투명도라서 #FF000080 은 반투명 빨강이 됩니다.
OKLCH
OKLCH 는 HSL 과 같은 세 가지 개념(명도·채도·색상)을 쓰지만, 사람 눈이 실제로 반응하는 방식을 모델로 삼아 만들어졌습니다. L 이 같은 두 색은 실제로 비슷하게 밝아 보이고, 그래서 명도 단계를 만들거나 대비를 점검할 때 유용합니다. 또 sRGB 가 표현하지 못하는 색까지 닿기 때문에, 올바른 OKLCH 값인데도 정확히 대응하는 HEX 가 없을 수 있습니다. 변환기는 그런 값을 화면에 낼 수 있는 범위로 되돌려 놓습니다.
HEX → OKLCH 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
두 자리씩 끊기
#FF6347 → FF · 63 · 47 -
16진수를 10진수로
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
감마 해제(선형 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)
HEX → OKLCH 변환 예시
| Color | HEX | OKLCH |
|---|---|---|
| Red | #FF0000 |
oklch(62.8% 0.2577 29.23) |
| Tomato | #FF6347 |
oklch(69.6% 0.1955 32.32) |
| Orange | #FFA500 |
oklch(79.3% 0.171 70.67) |
| Gold | #FFD700 |
oklch(88.7% 0.1822 95.33) |
| Limegreen | #32CD32 |
oklch(74.2% 0.2286 142.83) |
| Teal | #008080 |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | #1E90FF |
oklch(65.2% 0.1901 253.21) |
| Royalblue | #4169E1 |
oklch(56% 0.1882 266.4) |
| Blueviolet | #8A2BE2 |
oklch(53.4% 0.2503 301.37) |
| Hotpink | #FF69B4 |
oklch(72.8% 0.1971 351.99) |
자주 묻는 것
채도(C) 값은 보통 얼마나 나오나요?
sRGB 색은 대부분 0 에서 0.37 사이에 들어옵니다. 회색은 0 입니다. 0.4 를 넘는 값도 모델상으로는 존재하지만 일반 화면으로는 표시할 수 없습니다.
디자인 토큰에 HSL 대신 OKLCH 를 쓰는 이유는?
명도 간격이 눈에도 같게 보이기 때문입니다. HSL 명도로 만든 단계는 노랑에서 급하게 뛰고 파랑에서 뭉치는 느낌이 나는데, 같은 단계를 OKLCH 로 만들면 어느 색상에서든 고르게 읽힙니다.
브라우저가 oklch() 를 지원하나요?
현재 주요 브라우저는 모두 지원합니다. 오래된 브라우저까지 챙기려면 HEX 를 먼저 쓰고 그 아래에 oklch() 를 두면 됩니다. 두 번째 줄을 이해하지 못하는 브라우저는 첫 줄을 그대로 씁니다.