색상 코드 변환기: HEX, RGB, HSL, CMYK

한국어

HEX를 RGB로 바꾸는 방법 (그리고 반대로)

이 색상 코드 변환기는 HEX 코드를 입력하는 즉시 RGB, HSL, HSV, CMYK, OKLCH로 바꿔 줍니다. 반대도 됩니다. 아무 칸에나 rgb(255, 99, 71)을 붙여 넣으면 #FF6347이 나옵니다. 모든 칸이 모든 형식을 받기 때문에 맞는 칸을 찾을 필요가 없습니다.

손으로 계산하고 싶다면, HEX 코드는 16진수로 쓴 숫자 세 개일 뿐입니다. #3B82F6을 두 자리씩 나누고 각 쌍을 바꿔 보세요.

RGB를 HEX로 바꾸는 것은 그 반대입니다. 각 채널을 16으로 나누면 몫이 첫째 자리, 나머지가 둘째 자리입니다. 255는 몫 15, 나머지 15이므로 FF, 99는 몫 6, 나머지 3이므로 63입니다. 그래서 토마토색 rgb(255, 99, 71)은 #FF6347이 됩니다.

자주 쓰는 색상 코드: HEX, RGB, HSL

한눈에 알아보면 편한 색들입니다. 모두 CSS 색 이름으로도 쓸 수 있으며, 이 도구는 입력한 색에 가장 가까운 이름도 보여 줍니다(#3B82F6은 dodgerblue와 가장 가깝지만 같은 색은 아닙니다).

짧은 HEX, 긴 HEX, 투명도가 있는 HEX

HEX 코드는 네 가지 길이가 있습니다. 3자리는 각 자리를 두 번씩 쓴 줄임 형태라서 #F60은 #FF6600입니다. 6자리가 기본 형태입니다. 8자리는 끝에 알파 채널을 더한 것으로, #3B82F680은 같은 파란색에 불투명도 128/255, 약 50%를 준 색입니다. 4자리는 그 줄임 형태입니다. 브라우저는 오래전부터 네 가지를 모두 이해하지만, 일부 디자인 앱과 이메일 클라이언트는 아직 6자리만 받으므로 확실하지 않다면 6자리 코드를 붙여 넣고 불투명도는 따로 지정하세요.

어떤 형식을 써야 할까요?

• HEX: 디자인 도구, 브랜드 가이드, CMS에 붙여 넣을 때. 짧고 잘못 읽을 일이 없습니다.
• RGB / RGBA: 오래된 CSS나 JavaScript 캔버스 코드에서 투명도가 필요할 때.
• HSL: 색을 머리로 따져 가며 조정하고 싶을 때. 마지막 숫자를 낮추면 어두워지고, 가운데 숫자를 낮추면 회색에 가까워집니다. 호버 상태 색을 정하기가 훨씬 쉽습니다.
• OKLCH: 새로 만드는 CSS 디자인 시스템. 명도 값이 눈에 보이는 밝기와 일치해서 L이 같은 두 색은 실제로 같은 밝기로 보입니다. HSL은 그렇지 못합니다(명도 50%의 노랑은 명도 50%의 파랑보다 훨씬 밝아 보입니다).
• CMYK: 인쇄용 대략적인 참고로만. 여기 숫자는 프린터 프로파일이 아니라 단순 공식에서 나온 것이라 브로슈어 색이 화면과 똑같지는 않습니다. 인쇄소에 어떤 프로파일을 쓰는지 물어보세요.
• HSV / HSB: 주로 Photoshop이나 Figma의 색상 선택기와 맞출 때. 두 프로그램이 이 방식을 씁니다.

명도 대비 검사: WCAG를 통과하는 기준

WCAG 2는 텍스트와 배경의 상대 밝기를 비교해 1:1(같은 색)부터 21:1(흰 바탕에 검은 글자)까지의 비율로 나타냅니다. 기준값은 정해져 있습니다.

WCAG 2.1에서 아이콘, 입력란 테두리, 포커스 표시는 3:1이 필요합니다. 실제 색을 흰 바탕의 텍스트로 썼을 때 점수는 다음과 같습니다.

#777777은 전형적인 함정입니다. 눈으로는 #767676과 구별되지 않고, 소수점 한 자리만 보여 주는 검사 도구에서는 4.5로 표시되지만, 기준은 ‘4.5 이상’이고 4.48은 여기에 못 미칩니다. 이 도구는 실패한 비율을 기준값까지 반올림해 주지 않습니다.

색이 기준에 못 미치면 같은 색상(hue)에서 통과하는 가장 가까운 명도를 찾아 줍니다. 흰 바탕의 #3B82F6이라면 AA용으로 #1E6FF5(4.52:1), AAA용으로 #0950C5(7.08:1)를 추천합니다. 사용을 눌러 불러오거나 스타일시트에 바로 복사하세요. 밝은 노랑과 주황은 흰 바탕 텍스트로 쓰려면 대개 훨씬 어두워져야 합니다. 이런 색은 배경에 쓰고 그 위에 어두운 텍스트를 올리세요.

팔레트 만들기와 이미지에서 색 추출하기

팔레트 패널은 50부터 950까지의 틴트·셰이드 단계(Tailwind의 이름 붙이는 방식)와 함께 보색, 유사색, 3색 조화, 분할 보색, 4색 조화, 단색 조합을 만들어 줍니다. 색상 칸을 클릭하면 복사되고, 전체 세트를 CSS 사용자 정의 속성, SCSS 변수, JSON, Tailwind 색상 블록으로 내보내거나, 슬라이드에 넣거나 클라이언트에게 보낼 PNG 띠로 내려받을 수 있습니다.

로고나 사진 속 색과 맞추려면 이미지를 불러오고 원하는 지점을 누르세요. JPG에서는 압축 노이즈 때문에 픽셀 하나가 눈에 보이는 색과 몇 단계 다를 수 있으므로, 사진이라면 3×3이나 5×5 평균으로 바꾸세요. Chrome과 Edge에서는 화면에서 추출 버튼으로 다른 창을 포함해 화면 어디에서든 색을 가져올 수 있습니다. 업로드되는 것은 없으며, 이미지는 브라우저 안에서 읽습니다.

자주 묻는 질문