색상 코드 변환기는 HEX, 색 이름, rgb(), hsl(), hwb(), Lab, LCH, OKLab, OKLCH, color() 형식의 CSS 색을 읽어 HEX, rgb(), hsl(), oklch()로 써 줍니다. 모드를 고를 필요가 없고 결과는 입력할 때마다 갱신됩니다.
브랜드 HEX를 눈에 고르게 보이는 단계로 나누려고 oklch()로 바꿔야 할 때, 피그마의 8자리 HEX #0FA0FF80을 알파가 있는 rgb()로 바꿔야 할 때, CSS 색 이름을 hex 코드로 알고 싶을 때 쓰면 편합니다. 슬라이더 세 개로 같은 색을 OKLCH(명도·채도·색상)로 조금씩 움직이면 모든 표기가 함께 따라옵니다.
변환은 브라우저 안에서만 이루어지고 입력한 값은 서버로 전송되지 않습니다. color(display-p3 ...), color(rec2020 ...) 같은 광색역 입력도 sRGB로 바꾸며, 범위를 벗어난 색은 OKLCH 채도 감소와 클리핑으로 매핑하고 그 사실을 알려 줍니다.
사용 방법
색 입력하거나 고르기
입력란에 값을 넣거나 예제 칩, 색 선택기를 씁니다. HEX 3·4·6·8자리와 CSS 색 함수·색 공간을 받습니다. HSL의 채도·명도와 HWB의 흰색·검은색 비율은 퍼센트뿐 아니라 일반 숫자로도 쓸 수 있습니다. 범위를 벗어난 RGB와 HSL 채널은 CSS처럼 제한합니다.
투명도 지정하기
알파는 네 번째 값(
rgb(243 114 44 / 0.5),hsl(21 89% 56% / 50%))이나 8자리 HEX의 마지막 두 자리로 쓰거나 알파 슬라이더로 조절합니다. 알파가 1 미만이면 모든 결과에 알파가 붙고 HEX는 8자리가 됩니다.모든 표기 한눈에 보기
결과 패널에 HEX, RGB, HSL, OKLCH가 색 미리보기와 함께 나옵니다. 투명도가 보이도록 체크무늬 위에 색을 올렸고, 색이 CSS 이름과 정확히 일치하면
rebeccapurple같은 이름 배지가 붙습니다.OKLCH로 미세 조정
명도, 채도, 색상 슬라이더를 움직여 이웃한 색을 탐색합니다. 입력란이
oklch()값으로 바뀌므로 같은 상태에서 다른 표기를 바로 복사할 수 있습니다.복사하거나 공유하기
각 줄에 복사 버튼이 있고 전체 복사는 모든 줄을 한 번에 클립보드에 넣습니다. 공유 링크는 버튼을 눌렀을 때만 현재 색이 담긴 주소를 만들며 주소창은 자동으로 바뀌지 않습니다.
작동 원리
표기마다 담고 있는 것
HEX, rgb(), hsl()은 모두 sRGB 색 공간의 한 점을 가리킵니다. HEX는 RGB를 16진수로 적은 것으로 #F3722C는 빨강 F3=243, 초록 72=114, 파랑 2C=44입니다. #f80 같은 축약형은 각 자리를 두 번씩 쓰므로 #ff8800이며 #f08000이 아닙니다. 4자리·8자리 형식은 같은 16진수로 알파를 덧붙입니다.
hsl()은 같은 점을 색상(각도), 채도, 명도로 나타냅니다. oklch()는 Bjorn Ottosson이 설계한 OKLab 공간에서 표현하며, 명도 값이 같은 간격이면 눈에도 같은 간격으로 보입니다. 그래서 디자인 토큰과 접근성 있는 색 단계를 만들 때 많이 씁니다.
| 표기 | 받는 입력 | 범위 |
|---|---|---|
| HEX | #RGB, #RGBA, #RRGGBB, #RRGGBBAA | 채널당 00~FF |
| RGB | rgb(r g b / a) 또는 rgba(r, g, b, a) | 0~255 또는 0%~100%, 알파 0~1 또는 % |
| HSL | 쉼표나 공백을 쓰는 hsl(h s% l% / a) | 색상은 각도(순환), 채도·명도 0%~100% |
| HWB·Lab·color() | hwb(), lab(), lch(), oklab(), oklch(), color(srgb ...), color(srgb-linear ...), color(display-p3 ...), color(a98-rgb ...), color(prophoto-rgb ...), color(rec2020 ...), color(xyz ...), color(xyz-d50 ...), color(xyz-d65 ...) | none을 포함한 CSS Color 4 성분 범위 |
| 이름 | CSS 키워드 148개와 transparent | 대소문자 구분 없음 |
sRGB를 OKLCH로 바꾸는 방법
Ottosson의 기준 행렬을 따릅니다. 각 sRGB 채널을 선형화하고 LMS 원추세포 응답으로 섞은 뒤 세제곱근을 취하고 다시 섞어 OKLab 좌표 L, a, b를 얻습니다. OKLCH는 같은 공간의 극좌표로, 채도는 sqrt(a^2 + b^2), 색상은 atan2(b, a)를 각도로 나타낸 값입니다.
sRGB #FF0000
선형값 = (1, 0, 0)
l = cbrt(0.4122214708) = 0.7440
m = cbrt(0.2119034982) = 0.5962
s = cbrt(0.0883024619) = 0.4453
L = 0.2104542553*l + 0.793617785*m - 0.0040720468*s = 0.6280
C = 0.2577 H = 29.23도
=> oklch(0.628 0.258 29.2)알파, 색 범위, 반올림
알파는 분수로 보관하고 HEX에는 round(알파 x 255)로 적습니다. 그래서 0.5는 80이 되고 #80을 다시 읽으면 0.502입니다. 이 작은 오차는 8비트 알파의 특성이지 버그가 아닙니다.
OKLCH는 oklch(0.7 0.4 150)처럼 sRGB 화면이 표시하지 못하는 색도 표현합니다. 이 도구는 CSS Color 4 방식으로 OKLCH 채도를 낮추고 0.02 deltaEOK 안에서 클리핑한 뒤 그 사실을 표시합니다. HSL은 정수로 되돌렸을 때 원래 8비트 RGB가 달라지면 소수로 표시합니다.
실제 예시
#F3722CHEX #F3722C
RGB rgb(243, 114, 44)
HSL hsl(21.1, 89.2%, 56.3%)
OKLCH oklch(0.696 0.177 45.3)출력 HEX는 대문자이고 앞에 #이 붙습니다.
#0FA0FF80HEX #0FA0FF80
RGB rgb(15, 160, 255, 0.502)
HSL hsl(203.8, 100%, 52.9%, 0.502)
OKLCH oklch(0.686 0.176 246.7 / 0.502)0x80은 128이고 128 / 255 = 0.502입니다.
oklch(0.7 0.19 45)HEX #FA6E1D
RGB rgb(250, 110, 29)
HSL hsl(22, 95.7%, 54.7%)rebeccapurpleHEX #663399
RGB rgb(102, 51, 153)
HSL hsl(270, 50%, 40%)
OKLCH oklch(0.44 0.16 303.4)
CSS 색 이름: rebeccapurpleoklch(0.7 0.4 150)HEX #00C248
RGB rgb(0, 194, 72)
OKLCH oklch(0.709 0.21 147.1)
sRGB: 입력한 색(oklch, lab, lch, oklab 또는 넓은 색역의 color())이 sRGB 색역 밖에 있습니다. 표시된 값은 CSS Color 4 색역 매핑으로 선택한 sRGB 색으로, OKLCH에서 채도를 낮춘 뒤 차이가 0.02 deltaEOK 미만이면 클리핑합니다.채도를 낮춘 뒤 0.02 deltaEOK 안에서 클리핑하므로 결과의 명도와 색상도 조금 달라질 수 있습니다.
자주 하는 실수
같은 계열의 HEX와 OKLCH 숫자는 서로 바꿔 쓸 수 없습니다
oklch(0.7 0.19 45)는#FA6E1D이고 채도 0.177인 브랜드색#F3722C가 아닙니다. OKLCH는 소수 셋째 자리까지만 복사되므로 원색을 정확히 보존해야 하면 HEX나 RGB를 기준으로 두세요.OKLCH에서 퍼센트의 기준이 다릅니다
oklch()에서 명도 100%는 1이지만 채도 100%는 CSS 기준 0.4입니다.oklch(70% 50% 45)는 채도 0.2를 뜻합니다. 헷갈리지 않으려면 퍼센트 대신 숫자를 쓰세요.반올림된 HSL은 완전한 역변환이 아닙니다
도구는 같은 HEX로 되돌아가도록 필요할 때 HSL을 소수로 표시합니다. 직접 줄인
hsl(18, 89%, 56%)은 여전히#F3672B가 되므로 표시된 값을 그대로 복사하세요.알파가 있으면 HEX가 8자리가 됩니다
알파가 1 미만인 색은 8자리로 출력되는데, 오래된 도구는 6자리만 읽기도 합니다. 받는 쪽이 거부하면
rgb()줄을 쓰거나 배경과 섞어 단색으로 만드세요.넓은 색 영역의 색은 잘립니다
Display P3, A98 RGB, ProPhoto RGB, Rec. 2020, XYZ, Lab, LCH, HWB, OKLab을 읽지만 출력은 sRGB뿐입니다. sRGB 밖의 색은 색역 매핑되므로 선명한 P3 초록이 광색역 화면보다 탁하게 보일 수 있습니다.
자주 묻는 질문
HEX를 RGB로 어떻게 바꾸나요?
여섯 자리를 두 자리씩 세 쌍으로 나누고 각 쌍을 16진수로 읽으면 됩니다. #F3722C는 F3=243, 72=114, 2C=44이므로 rgb(243, 114, 44)입니다. 입력란에 HEX를 붙여 넣으면 도구가 바로 보여 줍니다.
HEX를 OKLCH로 바꾸려면 어떻게 하나요?
HEX를 붙여 넣고 OKLCH 줄을 읽으면 됩니다. #F3722C는 oklch(0.696 0.177 45.3)입니다. sRGB 채널을 선형화하고 OKLab 행렬을 적용한 뒤 a, b를 채도와 색상으로 바꾼 값입니다.
알파와 8자리 HEX도 지원하나요?
네. #RRGGBBAA, #RGBA, rgb(r g b / a), hsl(h s l / a), oklch(L C H / a)를 모두 읽고 결과에도 알파가 포함됩니다. 알파가 1 미만이면 HEX 출력이 8자리가 됩니다.
tomato 같은 CSS 색 이름을 입력해도 되나요?
됩니다. CSS 키워드 148개와 transparent를 대소문자 구분 없이 받습니다. 색이 키워드와 정확히 일치하면 결과에 이름 배지가 표시됩니다.
OKLCH 색이 변환하면 달라지는 이유는 무엇인가요?
sRGB 밖이면 CSS Color 4 방식으로 채도를 낮춘 뒤 0.02 deltaEOK 안에서 클리핑하므로 명도와 색상도 조금 달라질 수 있습니다. 범위 안이면 OKLCH 줄을 소수 셋째 자리로 반올림한 차이뿐입니다.
CSS에서 rgb()와 hsl()은 무엇이 다른가요?
표현하는 색은 같습니다. rgb()는 빨강·초록·파랑 빛의 양을, hsl()은 색상·채도·명도를 나타냅니다. 숫자 하나만 고쳐서 더 밝거나 탁한 변형을 만들 때는 hsl()이 편합니다.
입력한 색상 값이 어딘가로 전송되나요?
아니요. 변환은 브라우저 안에서 이루어지며 값은 서버로 전송되지 않습니다. 공유 링크는 버튼을 누른 경우에만 색을 주소에 담습니다.
더 깊이 읽기
마지막 업데이트: