색상 코드 변환기 · HEX RGB HSL 변환, 명도 대비 검사
색상 코드를 어떤 형식으로 넣어도 HEX·RGB·HSL·HSV·CMYK로 한꺼번에 바꿔 줍니다. 두 색의 명도 대비가 접근성 기준(WCAG)을 넘는지 확인하고, 밝기 변형과 팔레트도 만듭니다.
🔒 입력한 내용이 서버로 전송되지 않습니다밝기 변형 · 팔레트
밝게 → 어둡게
보색 · 유사색 · 삼원색
두 색의 명도 대비 (WCAG)
본문 글자는 4.5:1, 큰 글자와 아이콘·테두리는 3:1 이상이어야 읽기 쉽습니다.
AA는 일반 기준(본문 4.5:1 · 큰 글자 3:1), AAA는 강화 기준(본문 7:1 · 큰 글자 4.5:1)입니다.
정한 색으로 QR코드의 전경·배경을 꾸미거나, 사진에서 쓸 색을 뽑았다면 이미지 자르기로 그 부분만 남길 수 있습니다.
어떤 형식이 어디에 쓰이나
HEX(#2f6df6) — 웹·앱 디자인, CSS, 피그마. 가장 흔한 형식입니다. 끝에 두 자리를 더 붙이면(#2f6df680) 투명도입니다.
RGB(47, 109, 246) — 포토샵·파워포인트·한글(HWP)의 "사용자 지정 색"이 이 값을 받습니다.
HSL(216°, 92%, 57%) — 색상·채도·밝기라서 "같은 색을 조금 밝게"처럼 사람이 조절하기 쉬운 형식입니다.
HSV/HSB — 포토샵 색상 피커의 H·S·B 칸입니다. HSL과 비슷하지만 밝기 정의가 다릅니다.
CMYK — 인쇄용입니다. 화면 색과 잉크 색은 원리가 달라 여기 값은 근삿값이고, 실제 인쇄는 인쇄소의 색 견본으로 확인해야 합니다.
자주 묻는 질문
입력한 내용이 어디로 보내지나요?
아니요. 변환과 대비 계산은 브라우저 안에서만 이뤄집니다. 인터넷을 끊어도 동작합니다.
어떤 형식을 넣을 수 있나요?
#fff, #ffffff, #ffffff80 같은 HEX, rgb(255,0,0)·rgba(255,0,0,.5), hsl(120,100%,50%), 그리고 red·tomato·steelblue 같은 CSS 색 이름 148가지를 알아봅니다. # 없이 2f6df6만 넣어도 됩니다.
명도 대비 4.5:1은 무슨 뜻인가요?
글자 색과 배경 색의 밝기 차이를 비율로 나타낸 값입니다. 검정과 흰색이 21:1로 가장 크고, 같은 색끼리는 1:1입니다. 웹 접근성 지침(WCAG)은 본문 글자에 4.5:1 이상, 큰 글자와 아이콘에 3:1 이상을 요구합니다. 회색 글자가 읽기 힘든 사이트는 대개 이 값이 3:1에도 못 미칩니다.
CMYK 값이 인쇄소 값과 다른데요
화면(RGB)과 잉크(CMYK)는 표현할 수 있는 색 범위가 달라서 정확한 변환은 없습니다. 여기 값은 널리 쓰는 단순 변환식의 결과이고, 프로그램마다 색 프로필에 따라 몇 %씩 다릅니다. 인쇄물은 꼭 색 견본으로 확인하세요.
팔레트는 어떻게 만드나요?
밝기 변형은 HSL의 밝기만 10% 간격으로 바꾼 것입니다. 보색은 색상환에서 반대편(180°), 유사색은 양옆(±30°), 삼원색은 120° 간격의 색입니다. 버튼 색의 호버·눌림 색을 정하거나 차트 색을 고를 때 출발점으로 쓰세요.