디자이너와 개발자라면 색상 포맷을 전환할 때마다 이런 장벽에 부딪힙니다.
디자인 툴은 HEX를 내보내고, CSS는 HSL을 요구하며, 인쇄는 CMYK를 필요로 합니다. 믿을 만한 색상 변환기 없이는 수동으로 추측하거나 여러 사이트를 오가야 해 소중한 작업 시간을 낭비하게 됩니다.
RGB를 HSL로 수동 변환하려면 삼각함수가 필요합니다. 공식에서 숫자 하나만 틀려도 색조가 180° 돌아갑니다. Color Math는 모든 계산을 즉시, 정확하게 처리합니다.
대부분의 컬러 피커는 WCAG 2.1 명암대비 요건을 무시합니다. Color Math는 명암대비를 즉시 표시해 첫 번째 색상 선택부터 접근성을 설계에 녹일 수 있습니다.
색상 미리보기
#3B82F6
rgb(59, 130, 246)
Current
보색
유사색
삼각 배색
스워치를 클릭해 색상 로드
White text on color
Black text on color
저장된 색상이 여기 표시됩니다
모든 색상 시스템을 위한 하나의 색상 변환기. Color Math는 여러 툴을 한 번에 대체합니다.
HEX, RGB, HSL, CMYK 중 어느 필드든 수정하면 Color Math가 즉시 나머지 모든 포맷을 재계산합니다. 제출 버튼이 필요 없습니다.
R, G, B, H, S, L, C, M, Y, K 슬라이더를 드래그하면 모든 포맷이 실시간으로 업데이트됩니다. 키보드 없이도 색상을 세밀하게 조정할 수 있습니다.
Color Math는 현재 색상에서 보색, 유사색, 삼각 배색을 자동으로 생성합니다. 스워치를 클릭하면 즉시 작업 색상으로 로드됩니다.
흰색과 검정 배경에 대한 명암대비를 한눈에 확인하세요. Color Math는 AA, AAA 또는 미달 레이블을 표시해 기본적으로 접근성 있는 디자인을 만들 수 있게 합니다.
저장된 색상은 세션을 넘어 브라우저에 유지됩니다. Color Math는 최대 10개의 최근 색상을 보관해 언제든 다시 확인하고 비교할 수 있습니다.
Color Math의 모든 계산은 브라우저 안에서 완결됩니다. 데이터를 전송하지 않고, 계정도 필요 없습니다 — 색상은 오직 당신의 것입니다.
디자인과 코드 연결부터 인쇄 준비, 접근성 검증까지 — Color Math는 색상 워크플로우 전반에 맞춥니다.
Figma에서 HEX 색상을 가져왔나요? Color Math에 붙여넣으면 CSS 커스텀 프로퍼티에 맞는 HSL을 즉시 얻을 수 있습니다. 디자인 파일을 다시 열지 않고 호버와 포커스 상태에 맞게 명도를 조정하세요.
Color Math는 화면 그래픽의 RGB 색상을 이론적 CMYK 값으로 변환해 인쇄소에 파일을 보내기 전에 색역 밖 빨강과 오렌지를 찾아냅니다. 추가 비용 없이 예상치 못한 문제를 방지하세요.
Color Math는 흰색과 검정 배경에 대한 WCAG 2.1 명암대비를 실시간으로 계산합니다. 텍스트 색상이 AA 또는 AAA 요건을 충족하는지 즉시 확인할 수 있습니다 — 별도 툴 없이.
세 단계로 색상을 변환하고, 탐색하고, 저장하세요.
HEX 코드(#f00 같은 축약형은 자동으로 확장)를 입력하거나 슬라이더를 드래그해 시작하세요. Color Math는 HEX, RGB, HSL, CMYK 입력을 동시에 지원합니다.
RGB, HSL, CMYK 탭을 전환하며 슬라이더로 조정하세요. 팔레트 패널까지 스크롤하면 Color Math가 생성한 보색, 유사색, 삼각 배색을 볼 수 있습니다.
복사 버튼을 클릭해 원하는 포맷을 가져오세요. '색상 저장'을 누르면 현재 색상이 히스토리 패널에 추가됩니다. Color Math는 세션을 넘어 최대 10개 색상을 저장합니다.
Color Math와 색상 변환에 대해 자주 묻는 질문의 답변입니다.
Color Math는 무료 브라우저 기반 색상 변환기로 HEX, RGB, HSL, CMYK 색상 코드를 실시간으로 상호 변환합니다. 색상 팔레트(보색, 유사색, 삼각 배색) 생성과 WCAG 2.1 명암대비 계산도 지원합니다 — 서버 요청 없이 모두 동작합니다.
Color Math는 표준 수학 변환 공식(RGB → CMYK)을 사용해 좋은 이론적 추정값을 제공합니다. 하지만 실제 인쇄 출력은 프린터, 잉크, 용지, ICC 색상 프로파일에 따라 달라집니다. Color Math는 참고용으로 사용하고 전문적인 인쇄 색상 관리를 대체하지 않도록 하세요.
WCAG 2.1은 텍스트 가독성을 위한 최소 명암대비를 정의합니다. AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구합니다. AAA는 일반 텍스트 7:1을 요구합니다. Color Math는 순백과 순검정에 대해 이 비율을 계산해 적합한 배경 선택을 도와줍니다.
HSL(색조, 채도, 명도)은 CSS가 색상을 정의하는 방식과 디자이너가 밝은 톤과 어두운 톤을 생각하는 방식에 더 자연스럽게 대응합니다. HSL에서 명도 50%는 색조의 가장 순수한 버전을 제공해 하나의 값만 조정해도 밝거나 어두운 변형을 쉽게 만들 수 있습니다.
Color Math는 브라우저의 localStorage에만 색상을 저장합니다 — 서버에는 절대 전송하지 않습니다. 히스토리는 기기와 브라우저 프로파일에 로컬로 저장됩니다. 브라우저 데이터를 지우면 히스토리도 삭제됩니다.
Color Math는 HSL 색채 이론을 사용해 팔레트 색상을 계산합니다. 보색은 색상환의 180° 반대편에 있습니다. 유사색은 ±30°에 위치합니다. 삼각 배색은 +120°와 +240°에 있습니다. 채도와 명도는 원래 색상과 동일하게 유지되어 시각적으로 일관된 팔레트가 만들어집니다.
네. Color Math는 완전히 반응형입니다. 슬라이더, 입력 필드, 팔레트 그리드 모두 작은 화면에 맞게 조정됩니다. 모든 계산은 로컬에서 실행되므로 모바일 네트워크에서도 지연이 없습니다.
회원가입 불필요. 첫 로드 후 오프라인에서도 작동합니다.
