색상 변환 · 팔레트
HEX, RGB, HSL 색상값을 상호 변환하고 어울리는 색 조합과 명암 대비를 확인합니다.
브라우저에서 로컬 처리 · 서버 업로드 없음예: #4F46E5, 4f46e5, #abc
대비비 · 접근성 (WCAG)
선택한 색을 배경으로 두었을 때, 흰색/검정 글자의 가독성을 검사합니다.
팔레트
칩을 클릭하면 HEX가 복사됩니다.명도 단계 (어두움 → 밝음)
보색 · 관련 색
추천 팔레트
입력한 색을 바탕으로 만든 배색 3종. 색을 클릭하면 복사돼요.추천 색상 조합
색상환 기반 배색 후보예요. 색을 클릭하면 복사됩니다.색상 변환 · 팔레트 소개
색상 변환·팔레트는 HEX·RGB·HSL 값을 서로 바꿔 주고, 고른 색 위에 흰 글자와 검은 글자를 올렸을 때의 대비를 계산하며, 명도 단계와 보색을 자동으로 만들어 줍니다. 디자인 시안의 색을 코드로 옮기거나 버튼 색 계열을 잡을 때 씁니다.
HSL을 이해하면 색을 다루기가 훨씬 수월해집니다. H(색상)는 색상환 위의 각도(0~360도), S(채도)는 선명한 정도, L(명도)는 밝기입니다. RGB로 '조금 더 연하게'를 만들려면 세 숫자를 동시에 조정해야 하지만 HSL에서는 S나 L 하나만 움직이면 됩니다. 팔레트의 shade는 원래 색에 검정을 섞어 어둡게, tint는 흰색을 섞어 밝게 만든 단계로, 호버 상태나 비활성 배경처럼 같은 계열의 변주가 필요할 때 그대로 쓸 수 있습니다.
대비비는 접근성에서 중요한 지표입니다. 두 색의 상대 휘도를 비교해 1:1부터 21:1까지의 값으로 나타내며, 웹 접근성 지침(WCAG)은 본문 글자에 AA 4.5:1, AAA 7:1 이상을 권장합니다. 약 24px 이상이거나 굵은 19px 이상인 큰 글자는 기준이 AA 3:1, AAA 4.5:1로 완화됩니다. 눈으로 보기에 읽을 만해 보여도 수치로는 기준에 못 미치는 조합이 흔한데, 특히 회색 계열 본문과 연한 색 버튼 위의 흰 글자가 자주 걸립니다. 색만으로 정보를 구분하지 않는 것도 함께 지켜야 할 원칙입니다. 색각 이상이 있는 이용자에게는 아이콘이나 텍스트 같은 다른 단서가 필요합니다.
사용 방법
- HEX, RGB, HSL 중 편한 칸에 색상 값을 입력하거나, 위쪽 색상 피커로 색을 고르세요.
- 한 칸을 바꾸면 나머지 형식과 미리보기 스와치가 자동으로 동기화됩니다.
- 스와치 아래에서 흰색·검정 글자의 대비비(contrast)와 WCAG AA/AAA 통과 여부를 확인하세요.
- 팔레트 영역에서 명도 단계(shade·tint)와 보색을 생성하고, 칩을 클릭해 HEX 값을 복사하세요.