색상 팔레트 만들기·명도 대비 검사

색상 팔레트·명도 대비 검사 사용 방법

1. 1

   색상 정하기

   기준 색상을 입력하거나 고른 다음 유사색, 삼색 조화, 분할 보색 같은 조화를 선택하세요. 랜덤 팔레트를 섞어 볼 수도 있어요.

2. 2

   고정하고 다듬기

   마음에 드는 색을 고정한 뒤 다시 섞거나, 색을 직접 수정하세요. 사진에서 주요 색 5개를 뽑아낼 수도 있어요.

3. 3

   가독성 확인

   대비 탭에서 배경 위 텍스트가 WCAG 2.2 AA와 AAA 기준을 통과하는지 확인하고, 제안된 수정안을 적용하세요. 색맹 시뮬레이션으로 팔레트를 미리 볼 수도 있어요.

4. 4

   내보내기

   50–950 셰이드가 담긴 CSS 변수, Tailwind v4 테마, v3 설정, SCSS, JSON을 복사하거나 PNG 견본을 다운로드하세요.

색상 팔레트·명도 대비 검사 소개

색상 팔레트 생성기는 5가지 색으로 이루어진 배색과 디자인 시스템에 필요한 모든 것을 만들어 줘요. 조화는 HSL 색상환에서 기준 색조를 돌려 만들어요. 유사색은 양쪽으로 30°씩 이동하고, 보색은 반대편 색조를 더해요. 분할 보색은 반대편 양옆의 두 색조를 쓰고, 삼색 조화는 120° 간격으로 색조 3개를 놓아요. 사색 조화는 90° 정사각형 배치를 쓰고, 단색은 한 가지 색조를 명도 5단계로 보여 줘요. 랜덤 모드는 고정한 색을 그대로 두고, 이미지 옵션은 사진의 픽셀을 OKLab에서 묶어 가장 흔하면서 서로 뚜렷이 다른 색 5개를 찾아요.

셰이드 탭은 색마다 OKLCH 기준 50–950의 11단계를 만들어요. 입력한 색과 가장 가까운 단계가 정확한 값이에요. Material 3 HCT 체계의 13가지 톤과 Material 테마가 만드는 키 팔레트 5개도 볼 수 있어요. 대비 검사기는 WCAG 2.2 휘도 공식을 쓰고, 대비율을 절대 올림하지 않아요. 색조는 그대로 두고 명도만 바꿔 기준을 통과하는 가장 가까운 색을 제안해요. 표에서는 팔레트의 모든 색이 흰색, 검은색과 이루는 대비율을 볼 수 있어요.

시뮬레이션은 Machado 행렬로 1형·2형·3형 색각 이상과 전색맹을 보여 주고, 서로 구분이 안 되는 색은 표시해요. 내보내기에서는 색조에 따라 이름이 붙고, 원하는 이름으로 바꿀 수도 있어요. 이 도구는 색이 브랜드에 어울리는지는 판단하지 않아요. 시뮬레이션도 색각 이상이 있는 사람의 시각을 근사한 것이라, 실제 사용자 테스트를 대신할 수 없어요.

기능

색상 팔레트·명도 대비 검사: 자주 묻는 질문