디자이너에게 받은 시안의 핑크색, 브랜드 가이드의 파란색. 화면에서 보이는 색은 HEX 코드 하나로 정리되지만, 웹에서 쓰려면 RGB와 HSL이, 인쇄를 넘기려면 CMYK가 필요합니다. 웰컴스 색상 변환기는 한 색을 다섯 가지 코드로 동시에 바꿔 주고, 어울리는 색 조합과 웹 접근성 검사까지 해 주는 무료 도구입니다.
색상 피커에서 색을 고르거나 HEX 코드를 입력하면 아래 다섯 개 표기가 함께 바뀝니다.
투명도가 필요하면 알파 슬라이더를 밀면 됩니다. 알파가 100% 미만이 되면 8자리 HEX(#RRGGBBAA)와 rgba(), hsla() 표기가 자동으로 나오고, 미리보기에 체커보드 배경으로 투명함이 그대로 보입니다. 반대로 rgba(59, 130, 246, 0.5) 같은 코드를 입력창에 붙여 넣어도 역으로 해석됩니다.
색 하나가 정해지면 색상환에서 계산한 팔레트 네 종이 함께 나옵니다. 보색(+180°), 유사색(좌우 30°), 삼색(120° 간격), 분할보색(+150°/−150°)인데, 배너나 랜딩 페이지에서 "메인 색은 정했는데 나머지가" 상황에 바로 쓰입니다. 스와치를 클릭하면 HEX 코드가 복사됩니다.
그라디언트 생성기도 있습니다. 시작색과 끝색을 고르고 여덟 방향 버튼 중 하나를 누르면 linear-gradient(45deg, ...) 형태의 CSS 코드가 만들어져 복사됩니다. 버튼·배경에 부드러운 그라데이션을 넣을 때 코드를 직접 쓸 필요가 없습니다.
WCAG 대비율 검사 카드에 글자색과 배경색을 넣으면 두 색의 대비율이 계산되고 네 가지 기준 통과 여부가 표시됩니다.
| 기준 | 대비율 | 대상 |
|---|---|---|
| AA 일반 텍스트 | 4.5 : 1 이상 | 본문 |
| AA 큰 텍스트 | 3 : 1 이상 | 18pt 이상 제목 |
| AAA 일반 텍스트 | 7 : 1 이상 | 고가독성 본문 |
| AAA 큰 텍스트 | 4.5 : 1 이상 | 고가독성 제목 |
공공기관·교육 사이트는 접근성 기준이 사실상 필수라서, 색을 정하는 시점에 이 표를 통과하는지 확인하면 나중에 수정 일감이 줄어 듭니다. 검사 결과 아래에는 실제 색 조합으로 쓴 샘플 문장이 보여서 감으로도 판단됩니다.
색 변환기는 보통 이 순서로 쓰입니다. 이미지나 시안에서 피커로 색을 뽑고 → 코드 다섯 가지가 나오면 필요한 표기를 복사하고 → 팔레트로 보조색을 정하고 → 대비율 검사로 글자 가독성을 확인하는 것. 여기에 그라디언트 생성기까지 더하면 랜딩 페이지의 색 스펙이 거의 완성됩니다.
알파 슬라이더를 움직이면 8자리 HEX와 rgba() 표기가 동시에 갱신됩니다. CSS를 직접 쓸 때는 rgba()가, 디자인 툴에 값을 옮길 때는 8자리 HEX가 편하니 상황에 맞게 복사하면 됩니다. 반대로 다른 사람 코드의 rgba(59, 130, 246, 0.5)를 붙여 넣으면 색이 그대로 복원되니, "이 색의 HEX가 뭐지?"가 필요할 때도 그냥 입력창에 던지면 됩니다. 미리보기의 체커보드 배경은 투명도가 실제로 어떻게 보이는지 확인시켜 주어, 반투명 오버레이를 설계할 때 감과 코드가 어긋나는 것을 막아 줍니다.
Q. CMYK 값이 인쇄소 결과와 다른데요?
A. 화면의 RGB에서 인쇄용 CMYK로 바꾼 것은 근사 환산입니다. 최종 인쇄 색은 출력소의 색변환과 용지에 따라 달라지니, 정확한 색 지정이 필요하면 출력소 기준을 따르세요.
Q. 색 조합 추천은 어떤 방식인가요?
A. 선택한 색의 색상환 각도에 보색·유사색 같은 색채 이론 간격을 더해 계산합니다.
Q. 다크모드에서 색을 확인할 수 있나요?
A. 화면 우측의 테마 토글로 밝은/어두운 배경에서 같은 색을 비교할 수 있습니다.
Q. 대비율은 어떻게 계산되나요?
A. WCAG 공식(상대 휘도 기반)으로 계산됩니다.
색은 감이 아니라 숫자로 정하면 팀 작업이 쉬워집니다. 브랜드 색 다섯 가지 코드, 지금 정리해 두면 어떨까요?
| 이전 | 마크다운 편집기 사용법 — 온라인 MD 에디터 + 개발 도구 | 2026-06-03 | |
|---|---|---|---|
| 다음 | 단위 변환기 사용법 — 평수·근·관까지 51개 단위 변환 가이드 | 2026-06-09 |
