색상 변환 · 팔레트
HEX, RGB, HSL 색상값을 상호 변환하고 어울리는 색 조합과 명암 대비를 확인합니다.
브라우저에서 로컬 처리 · 서버 업로드 없음 Aa 가 Aa 가
예: #4F46E5, 4f46e5, #abc
대비비 · 접근성 (WCAG)
선택한 색을 배경으로 두었을 때, 흰색/검정 글자의 가독성을 검사합니다.
흰색 글자 미리보기
흰색 글자 대비 —
검정 글자 미리보기
검정 글자 대비 —
팔레트
칩을 클릭하면 HEX가 복사됩니다.명도 단계 (어두움 → 밝음)
보색 · 관련 색
추천 팔레트
입력한 색을 바탕으로 만든 배색 3종. 색을 클릭하면 복사돼요.추천 색상 조합
색상환 기반 배색 후보예요. 색을 클릭하면 복사됩니다.복사됨
사용 방법
- HEX, RGB, HSL 중 편한 칸에 색상 값을 입력하거나, 위쪽 색상 피커로 색을 고르세요.
- 한 칸을 바꾸면 나머지 형식과 미리보기 스와치가 자동으로 동기화됩니다.
- 스와치 아래에서 흰색·검정 글자의 대비비(contrast)와 WCAG AA/AAA 통과 여부를 확인하세요.
- 팔레트 영역에서 명도 단계(shade·tint)와 보색을 생성하고, 칩을 클릭해 HEX 값을 복사하세요.
자주 묻는 질문
대비비(contrast ratio)와 WCAG AA/AAA는 무엇인가요?
대비비는 두 색의 밝기 차이를 1:1 ~ 21:1 범위로 나타낸 값입니다. 웹 접근성 지침(WCAG)은 일반 본문 글자에 대해 AA 4.5:1, AAA 7:1 이상을 권장합니다. 큰 글자(약 24px 이상 또는 굵은 19px 이상)는 기준이 AA 3:1, AAA 4.5:1로 완화됩니다. 이 도구는 선택한 색 위에 올린 흰색/검정 글자의 대비를 계산합니다.
shade와 tint는 어떻게 만들어지나요?
shade는 원래 색을 검정과 섞어 점점 어둡게 만든 단계이고, tint는 흰색과 섞어 점점 밝게 만든 단계입니다. 버튼·배경·테두리 등 한 색 계열의 디자인 토큰을 빠르게 잡을 때 유용합니다.
HSL의 H, S, L은 각각 무엇을 의미하나요?
H(색상)는 0~360도의 색상환 각도, S(채도)는 0~100%의 색의 선명함, L(명도)는 0~100%의 밝기입니다. RGB보다 "조금 더 밝게/연하게" 같은 조정을 직관적으로 하기 좋습니다.
입력한 색상 값이 서버로 전송되나요?
아니요. HEX·RGB·HSL 변환과 대비비 계산, 팔레트 생성은 모두 브라우저 안에서만 이루어지며 어떤 값도 외부로 전송·저장되지 않습니다.
같은 카테고리의 다른 도구
이미지
이미지 리사이즈 · 크롭
인스타(1:1), 유튜브 썸네일(16:9) 등 플랫폼 비율로 여러 장을 한 번에 크롭·리사이즈합니다.
바로 사용하기 → 이미지 인기
이미지 압축 · WebP 변환
고화질 이미지를 화질 손실 최소화로 압축하고 WebP로 변환해 용량을 크게 줄입니다.
바로 사용하기 → 이미지
이미지 포맷 변환
PNG, JPG, WebP 사이를 자유롭게 변환합니다. 투명 배경 처리와 일괄 변환을 지원합니다.
바로 사용하기 → 이미지 NEW
이미지 색상 바꾸기
사진·그림·피규어에서 특정 색(예: 파란색)을 다른 색(예: 보라색)으로 바꿉니다. 스포이드로 색을 고르면 음영은 유지한 채 색조만 자연스럽게 변환합니다.
바로 사용하기 →