색상 코드 바꾸는 방법
- 색을 고르거나 HEX(#0071e3)·RGB·HSL·CMYK로 입력하세요.
- 모든 형식이 한꺼번에 나와요. 필요한 값 옆의 복사를 누르세요.
- 아래로 내리면 어울리는 색 조합, 밝게·어둡게 단계, 글자 가독성 검사가 있어요.
이렇게 동작해요
모든 형식을 같은 RGB 값에서 계산해서 서로 어긋나지 않아요. HSL과 HSV는 색을 색상·채도·명도(밝기)로 나타내서 색 조합을 만들기 쉬워요. 보색은 색상환에서 180°, 3색 조화는 120°씩 떨어져 있어요. 밝게·어둡게 단계는 색상과 채도는 그대로 두고 명도만 바꿔요.
명도 대비 검사는 웹 접근성 점검에서 쓰는 WCAG 2의 상대 휘도 공식을 그대로 써요.
계산 예시
저희 대표 파란색 #0071e3은 rgb(0, 113, 227), hsl(210, 100%, 44.5%), 대략 cmyk(100%, 50%, 0%, 11%)예요. 흰 배경과의 대비는 4.70:1로, WCAG AA 본문 기준 4.5:1을 살짝 넘어요.
자주 쓰는 회색 #767676은 흰 배경에서 4.54:1로 통과하지만, 한 단계 밝은 #777777은 4.48:1로 탈락해요. 디자이너가 눈대중 대신 검사기를 쓰는 이유예요. 밝은 주황 #ff9f0a는 흰 배경에서 2.06:1밖에 안 돼서 큰 아이콘엔 괜찮아도 본문 글자엔 맞지 않아요.
이럴 때 써요
브랜드 가이드의 색을 CSS·안드로이드·인쇄용 값으로 바꿀 때, 발표 자료·웹사이트·로고용 작은 팔레트를 만들 때, 공개 전에 버튼 글자가 잘 읽히는지 확인할 때, 마우스를 올렸을 때 쓸 조금 어두운 색을 찾을 때 써요.
QR 코드에 색을 입히려면 QR코드 만들기를, 이미지 위 글자색은 짤·밈 만들기에서 바로 고를 수 있어요.
한계
- CMYK는 단순 수학 변환이라 인쇄 프로파일을 반영하지 않아요. 전문 인쇄는 인쇄소의 프로파일을 확인하세요.
- 색은 sRGB 기준이에요. 더 넓은 색 영역(Display P3)은 sRGB 범위로 잘려요.
- 명도 대비는 단색 배경 기준이에요. 사진 위 글자는 따로 확인해야 해요.
자주 묻는 질문
HEX를 RGB로 바꾸는 방법은요?
여섯 자리를 두 자리씩 나눠 16진수로 읽으면 돼요. #0071e3 → 00, 71, e3 → 0, 113, 227. 입력하는 즉시 도구가 계산해 줘요.
명도 대비는 얼마나 필요해요?
WCAG AA는 본문 4.5:1 이상, 큰 글씨(약 24px, 굵게는 19px) 3:1 이상을 요구해요. AAA는 7:1이에요.
CMYK 값을 그대로 인쇄에 써도 되나요?
출발점으로는 좋지만 실제 인쇄 색은 종이와 잉크 프로파일에 따라 달라요. 브랜드 색이 중요하면 인쇄소에 교정쇄를 요청하세요.
CSS에는 어떤 형식을 써야 해요?
어느 것이든 돼요. HEX가 가장 흔하고, 밝기를 손으로 조절하고 싶다면 hsl()이 편해요.