색상 변환 계산기는 HEX, RGB, HSL 중 어떤 형식으로 색을 입력해도 HSV, CMYK, OKLCH, HWB, LAB, LCH, CSS 컬러명까지 여러 색 공간의 값으로 동시에 변환해 주는 도구입니다. 모든 필드가 양방향으로 연동되어 어느 쪽을 수정해도 나머지가 즉시 갱신됩니다.

디자인 시안의 HEX 값을 코드에 맞는 형식으로 옮겨야 하는 개발자, 접근성 기준을 확인해야 하는 웹 디자이너, 브랜드 컬러 팔레트를 만들어야 하는 분에게 유용합니다.

자세한 사용법과 자주 묻는 질문 보기

사용 방법

색상 값을 입력하거나 미리보기 옆의 슬라이더로 색조와 투명도를 조절하면 모든 형식의 값이 실시간으로 바뀝니다. 지원 브라우저에서는 EyeDropper로 화면의 아무 색이나 찍어서 가져올 수도 있습니다.

변환된 값은 CSS, SCSS, Tailwind, iOS(Swift), Android, Flutter 등 9개 환경의 코드 스니펫으로 제공되어 복사 후 바로 붙여넣을 수 있습니다. 한국 주요 브랜드 컬러표도 참고용으로 제공됩니다.

접근성과 팔레트 기능

WCAG 명도 대비 검사 기능은 선택한 색과 배경색의 대비율을 계산해 AA, AAA 기준 충족 여부를 알려 줍니다. 본문 텍스트와 배경의 조합이 저시력 사용자에게도 읽기 좋은지 배포 전에 점검할 수 있습니다.

색맹 시뮬레이션은 적색맹(Protan), 녹색맹(Deutan), 청색맹(Tritan) 세 유형에서 색이 어떻게 보이는지 미리 보여 줍니다. 자동 팔레트는 선택한 색을 기준으로 밝은 톤(Tints), 어두운 톤(Shades), 무채색 혼합(Tones)과 Tailwind 스타일의 50~900 단계를 생성하고, 보색·유사색 등 컬러 하모니 조합도 제안합니다.

자주 묻는 질문

HEX와 RGB는 무엇이 다른가요?
같은 색을 다른 표기법으로 나타낸 것입니다. HEX는 #FF5733처럼 16진수로, RGB는 rgb(255, 87, 51)처럼 10진수 세 값으로 표기하며 상호 변환에 손실이 없습니다.
OKLCH는 왜 쓰나요?
사람 눈이 느끼는 밝기와 채도에 맞게 설계된 최신 색 공간으로, 밝기만 바꿔도 색감이 일정하게 유지되어 팔레트 제작에 유리합니다. 최신 CSS에서 기본 지원됩니다.
WCAG 대비율은 얼마 이상이어야 하나요?
일반 본문 텍스트는 4.5:1 이상이면 AA, 7:1 이상이면 AAA 기준을 충족합니다. 이 도구는 선택한 색 조합의 대비율과 등급 통과 여부를 자동으로 판정해 줍니다.
CMYK 값은 인쇄 색상과 정확히 일치하나요?
화면(RGB)과 인쇄(CMYK)는 색 재현 범위가 달라 수치 변환만으로는 완전히 같은 색을 보장할 수 없습니다. 인쇄물 제작 시에는 변환값을 출발점으로 삼고 인쇄소 교정쇄로 최종 확인하는 것이 좋습니다.
입력한 색상 정보가 서버로 전송되나요?
아니요, 모든 변환과 계산은 브라우저 안에서만 처리됩니다.