색상 변환기

색상을 HEX, RGB, HSL, CSS 색상 이름 형식 사이에서 변환합니다.

16진수, RGB, HSL, HWB, LCH, CMYK, 색 이름 표기를 서로 바꾸고 색 선택기로 값을 고릅니다.

사용 순서

색 선택기로 색을 고르거나 hex, rgb, hsl 등 원하는 칸에 값을 직접 입력합니다.
입력한 칸을 제외한 나머지 칸이 같은 색의 다른 표기로 바뀝니다.
형식이 잘못되면 칸 아래 오류 문구가 나오고, 다른 칸은 바뀌지 않습니다.
필요한 표기 칸의 복사 버튼으로 값을 가져갑니다.

예시

#ff0000을 입력하면 rgb(255, 0, 0), hsl(0, 100%, 50%), hwb(0 0% 0%)로 바뀝니다.

한계

RGB, HSL, HWB, LCH, CMYK 변환은 수식으로 계산하며 색 관리 프로필(ICC)을 적용하지 않습니다. CMYK는 단순 변환식이라 실제 인쇄 결과와 차이가 날 수 있습니다. 색 이름은 CSS 색 이름 중 가장 가까운 값으로 맞추므로 정확히 같은 색이 아닐 수 있습니다. 예를 들어 #1ea54c는 seagreen으로 표시됩니다. 알파 값이 있는 입력은 8자리 hex와 rgba로 표기됩니다.

보안 주의

인쇄 시안에 CMYK 값을 쓰기 전에는 인쇄소가 제공하는 프로필로 색을 다시 확인하세요. 화면에서 맞아 보이는 색이 종이에서는 탁하게 나오는 경우가 흔합니다.

배경 지식

색은 빛의 세기를 빨강, 초록, 파랑 세 값으로 나타내는 RGB가 기본입니다. 웹에서 #ff0000처럼 쓰는 16진수는 같은 RGB 값을 두 자리씩 묶은 표기입니다. 모니터는 빛을 더해 색을 만들기 때문에 RGB가 화면에 맞고, 인쇄는 잉크를 빼서 색을 만들기 때문에 CMYK를 씁니다.

HSL과 HWB는 색상, 채도, 명도를 사람이 조절하기 쉽도록 나눈 모델입니다. 색상은 색상환의 각도로 정하고, HSL에서는 명도가 50%일 때 채도 100%의 순색이 나옵니다. HWB는 흰색과 검은색을 섞는 양을 직접 지정합니다. LCH는 사람이 느끼는 밝기 차이에 맞춘 지각 색 공간입니다.

여러 모델을 오가면 소수점 반올림 때문에 같은 색도 한두 단위씩 달라질 수 있습니다. 이 도구는 colord 라이브러리로 변환하므로 값은 같은 색을 가리키며, 결과를 다시 변환했을 때 마지막 자리가 흔들리는 것은 정상입니다. 디자인 토큰을 여러 형식으로 관리한다면 기준 형식 하나를 정해 두고 나머지를 변환하는 것이 안정적입니다.

자주 묻는 질문

#fff와 #ffffff는 같은 색인가요?

같은 색입니다. 세 자리 16진수는 각 자리를 두 번 쓴 축약형이므로 #abc는 #aabbcc와 같습니다. 이 도구는 축약형도 받아서 여섯 자리 값으로 바꿔 보여줍니다.

투명도가 있는 색은 어떻게 표기하나요?

16진수는 뒤에 두 자리 알파 값을 붙이고, rgb는 네 번째 값으로 0부터 1 사이의 투명도를 씁니다. #ff000080은 약 50% 불투명한 빨강이며 rgba(255, 0, 0, 0.5)로 바뀝니다.

색 이름 칸의 이름이 실제 색과 다른 이유는 무엇인가요?

색 이름은 CSS에 정의된 148개 이름 중 가장 가까운 값을 고르기 때문입니다. 목록에 없는 색은 비슷한 다른 이름으로 바뀌므로, 정확한 색을 지정할 때는 16진수나 RGB 값을 쓰세요.