OKLCH → HEX 변환기
OKLCH 값을 입력하면 HEX 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
L·C·H를 Oklab의 직교좌표로 되돌리고 RGB를 거쳐 16진수로 적습니다. OKLCH는 sRGB보다 넓어서 화면에 낼 수 없는 값이 나올 수 있는데, 그럴 때는 가장 가까운 색으로 조정하고 알려줍니다.
OKLCH
OKLCH 는 HSL 과 같은 세 가지 개념(명도·채도·색상)을 쓰지만, 사람 눈이 실제로 반응하는 방식을 모델로 삼아 만들어졌습니다. L 이 같은 두 색은 실제로 비슷하게 밝아 보이고, 그래서 명도 단계를 만들거나 대비를 점검할 때 유용합니다. 또 sRGB 가 표현하지 못하는 색까지 닿기 때문에, 올바른 OKLCH 값인데도 정확히 대응하는 HEX 가 없을 수 있습니다. 변환기는 그런 값을 화면에 낼 수 있는 범위로 되돌려 놓습니다.
HEX
HEX 는 RGB 와 똑같은 빨강·초록·파랑 세 값을 16진수로 적은 것뿐입니다. 채널 하나가 두 글자로 떨어져서 짧고 헷갈리지 않기 때문에 CSS·디자인 도구·설정 파일 어디서나 쓰입니다. 대소문자는 상관없고, #abc 는 #aabbcc 의 줄임입니다. 여덟 자리로 쓰면 마지막 두 자리가 투명도라서 #FF000080 은 반투명 빨강이 됩니다.
OKLCH → HEX 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
극좌표를 직교좌표로
a = C·cos(H) = 0.165 b = C·sin(H) = 0.105 -
되돌리는 경로
Oklab → 선형 RGB → sRGB -
감마 적용(sRGB)
rgb(255, 99, 71) -
10진수를 16진수로
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
이어 붙이기
# + FF + 63 + 47 = #FF6347
OKLCH → HEX 변환 예시
| Color | OKLCH | HEX |
|---|---|---|
| Red | oklch(62.8% 0.2577 29.23) |
#FF0000 |
| Tomato | oklch(69.6% 0.1955 32.32) |
#FF6347 |
| Orange | oklch(79.3% 0.171 70.67) |
#FFA500 |
| Gold | oklch(88.7% 0.1822 95.33) |
#FFD700 |
| Limegreen | oklch(74.2% 0.2286 142.83) |
#32CD32 |
| Teal | oklch(54.3% 0.0927 194.77) |
#008080 |
| Dodgerblue | oklch(65.2% 0.1901 253.21) |
#1E90FF |
| Royalblue | oklch(56% 0.1882 266.4) |
#4169E1 |
| Blueviolet | oklch(53.4% 0.2503 301.37) |
#8A2BE2 |
| Hotpink | oklch(72.8% 0.1971 351.99) |
#FF69B4 |
자주 묻는 것
올바른 OKLCH 인데 HEX 로 바꾸면 탁해집니다.
sRGB 밖의 색을 지정하신 겁니다. 그 색에 해당하는 HEX 가 없으므로 변환기가 가장 가까운 색으로 옮깁니다. 보통 명도와 색상은 유지하고 채도를 낮추는 방식입니다.
L 은 0.6 으로 써야 하나요, 60% 로 써야 하나요?
둘 다 허용되고 뜻도 같습니다. 스타일시트에서는 백분율이 눈에 더 잘 들어오는 편입니다. 같은 방식으로 적힌 다른 값들과 나란히 놓일 때 특히 그렇습니다.
팔레트를 sRGB 안에 유지하려면?
채도를 대략 0.25 아래로 두면 어느 색상에서도 범위를 거의 벗어나지 않습니다. 그 위로는 안전한 상한이 색상마다 크게 달라집니다. 노랑·초록이 파랑보다 훨씬 먼저 한계에 닿습니다.