색상 변환기
HEX, RGB, HSL, OKLCH 간 변환을 실시간 미리보기와 함께
로컬 실행
loading…
이 도구에 대해
#hex, rgb(), hsl(), CSS 색상 이름 등 흔한 표기법 어느 것으로든 색상을 입력하면 모든 형식을 한 번에 얻습니다. HEX, RGB, HSL, OKLCH가 실시간 색상 견본 옆에 나란히 표시됩니다. 알파 채널은 형식 간에 보존되며, 출력은 현재의 스타일시트에 깔끔하게 붙여넣을 수 있는 현대 CSS 문법(공백 구분 채널)을 사용합니다.
OKLCH가 포함된 이유는 그것이 CSS 색상이 향하는 방향이기 때문입니다. HSL과 달리 OKLCH의 명도 축은 지각적으로 균일해서, 같은 L을 가진 두 색상은 실제로 똑같이 밝아 보이고, 색상(hue)을 조정해도 지각 밝기가 의도치 않게 바뀌지 않습니다. 기존 팔레트를 OKLCH로 변환하는 것이 일관된 색상 스케일을 만드는 첫걸음입니다.
변환 수식은 공개된 sRGB↔OKLab 변환을 사용해 로컬에서 실행되며, 값은 왕복이 성립합니다. HSL 입력에서 돌려받는 RGB는 브라우저가 계산할 값과 정확히 일치합니다.
자주 묻는 질문
- 왜 HSL과 OKLCH의 명도 값이 서로 다른가요?
- HSL의 명도는 인간 시각이 아니라 RGB 값의 기하학적 속성입니다. hsl(60 100% 50%)의 노랑은 hsl(240 100% 50%)의 파랑보다 훨씬 밝아 보입니다. L이 동일한데도요. OKLCH의 L 축은 지각과 일치하도록 설계되어, L이 같으면 겉보기 밝기도 같습니다. 이 불일치가 OKLCH가 존재하는 이유 그 자체입니다.
- 알파 값은 무슨 의미이고 각 형식에서 어디에 들어가나요?
- 알파는 불투명도로, 0(투명)에서 1(불투명)까지입니다. 8자리 hex에서는 마지막 바이트(#RRGGBBAA)이고, 현대 함수형 문법에서는 슬래시 뒤에 옵니다. rgb(76 141 255 / 0.5). 이 변환기는 모든 형식에 알파를 자동으로 실어 나릅니다.
- 모든 OKLCH 색상을 sRGB로 표시할 수 있나요?
- 아니요. OKLCH는 넓은 색역을 커버하며, 일부 채도/명도 조합에는 sRGB 대응이 없습니다. sRGB에서 출발하는 변환(이 도구가 하는 것)은 항상 표현 가능 범위에 머뭅니다. 반대 방향에서는 색역 밖 색상을 잘라내거나 매핑해야 하는데, 선명한 P3 초록이 sRGB 화면에서 칙칙해 보이는 이유가 바로 그것입니다.
- 왜 쉼표 대신 공백으로 구분한 rgb(76 141 255)인가요?
- CSS Color Module Level 4가 공백 구분 채널과 선택적 /alpha 를 표준화했고, 모든 현대 브라우저가 이를 지원합니다. 쉼표 형식도 여전히 동작하지만, 공백 형식이 새 명세들(그리고 이 도구)이 사용하는 형식입니다.