컬러 팔레트 · 어울리는 색 조합 만들기

완성된 팔레트를 골라 쓰거나, 내 색을 기준으로 어울리는 색 조합을 만들어요.

바로 쓰는 팔레트

내 색으로 조합 만들기

완성된 색 조합이 준비되어 있어요. 팔레트의 HEX 코드를 통째로 복사하거나, 필요한 색만 복사해요.

내 색으로 조합 만들기

기준 색과 조합 규칙을 고르면, 그 색에 맞춰 팔레트를 만들어요.

조합 규칙

색 코드

조합 규칙 알아보기

색을 둥글게 늘어놓은 색상환에서 각도 차이로 조합을 만들어요. 단색조는 색상 각도를 그대로 두고 밝기를 바꿔요.

보색 180°
기준 색과 색상환에서 180° 떨어진 맞은편 색을 묶어요.
유사색 ±30°
기준 색과 색상환에서 양옆으로 30°씩 떨어진 이웃 색을 묶어요.
삼색 120°
색상환에서 120° 간격으로 고르게 떨어진 색을 묶어요.
분할보색 180°±30°
기준 색의 맞은편인 180° 지점에서 양옆으로 30°씩 떨어진 색을 기준 색과 묶어요.
단색조 0°
색상 각도 차이는 0°로 유지하고, 밝기를 달리해 묶어요.

글자색·배경색으로 쓸 때

보색 #3366CC, #CC9933

#3366CC ↔ #CC9933 · 2.08:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달

단색조 #7A1F3D, #B82E5C, #D65C85, #E599B2

#7A1F3D ↔ #B82E5C · 1.71:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#7A1F3D ↔ #D65C85 · 2.73:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#7A1F3D ↔ #E599B2 · 4.55:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과
#B82E5C ↔ #D65C85 · 1.59:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#B82E5C ↔ #E599B2 · 2.65:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#D65C85 ↔ #E599B2 · 1.66:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달

유사색 #66CC33, #B3CC33, #33CC4C

#66CC33 ↔ #B3CC33 · 1.13:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#66CC33 ↔ #33CC4C · 1.03:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#B3CC33 ↔ #33CC4C · 1.17:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달

단색조 #1F3D7A, #2E5CB8, #5C85D6, #99B3E5

#1F3D7A ↔ #2E5CB8 · 1.66:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#1F3D7A ↔ #5C85D6 · 2.88:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#1F3D7A ↔ #99B3E5 · 4.95:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과
#2E5CB8 ↔ #5C85D6 · 1.73:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#2E5CB8 ↔ #99B3E5 · 2.97:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달
#5C85D6 ↔ #99B3E5 · 1.71:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달

조합마다 표시되는 명암비로 글자색과 배경색의 밝기 차이를 확인해요. 계산한 대비 수치이며, 접근성 기준 준수를 보증하지는 않아요.

이미지에서 색을 뽑거나 인쇄색(CMYK·팬톤)으로 바꾸는 기능은 제공하지 않아요.

원문 직접 선택