단색조 0°
#7A1F3D ↔ #E699B3 · 명암비 4.57:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과컬러 팔레트 · 어울리는 색 조합 만들기
완성된 팔레트를 골라 쓰거나, 내 색을 기준으로 어울리는 색 조합을 만들어요.
바로 쓰는 팔레트
보색 180°
#3366CC ↔ #CC9933 · 명암비 2.08:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달유사색 ±30°
#B3CC33 ↔ #33CC4D · 명암비 1.17:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달HEX는 전체나 필요한 색만 복사해요.
내 색으로 조합 만들기
기준 색과 조합 규칙을 고르면, 그 색에 맞춰 팔레트를 만들어요.
HEX 3·6자리, RGB, HSL, CSS 색 이름을 입력하세요. 끝의 ;는 1개까지 허용합니다. Enter 또는 적용으로 확정합니다.
RGB: rgb(51, 51, 51)처럼 쉼표로 나눈 0–255 정수 3개. 소수·%는 쓸 수 없습니다.
HSL: hsl(0, 0%, 20%)처럼 쉼표로 나눈 세 값. 색상은 단위 없이 0 이상 360 미만, 채도·명도는 0–100%. 소수도 쓸 수 있습니다.
색 이름: gold처럼 색 이름표의 영문 CSS 이름만 쓸 수 있습니다. 대소문자는 구분하지 않습니다.
무채색은 색상환에 정해진 위치가 없어 밝기만 달리하는 단색조로 바꿔요.
기준 색 #3366CC
기준 색으로 만든 4색입니다. 기준 색은 별도로 표시합니다.
단색조 0°
#1F3D7A ↔ #99B3E6 · 명암비 4.95:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과흰 글자·검정 글자 대비
| 배경색 | 흰 글자 | 검정 글자 |
|---|---|---|
| #1F3D7A | 10.46:1 · 통과 | 2.00:1 · 미달 |
| #2E5CB8 | 6.28:1 · 통과 | 3.33:1 · 미달 |
| #5C85D6 | 3.63:1 · 미달 | 5.78:1 · 통과 |
| #99B3E6 | 2.11:1 · 미달 | 9.94:1 · 통과 |
조합 규칙 알아보기
완성된 색 조합이 준비되어 있어요. 팔레트의 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, #E699B3
#7A1F3D ↔ #B82E5C · 1.71:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#7A1F3D ↔ #D65C85 · 2.73:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#7A1F3D ↔ #E699B3 · 4.57:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과#B82E5C ↔ #D65C85 · 1.59:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#B82E5C ↔ #E699B3 · 2.67:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#D65C85 ↔ #E699B3 · 1.67:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달유사색 #66CC33, #B3CC33, #33CC4D
#66CC33 ↔ #B3CC33 · 1.13:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#66CC33 ↔ #33CC4D · 1.03:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#B3CC33 ↔ #33CC4D · 1.17:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달단색조 #1F3D7A, #2E5CB8, #5C85D6, #99B3E6
#1F3D7A ↔ #2E5CB8 · 1.66:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#1F3D7A ↔ #5C85D6 · 2.88:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#1F3D7A ↔ #99B3E6 · 4.95:1✓ 일반 텍스트 통과✓ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 통과#2E5CB8 ↔ #5C85D6 · 1.73:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#2E5CB8 ↔ #99B3E6 · 2.97:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달#5C85D6 ↔ #99B3E6 · 1.72:1✕ 일반 텍스트 미달✕ 큰 텍스트(24px 이상, 굵은 글씨는 19px 이상) 미달조합마다 표시되는 명암비로 글자색과 배경색의 밝기 차이를 확인해요. 계산한 대비 수치이며, 접근성 기준 준수를 보증하지는 않아요.
이미지에서 색을 뽑거나 인쇄색(CMYK·팬톤)으로 바꾸는 기능은 제공하지 않아요.