색상 조합 생성기

무료 색상 조합 생성기: 색상환에서 색을 고르면 보색·유사색·3색 조화 배색을 자동 추천. 팔레트 비교, WCAG 대비 검사, 이미지 다운로드·공유까지.

밝기

색상환에서 드래그하세요: 원을 따라 돌리면 색상, 바깥으로 갈수록 채도가 높아져요. 아래 팔레트의 색 칩을 눌러 조정할 색을 바꿀 수 있어요.

배색 추천

지금 색을 기준으로 만들어요. 색 칩을 눌러 현재 팔레트에 추가하거나 한 세트를 새 팔레트로 만들 수 있어요.

검사할 팔레트

행은 글자색, 열은 배경색이에요. 일반 글자는 AA(4.5:1), 큰 글자는 3:1 이상이어야 해요.

🔒 모든 계산은 브라우저 안에서 이뤄지며 데이터는 어떤 서버에도 업로드되지 않아요.

팔레트의 색 칩을 눌러 조정할 색을 고른 다음 위쪽 색상환에서 드래그하세요. 원을 따라 돌리면 색상이, 바깥으로 갈수록 채도가 높아지고, 아래 슬라이더로 밝기를 조절해요.
"배색 추천"은 지금 색을 기준으로 보색, 유사색, 3색 조화 등을 만들어 줘요. 색 칩을 눌러 팔레트에 추가하거나 한 세트를 통째로 새 팔레트로 만들 수 있어요.
"나란히 비교"에서 어울리는 배색을 고르고, "대비 검사"로 글자가 잘 읽히는지 확인한 뒤 클릭 한 번으로 CSS 변수를 내보내세요.

추천 배색은 어떻게 만들어지나요?

색채학의 고전적인 배색 규칙에 따라 색상환에서 지금 색의 색상을 회전시켜요. 보색은 180°, 유사색은 좌우 30°, 3색 조화는 120°, 4색 조화는 90°씩이고, 단색 배색은 색상은 그대로 두고 명암만 바꿔요.

WCAG 대비란 무엇인가요?

WCAG는 국제 웹 접근성 지침이에요. 글자와 배경의 대비는 일반 글자는 4.5:1(AA) 이상, 큰 글자는 3:1 이상이어야 하고, 7:1 이상이면 가장 높은 AAA 등급이에요.

브랜드 색상 코드를 바로 붙여넣을 수 있나요?

네. 색 칩 옆 입력란에 #RRGGBB, #RGB, rgb(), hsl(), CSS 색 이름(예: tomato)을 붙여넣으면 자동으로 HEX로 바뀌어요.

팔레트가 저장되나요?

팔레트는 이 기기의 브라우저에만 저장돼서 다음에 열어도 그대로 있어요. 서버로 업로드되지 않아요.