색상 변환기 사용법 — HEX·RGB·HSL·CMYK 색상코드 변환

디자이너에게 받은 시안의 핑크색, 브랜드 가이드의 파란색. 화면의 색은 HEX 하나로 정리되지만 웹과 인쇄는 코드가 다릅니다. 웰컴스 색상 변환기는 다섯 가지 코드 변환과 팔레트, 접근성 검사, 그라데이션·그림자 CSS 생성까지 해 주는 무료 도구입니다.

다섯 가지 코드가 동시에

화면 상단에는 색상 변환 / 그라데이션 / 그림자 세 개의 탭이 있습니다. 첫 번째 탭이 아래에서 설명하는 변환·팔레트·대비율 화면이고, 나머지 두 탭은 이 글 뒤쪽에서 다룹니다.

색상 피커에서 색을 고르거나 HEX 코드를 입력하면 아래 다섯 개 표기가 함께 바뀝니다.

• HEX (#EC4899) — 웹·CSS 표준
• RGB (236, 72, 153) — 화면 표현
• HSL (색상·채도·명도) — 색 조합 설계에 편함
• HSV — 그래픽 툴 계열
• CMYK — 인쇄 환산(근사값)

투명도가 필요하면 알파 슬라이더를 밀면 됩니다. 알파가 100% 미만이 되면 8자리 HEX(#RRGGBBAA)와 rgba(), hsla() 표기가 자동으로 나오고, 미리보기에 체커보드 배경으로 투명함이 그대로 보입니다. 반대로 rgba(59, 130, 246, 0.5) 같은 코드를 입력창에 붙여 넣어도 역으로 해석됩니다.

조합 색은 자동으로 뽑아 줍니다

색 하나가 정해지면 색상환에서 계산한 팔레트 네 종이 함께 나옵니다. 보색(+180°), 유사색(좌우 30°), 삼색(120° 간격), 분할보색(+150°/−150°)인데, 배너나 랜딩 페이지에서 "메인 색은 정했는데 나머지가" 상황에 바로 쓰입니다. 스와치를 클릭하면 HEX 코드가 복사됩니다.

그라데이션 생성기 — 색 여러 개, 각도는 다이얼로

두 번째 탭에서는 CSS 그라데이션을 만듭니다. 예전 버전은 시작색·끝색 두 개에 방향 여덟 개였다면, 지금은 훨씬 유연해졌습니다.

• 선형(linear) — 왼쪽 다이얼을 돌리거나 슬라이더로 각도 0~360°를 자유롭게 지정
• 원형(radial) — 타원·원 모양과 중심 위치(X·Y %)를 정해 조명 효과처럼 표현
• 원뿔형(conic) — 중심을 기준으로 색이 회전하는 도넛·색상환 스타일

"색 추가" 버튼으로 색상 정지점을 계속 덧붙일 수 있어서, 인스타그램 로고처럼 세 색 이상이 들어가는 그라데이션도 됩니다. 각 색의 위치(%)와 순서도 조절됩니다. 대표 프리셋 12종(Cool Blues, Instagram, Aurora 등)을 클릭 한 번으로 불러오거나 랜덤 버튼으로 새 조합을 뽑아 볼 수도 있습니다.

결과는 카드·버튼·그라데이션 텍스트 세 가지 샘플에 동시에 적용되어 보이고, 코드는 background, background-image, CSS 변수 세 가지 형태 중 골라 복사하면 됩니다.

그림자 생성기 — box-shadow를 레이어로

세 번째 탭은 CSS box-shadow 전용 화면입니다. 그림자를 레이어 단위로 최대 3개까지 쌓을 수 있고, 각 레이어마다 X·Y 오프셋, blur(흐림), spread(확산), 색상·투명도, inset(안쪽) 여부를 슬라이더로 조절합니다. 멀리 떨어진 부드러운 그림자 하나와 가까운 진한 그림자 하나를 함께 쓰면 실제 사물처럼 자연스러운 깊이가 만들어집니다.

미리보기 배경은 밝게·그리드·어둡게 중 고를 수 있고 박스 색도 바꿀 수 있어서, 실제 카드 위에서 그림자가 어떻게 보이는지 확인하면서 작업합니다. 소프트·플로트·네온·인셋·레터프레스 등 자주 쓰는 스타일이 프리셋 10종으로 준비되어 있습니다.

웹 접근성 검사 — 글자가 잘 읽히는지

WCAG 대비율 검사 카드에 글자색과 배경색을 넣으면 두 색의 대비율이 계산되고 네 가지 기준 통과 여부가 표시됩니다.

공공기관·교육 사이트는 접근성 기준이 사실상 필수라서, 색을 정하는 시점에 이 표를 통과하는지 확인하면 나중에 수정 일감이 줄어 듭니다. 검사 결과 아래에는 실제 색 조합으로 쓴 샘플 문장이 보여서 감으로도 판단됩니다.

색으로 일하는 사람들의 실전 워크플로

색 변환기는 보통 이 순서로 쓰입니다. 이미지나 시안에서 피커로 색을 뽑고 → 코드 다섯 가지가 나오면 필요한 표기를 복사하고 → 팔레트로 보조색을 정하고 → 대비율 검사로 글자 가독성을 확인하는 것. 여기에 그라데이션·그림자 생성기까지 더하면 랜딩 페이지의 색 스펙이 CSS 코드까지 한 번에 완성됩니다.

• 블로거·SNS 운영자 — 썸네일의 메인 색을 뽑아 유사색 팔레트로 시리즈 썸네일 톤 통일
• 쇼핑몰 운영자 — 브랜드 색 대비율을 AA 이상으로 맞춰 상세 페이지 버튼·가격 텍스트 가독성 확보
• 랜딩 페이지 제작자 — 그라데이션 배경과 CTA 버튼 그림자를 프리셋에서 골라 CSS 코드로 바로 붙여넣기
• 개발자·디자이너 협업 — HEX는 코드에, CMYK는 인쇄소에, HSL은 색 밝기 조정 논의에 각각 전달
• 인쇄물 담당자 — 근사 CMYK로 방향을 잡고 최종 색은 출력소 교정본으로 확정

알파(투명도)를 다루는 두 가지 팁

알파 슬라이더를 움직이면 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. CSS 파일, HTML style 속성, 워드프레스 관리자의 "추가 CSS"처럼 배경이나 그림자를 지정할 수 있는 곳이면 어디든 그대로 붙여넣을 수 있습니다.

Q. 다크모드에서 색을 확인할 수 있나요?
A. 화면 우측의 테마 토글로 밝은/어두운 배경에서 같은 색을 비교할 수 있습니다.

Q. 대비율은 어떻게 계산되나요?
A. WCAG 공식(상대 휘도 기반)으로 계산됩니다.

같이 쓰면 좋은 도구

• 시각적 CSS 편집기 — 정한 색을 실제 페이지에 적용해 볼 때
• 이미지 편집기 — 이미지 위에 브랜드 색 텍스트를 얹을 때

색은 감이 아니라 숫자로 정하면 팀 작업이 쉬워집니다. 브랜드 색 다섯 가지 코드, 지금 정리해 두면 어떨까요?

👉 웰컴스 색상 변환기에서 변환하기 →