홈 › 개발자 › 색상 코드 변환

색상 코드 변환

HEX, RGB, HSL, HSV, CMYK, OKLCH 색상 코드를 서로 바꿔요. 글자색과 배경색의 WCAG 명도 대비도 검사하고, 밝기 단계 팔레트도 만들어요.

색 선택기로 고르거나 오른쪽 칸에 입력

HEX

RGB

HSL

HSV

CMYK

OKLCH

칸을 누르면 HEX 코드가 복사돼요. 가운데가 지금 색이에요.

글자색

배경색

가나다 Aa 123작은 본문 글자는 이렇게 보여요.

대비율-

사용 방법

1색 입력색 선택기로 고르거나 HEX, RGB, HSL 등 아무 칸에나 코드를 입력해요.

2코드 복사나머지 형식이 바로 계산돼요. 필요한 형식 옆 복사 버튼을 누르세요.

3대비 확인오른쪽에서 글자색과 배경색 대비율이 웹 접근성 기준을 넘는지 확인해요.

디자인 시안에는 HEX로 적혀 있는데 코드에서는 RGB나 HSL이 필요하고, 인쇄소는 CMYK를 달라고 할 때가 많아요. 형식마다 계산식이 달라서 손으로 바꾸기는 번거로워요. 이 도구는 한 칸에 입력하면 나머지 여섯 가지 형식을 한 번에 보여 줘요.

글자를 색 배경 위에 올릴 때는 명도 대비가 중요해요. 웹 접근성 지침(WCAG 2.x)은 일반 본문에 4.5:1 이상, 큰 글자에 3:1 이상을 권해요. 오른쪽 검사기에서 기준 통과 여부를 바로 볼 수 있어서 버튼, 배너, 썸네일 글자색을 정할 때 유용해요.

밝기 단계 팔레트는 지금 색을 기준으로 밝은 쪽과 어두운 쪽 단계를 만들어 줘요. 버튼의 기본, 마우스 올림, 눌림 상태 색을 고를 때 쓰기 좋아요.

CMYK 값이 인쇄 결과와 똑같나요?

아니요. 여기서 계산하는 CMYK는 단순 변환식이라 실제 인쇄용 색 프로필(용지, 잉크)을 반영하지 않아요. 정확한 인쇄 색은 인쇄소의 프로필로 확인하세요.

OKLCH는 무엇인가요?

사람 눈에 느껴지는 밝기에 맞춘 최신 색 표현 방식이에요. 최신 브라우저 CSS에서 oklch(…)로 바로 쓸 수 있고, 밝기만 바꿔도 색감이 덜 틀어져요.

투명도(알파)도 되나요?

#RRGGBBAA 형식이나 rgba()로 입력하면 투명도 값을 유지해요. 대비율 계산은 불투명한 색 기준이에요.

대비율 기준 AA와 AAA는 뭐가 다른가요?

AA는 대부분의 웹사이트가 목표로 하는 기본 기준(본문 4.5:1)이고, AAA는 더 엄격한 기준(본문 7:1)이에요.