색상 변환기

색상 변환기 소개

HEX, RGB, HSL 중 아무 형식이나 붙여 넣으면 형식을 알아서 판별해 세 가지로 모두 바꿔 줍니다. #fff 같은 세 자리 표기, rgb(255 0 0)처럼 쉼표 없는 CSS 최신 문법, 앞에 아무것도 없는 「255, 128, 0」도 받습니다. #rrggbbaa처럼 알파가 붙은 값은 알파를 버리고 색만 변환합니다.

세 형식은 모두 같은 sRGB 색 공간을 다른 방식으로 적은 것입니다. HEX와 RGB는 완전히 같은 정보이고, HSL은 그 RGB를 색상환 위의 각도·채도·밝기로 다시 배치한 것입니다. 그래서 변환 자체는 단순하지만, HSL의 L(명도)이 사람이 느끼는 밝기와 다르다는 점은 디자인에서 자주 문제를 일으킵니다.

HSL의 명도 50%는 같은 밝기가 아니다

노랑 #ffff00은 hsl(60, 100%, 50%), 파랑 #0000ff는 hsl(240, 100%, 50%)입니다. L 값이 똑같이 50%지만 화면에서 노랑은 눈부시게 밝고 파랑은 어둡습니다. HSL의 L은 가장 큰 채널과 가장 작은 채널의 평균일 뿐이라서, 사람 눈이 초록에 가장 민감하고 파랑에 가장 둔감하다는 사실이 반영되지 않습니다.

WCAG가 명암비 계산에 쓰는 상대 휘도는 선형화한 R·G·B에 0.2126, 0.7152, 0.0722를 곱해 더합니다. 이 식으로 보면 노랑의 휘도는 약 0.93, 파랑은 약 0.07입니다. HSL의 L만 맞춰서 버튼 색 여러 개를 만들면 어떤 것은 흰 글씨가 잘 읽히고 어떤 것은 안 읽히는 이유가 이것입니다.

HSV, OKLCH는 무엇이 다른가

이 도구가 다루는 것은 HEX·RGB·HSL 세 가지입니다. 그래픽 프로그램의 색 선택기에서 자주 보는 HSV(HSB)는 HSL과 색상 각도는 같지만, 밝기 축을 「가장 큰 채널 값」으로 정의합니다. 그래서 순색 빨강이 HSL에서는 L 50%, HSV에서는 V 100%로 표시됩니다. 같은 이름의 S(채도)도 두 모델에서 계산식이 달라 값이 다르게 나옵니다.

OKLCH는 2020년 Björn Ottosson이 발표한 Oklab 색 공간을 원통 좌표(명도 L, 채도 C, 색상 H)로 쓴 것으로, CSS Color Level 4에 oklch() 함수로 들어갔습니다. 이 모델은 L이 사람이 느끼는 밝기에 가깝게 설계되어, 노랑은 약 97%, 파랑은 약 45%로 나옵니다. 색상 H만 바꾸고 L을 고정하면 밝기가 비슷하게 유지되는 팔레트를 만들 수 있다는 것이 HSL과의 가장 큰 차이입니다. 이 도구는 OKLCH 변환을 지원하지 않습니다.

sRGB 색역과 HEX의 한계

HEX와 rgb()의 0~255 값은 sRGB 색 공간(IEC 61966-2-1) 안의 색만 나타낼 수 있습니다. 요즘 휴대폰과 노트북 화면 상당수는 더 넓은 Display P3 색역을 표시할 수 있는데, 그 바깥쪽의 선명한 초록이나 빨강은 HEX로 적을 방법이 없습니다. CSS에서는 color(display-p3 …)나 oklch()로 적어야 합니다.

또 채널당 8비트라서 한 채널에 256단계뿐입니다. HSL을 정수로 반올림하면 HEX → HSL → HEX를 거칠 때 원래 값으로 돌아오지 않는 경우가 생깁니다. 그래서 이 도구는 HSL을 소수 한 자리까지 표시합니다. sRGB의 1,677만 색 전부를 확인해 보면 소수 한 자리면 모두 원래 HEX로 돌아옵니다. 다른 곳에서 정수로 적은 HSL을 가져왔다면 그 값은 이미 반올림된 것이므로 채널이 1 정도 다를 수 있습니다.

예시

사용 방법

1. HEX, rgb(), hsl() 중 가진 형식 그대로 붙여 넣습니다.
2. 세 형식으로 변환된 값과 미리보기 색을 확인합니다.
3. 필요한 형식을 복사합니다.

자주 묻는 질문

관련 가이드

• 색 대비와 웹 접근성: WCAG 공식의 출처, 한계, 그리고 각국 법 기준