본문으로 건너뛰기
EVOA Toolbox

색상 팔레트 생성기

기준 색상에서 색상 조화를 만들고, 마음에 드는 색을 고정하고, WCAG 대비를 확인한 뒤 CSS, Tailwind, JSON, PNG로 내보내세요.

브라우저에서 로컬로 처리됩니다. 텍스트는 업로드되지 않습니다.

도구를 불러오는 중…

도구 소개

기준 색상을 고르면 색채 이론에 따라 보색, 유사색, 삼색 조화, 사각 조화, 분할 보색, 단색 조화, 또는 명암·농담 단계로 이루어진 팔레트가 바로 만들어집니다. 색상 계산은 HSL에서 이루어지며, 각 견본에는 값이 HEX, RGB, HSL, OKLCH로 표시되어 사용하는 환경에 맞는 값을 복사할 수 있습니다.

각 견본에는 흰색·검은색 텍스트에 대한 대비 비율과 WCAG AA(4.5:1), AAA(7:1) 또는 큰 텍스트 기준(3:1)만 충족하는지도 함께 표시되므로 버튼과 배경 색상을 고를 때 도움이 됩니다. 무작위 버튼을 눌러 색을 탐색해 보세요. 마음에 드는 색을 고정하면 나머지 색만 그 주변에서 바뀝니다.

마음에 들면 팔레트를 CSS 사용자 지정 속성, Tailwind v4 @theme 블록, Tailwind v3 설정 확장, JSON, 또는 PNG 견본 이미지로 내보내세요. 모든 작업이 로컬에서 실행되며 어디로도 전송되지 않습니다.

사용 방법

  1. 1색상 선택기로 기준 색상을 고르거나 #2f5bea 같은 hex 값을 입력하세요.
  2. 2색상 조화를 선택하세요. 단색 조화, 명암, 농담에서는 개수 슬라이더를 사용하세요.
  3. 3무작위 버튼으로 탐색하고, 유지하고 싶은 색은 고정하세요.
  4. 4텍스트나 버튼에 사용하기 전에 각 견본의 대비 표시를 확인하세요.
  5. 5견본별로 값을 복사하거나 팔레트 전체를 필요한 형식으로 내보내세요.

지원 형식

입력: HEX 색상(#rgb 또는 #rrggbb). 출력: CSS 변수, Tailwind v3/v4 코드 조각, JSON, PNG.

프라이버시

이 도구는 브라우저에서 실행됩니다. 입력하신 데이터는 사용자의 기기에서 처리되며 당사 서버로 전송되지 않습니다.

제한 사항

  • 색상 조화는 수학적으로 계산한 제안일 뿐 완성된 디자인이 아닙니다. 눈으로 확인하며 조정하고 실제 사용 환경에서 테스트하세요.
  • 대비는 견본 색상을 순수한 흰색과 순수한 검은색에 대해서만 측정합니다. 실제 텍스트와 배경 조합은 따로 확인하세요.
  • 색의 보이는 모습은 화면과 색상 프로파일에 따라 다르며, 값은 sRGB 기준입니다.
  • 알파/불투명도 값은 팔레트에 포함되지 않습니다.

FAQ

유사색과 삼색 조화는 어떻게 다른가요?

유사색은 색상환에서 서로 이웃해 있는(30도 간격) 색으로 차분하고 조화로운 느낌을 줍니다. 삼색 조화는 120도 간격의 색으로 더 다양하고 대비가 뚜렷합니다.

AA와 AAA는 무엇인가요?

텍스트에 대한 WCAG 2 대비 수준입니다. AA는 일반 텍스트에 4.5:1(큰 텍스트는 3:1), AAA는 일반 텍스트에 7:1이 필요합니다. 이 도구는 각 견본이 흰색과 검은색에 대해 도달하는 가장 높은 수준을 표시합니다.

고정은 어떻게 작동하나요?

고정된 견본은 무작위 버튼을 누르거나 기준 색상 또는 색상 조화를 바꿔도 색이 유지됩니다. 이미 마음에 드는 색을 중심으로 팔레트를 만들 수 있습니다.

Tailwind에는 어떤 내보내기를 써야 하나요?

Tailwind 4(CSS 우선 설정)에는 v4 @theme 출력을, 아직 tailwind.config.js를 사용하는 프로젝트에는 v3 설정 출력을 사용하세요.

관련 도구