본문으로 건너뛰기
ToolMug

↑ ↓로 이동, Enter로 열기, Esc로 닫기.

색 조합 팔레트 생성기

“생성”(또는 스페이스바)을 누르면 새 팔레트가 만들어져요. 남기고 싶은 색은 잠그고, 유사색이나 보색 같은 색 조합을 고르면, 어떤 색이 어떤 배경 위의 글자로 읽기 좋은지 한눈에 볼 수 있어요. 결과는 CSS 변수, Tailwind 테마 색상, 일반 HEX 코드로 복사할 수 있어요.

브라우저에서 실행 — 입력한 내용은 업로드되지 않아요

  • 🎨

    #22333B

    흰색 글자 13.1:1 AAA

  • 🎨

    #3D6B72

    흰색 글자 5.9:1 AA

  • 🎨

    #7FB3A8

    검정 글자 8.9:1 AAA

  • 🎨

    #E6D3A3

    검정 글자 14.2:1 AAA

  • 🎨

    #F4EFE6

    검정 글자 18.3:1 AAA

내보내기

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

미리보기

이 팔레트로 만든 제목

본문은 가장 밝은 색 위에 가장 어두운 색을 사용합니다. 이 팔레트로 만든 페이지가 읽기 쉬운지 판단할 수 있어요.

버튼링크

배경 위 글자 11.4:1 · 배경 위 링크 5.2:1

글자색과 배경색으로 어울리는 조합

각 칸은 행의 색 글자를 열의 색 배경 위에 놓은 모습입니다. AA(4.5:1)는 본문에 대한 WCAG 최소 기준, AAA는 7:1이고, “AA 큰 글자”(3:1)는 큰 글자나 굵은 제목에만 충분합니다.

글자 ↓ / 배경 →#22333b#3d6b72#7fb3a8#e6d3a3#f4efe6
#22333b2.2✗5.6AA8.9AAA11.4AAA
#3d6b722.2✗2.5✗4AA 큰 글자5.2AA
#7fb3a85.6AA2.5✗1.6✗2.1✗
#e6d3a38.9AAA4AA 큰 글자1.6✗1.3✗
#f4efe611.4AAA5.2AA2.1✗1.3✗
이 도구, 잘 작동하나요?

사용 방법

  1. 마음에 드는 색이 나올 때까지 “생성”이나 스페이스바를 누르세요.
  2. 색의 🔒를 클릭하면 그 색을 유지해요. HEX 코드를 입력하거나 🎨로 직접 색을 지정해도 되고, 다음 팔레트는 잠근 색을 중심으로 만들어져요.
  3. 대비 표를 확인한 다음, 필요한 형식으로 팔레트를 복사하거나 PNG로 다운로드하세요.

옵션 설명

색 조합
유사색은 이웃한 색상, 단색은 한 가지 색상에서 밝기만 달리한 것, 보색은 반대편 색상, 삼색 조합은 간격이 같은 세 색상, 분할 보색은 한 색상과 그 반대편 양옆의 두 색상이에요. “아무거나(섞어서)”는 매번 무작위로 골라요.
잠근 색
있는 그대로 유지돼요. 회색이 아닌 첫 번째 잠근 색이 나머지 색의 기준 색상도 정해요.
대비 표
각 칸은 팔레트의 한 색 글자를 다른 색 배경 위에 놓은 모습이에요. AA(4.5:1)는 본문에 대한 WCAG 2 최소 기준, AAA는 7:1이고, 3:1은 큰 글자나 굵은 글자에만 충분해요.
공유 링크
색상이 페이지 주소(#22333b-3d6b72-…)에 저장되므로, 팔레트를 북마크하거나 다른 사람에게 보낼 수 있어요.

색 조합 고르기

색 조합 느낌 어울리는 용도
단색(모노크롬) 한 가지 색상을 어두운 색에서 밝은 색까지 차분한 화면, 브랜드 색의 농담, 계열이 하나인 차트
유사색 이웃한 색상(예: 청록에서 파랑) 사진이나 일러스트에 어울리는 자연스럽고 부드러운 팔레트
보색 반대편에 있는 두 색상 나머지 색에서 눈에 띄는 강조색을 하나 쓰고 싶을 때
삼색 조합 120° 간격의 세 색상 발랄하고 다채로운 디자인
분할 보색 한 색상과 그 반대편 양옆의 두 색상 보색보다 충돌이 적은 대비

웹사이트에서 쓸 수 있는 팔레트 만들기

  1. 가장 밝은 색을 페이지 배경으로, 가장 어두운 색을 글자로 쓰세요. 미리보기에 바로 이 조합이 나와요.
  2. 가장 눈에 띄는 색을 버튼과 링크에 쓰세요. 배경과의 대비를 확인하세요. AA를 통과하려면 링크는 4.5:1이 필요해요.
  3. 중간 색은 대비가 덜 중요한 테두리, 패널, 태그, 일러스트에 쓰세요.

자주 묻는 질문

색은 어떻게 고르나요?

눈에 비치는 선명함에 맞춘 OKLCH 색 공간에서 골라요. 색상은 고른 색 조합을 따르고, 밝기는 팔레트 전체에서 어두운 색부터 밝은 색까지 이어지며, 채도는 일반 sRGB 화면에서 표시할 수 있는 범위로 제한돼요.

브랜드 색 하나로 팔레트를 만들려면 어떻게 하나요?

아무 칸에나 색을 입력해 잠그고, “단색(모노크롬)”이나 “유사색”을 고른 다음 “생성”을 누르세요. 나머지 색은 그 색의 색상을 중심으로 만들어져요.

글자에는 어떤 색을 써야 하나요?

각 색 견본에 검정과 흰색 중 어느 글자가 더 잘 읽히는지와 대비 비율이 표시돼요. 팔레트 색을 글자로 쓸 때는 표를 보세요. 본문에 안전한 조합은 AA나 AAA로 표시된 것뿐이에요.

Tailwind 내보내기는 어떻게 쓰나요?

Tailwind CSS v4의 @theme 블록이에요. 메인 CSS 파일에 붙여 넣으면 bg-palette-1, text-palette-3 같은 클래스를 쓸 수 있어요.

개인정보 보호

이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.

관련 도구