색상 팔레트 생성기

기능

보색

유사색

3색 배색

분할 보색

CSS 변수로 내보내기

사용 방법

1. 기본 색상과 배색 방식을 고르면 스테이지가 팔레트로 채워집니다.

2. 스페이스 키(또는 셔플)로 다른 조합을 시도해 보세요. 색상 열에 마우스를 올리면 복사, 편집, 명도 단계 열기, 잠금이 가능합니다.

3. 스테이지 배경(흰색 / 회색 / 짙은색 / 체커)을 바꿔 다양한 환경에서 배색을 검증한 뒤 CSS, Tailwind, JSON, SVG, PNG로 내보내세요.

이 도구에 대하여

좋은 팔레트는 우연히 나오기보다 대부분 색상환 위의 관계를 따릅니다. 이 생성기는 기본 색 하나에서 출발해 고전적인 배색 규칙으로 6색 팔레트를 만듭니다. 유사색(인접한 색상으로 차분한 디자인에), 단색(한 색상의 명도만 다르게), 보색(반대편 색상으로 강한 대비), 분할 보색, 삼각 배색, 사각 배색이 있습니다. 각 열에는 색상 값과 대략적인 색 이름이 표시되며, 복사하거나 편집하거나 명암 단계를 펼치거나, 다른 색을 섞어도 바뀌지 않도록 고정할 수 있습니다. 흰색·회색·어두운 배경이나 투명 체크무늬 배경에서 팔레트를 확인한 뒤 CSS 변수, Tailwind 색상 설정, JSON, SVG, PNG 색상표로 내보낼 수 있습니다.

자주 묻는 질문

배색 방식들은 어떻게 다른가요?

유사색은 인접한 색상, 단색은 한 색상에서 명도만 바꾸고, 보색은 반대편 색상을 짝지으며, 분할 보색은 보색 양옆의 색상을 씁니다. 삼각 배색은 120°씩 떨어진 세 색상, 사각 배색은 90°씩 떨어진 네 색상입니다.

웹사이트에는 어떤 배색이 좋나요?

인터페이스에는 차분한 느낌을 주는 유사색이나 단색 배색이 가장 다루기 쉽습니다. 보색과 삼각 배색은 강한 강조색을 주므로, 주색 하나와 보조색 하나를 두고 행동 유도 버튼에 보색을 조금 쓰는 방식이 흔합니다.

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

열을 고정하면 스페이스 키나 섞기로 변형을 만들어도 그 색은 그대로 유지됩니다. 브랜드 색이 정해져 있고 어울리는 색을 찾고 싶을 때 유용합니다.

생성된 팔레트는 접근성 기준을 충족하나요?

조화로운 배색이 읽기 쉬운 명암비를 보장하지는 않습니다. 팔레트의 두 색을 글자와 배경으로 쓰기 전에 명암비 검사기로 WCAG AA(본문 4.5:1)를 충족하는지 확인하세요.

어떤 형식으로 내보낼 수 있나요?

CSS 사용자 정의 속성, Tailwind의 theme.extend.colors 코드, HEX 값의 JSON 배열, 색상 견본이 담긴 SVG 파일, 그리고 각 열에 값이 적힌 1500 × 900 PNG 이미지입니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구