사용 방법

#1e90ff, rgb(30 144 255), oklch(65% 0.18 250)처럼 색상을 입력하거나 붙여넣으세요. 색상 선택기를 클릭해 선택할 수도 있습니다.
색상 견본을 확인해 원하는 색상이 맞는지 살펴보세요.
목록에서 필요한 형식을 복사하세요. 투명도가 있는 값은 알파 값도 유지됩니다.

작동 방식

입력할 수 있는 형식: 숫자 3, 4, 6, 8자리 HEX (4번째와 8번째 숫자는 알파 값), 숫자 또는 백분율을 사용하는 rgb()와 rgba(), hsl()과 hsla(), hwb(), oklch(), 백분율 또는 0~100 사이의 숫자를 사용하는 cmyk(). 기존 쉼표 문법과 “/ alpha”를 사용하는 최신 공백 문법을 모두 지원합니다. 색조에는 deg, turn, rad, grad를 사용할 수 있습니다. “tomato” 같은 색상 이름은 인식되지 않으므로 색상 선택기나 코드를 사용하세요.

모든 변환은 sRGB를 기준으로 합니다. HSL과 HWB는 RGB 값을 단순히 다른 방식으로 표현하므로 정확하게 변환됩니다. OKLCH는 지각 기반 색 공간입니다. 명도 값이 같은 폭으로 변하면 색상 차이도 대체로 균일하게 느껴지므로 팔레트를 만드는 데 유용합니다. 공개된 OKLab 행렬을 사용해 계산합니다. 일부 OKLCH 색상은 sRGB로 표현할 수 있는 범위를 벗어납니다. 이 경우 도구에서 알림을 표시하고 표현 가능한 가장 가까운 색상을 보여 줍니다.

CMYK는 일반적인 단순 공식(K = 1 − 가장 큰 RGB 채널)을 사용해 계산합니다. 실제 인쇄 결과는 용지, 잉크, ICC 프로필에 따라 달라지므로 이 값은 인쇄 사양이 아닌 시작점으로 활용하세요.

예시

브랜드 HEX 코드에서 CSS 색상으로

스타일 가이드에 #0b5d1e가 있습니다. 붙여넣으면 이전 CSS에서 사용할 rgb(11, 93, 30), 밝기를 직접 조정할 수 있는 hsl(133.9, 78.8%, 20.4%), 최신 CSS 색상 함수용 oklch() 값을 확인할 수 있습니다.

투명도가 있는 색상 확인하기

rgba(0, 0, 0, 0.5)는 #00000080으로 변환됩니다. 마지막 두 자리 HEX 값(80)은 알파 값으로, 255 중 128이며 약 50%입니다.

디자인 파일의 OKLCH 값 확인하기

oklch(70% 0.4 150)은 채도가 매우 높은 녹색으로, sRGB 화면에서는 표현할 수 없습니다. 도구에서 이를 알리고 가장 가까운 sRGB 색상을 보여 주므로 대부분의 디스플레이에서 디자인이 다르게 보인다는 점을 확인할 수 있습니다.

자주 묻는 질문

HSL로 변환한 뒤 다시 변환하면 HEX 값이 한 단계 달라지는 이유는 무엇인가요?

HEX는 채널별로 0~255의 정수를 저장합니다. 다른 형식의 값은 표시할 때 반올림됩니다(HSL은 소수점 첫째 자리까지). 반올림한 값을 다시 변환하면 한 단계 차이가 날 수 있습니다. 원래 값이 정확해야 한다면 HEX를 복사하세요.

CMYK 값은 인쇄에 적합한가요?

아니요. CMYK 값만으로는 충분하지 않습니다. 색상 프로필을 사용하지 않는 단순 공식을 적용합니다. 프린터는 FOGRA나 GRACoL 같은 프로필을 사용하며, 프로필에 따라 값이 달라집니다. 인쇄소에 문의하거나 색상 관리 기능이 있는 앱에서 변환하세요.

OKLCH란 무엇이며 CSS에서 사용할 수 있나요?

OKLCH는 지각된 명도, 채도(색의 선명도), 색조로 색상을 표현합니다. 주요 브라우저의 최신 버전은 CSS에서 oklch()를 지원합니다. 구형 브라우저도 지원하려면 HEX 또는 rgb() 대체값을 함께 사용하세요.

8자리 HEX 코드는 무엇을 의미하나요?

#RRGGBBAA 형식에서 마지막 두 자리는 불투명도를 나타냅니다. 00은 완전 투명, ff는 완전 불투명입니다. 4자리 형식인 #RGBA도 채널마다 한 자리씩 사용하며 같은 방식으로 작동합니다.

개인정보 보호

색상은 브라우저에서 변환됩니다. 입력한 내용은 어디에도 전송되거나 저장되지 않습니다.