팔레트 생성기

색상 팔레트 생성기란

디자인에 쓸 5가지 색 조합(배색)을 자동으로 만들어 주는 도구입니다. 색상환의 조화 규칙에 따라 어울리는 색을 뽑아 주므로, 웹사이트·발표 자료·브랜드 컬러·일러스트 등 색 조합이 필요한 모든 작업에 활용할 수 있습니다. 마음에 드는 색을 잠근 채 나머지만 계속 바꿔 가며 원하는 조합을 찾아보세요.

조화 규칙 설명

• 랜덤 — 규칙 없이 다양한 색을 자유롭게 뽑습니다. 아이디어 탐색에 좋습니다.
• 모노크롬 — 한 가지 색상에서 명도·채도만 달리한 톤온톤 조합. 차분하고 정돈된 느낌.
• 유사색 (Analogous) — 색상환에서 서로 이웃한 색들. 자연스럽고 부드러운 흐름을 만듭니다.
• 보색 (Complementary) — 색상환 반대편(180도) 색을 함께 사용해 또렷한 대비를 줍니다.
• 3색조 (Triadic) — 색상환을 120도씩 3등분한 색들. 균형 잡힌 생동감이 특징.
• 파스텔 — 채도를 낮추고 명도를 높인 은은한 색. 배경·일러스트에 잘 어울립니다.

사용 방법

• ① 조화 규칙을 고르고 스페이스바(또는 새 팔레트 버튼)를 누릅니다.
• ② 마음에 드는 색은 자물쇠를 눌러 잠급니다. 잠긴 색은 재생성에서 제외됩니다.
• ③ HEX 코드를 클릭해 복사하거나, CSS 변수·Tailwind·PNG로 한 번에 내보냅니다.
• ④ 링크 복사 버튼으로 주소를 공유하면 상대방에게 같은 팔레트가 열립니다.

색이 만들어지는 방식

색은 HSL(색상·채도·명도) 기준으로 만들어집니다. 먼저 기준이 되는 색상 각도를 하나 정한 다음, 선택한 조화 규칙에 따라 각도를 옮기고 채도·명도에 약간의 변화를 주어 5개의 색을 뽑습니다. 예를 들어 유사색은 기준에서 -30도, -15도, 0도, +15도, +30도 위치를 쓰고, 3색조는 120도씩 건너뛴 세 각도를 번갈아 사용합니다. 완성된 HSL 값은 RGB로 바꾼 뒤 여섯 자리 HEX 코드로 표시됩니다.

각 색 아래에는 밝기를 계산해 글자를 검정이나 흰색으로 자동 전환하고, 내장된 27가지 대표 색이름 표에서 가장 가까운 이름을 찾아 함께 보여 줍니다. 모든 계산은 브라우저 안에서만 이루어지며 어떤 값도 서버로 전송되지 않습니다.

내보내기와 공유

• HEX 클릭 — 색 위의 코드를 누르면 그 한 가지 색만 클립보드에 복사됩니다.
• CSS 변수로 복사 — :root 블록 안에 --color-1부터 --color-5까지 변수로 정리해 복사합니다.
• Tailwind 설정으로 복사 — tailwind.config.js의 theme.extend.colors에 바로 넣을 수 있는 형태로 복사합니다.
• PNG로 저장 — 다섯 색을 나란히 붙이고 아래에 HEX 코드를 적은 이미지 파일을 내려받습니다. 시안이나 메신저로 색을 전달할 때 편합니다.
• 링크 복사 — 주소 끝의 # 뒤에 여섯 자리 색 코드 다섯 개가 하이픈으로 이어져 담깁니다. 그 링크를 열면 같은 팔레트가 그대로 복원됩니다.

활용 예시

• 웹사이트나 앱의 강조색·배경색·보조색을 한 번에 정하기
• 발표 자료나 인포그래픽에서 항목별로 쓸 색 다섯 가지 확보하기
• 브랜드 색 하나를 잠가 두고 어울리는 색을 계속 탐색하기
• 정해진 팔레트를 링크로 공유해 팀원과 같은 화면 보며 고르기
• CSS 변수로 내보내 프로젝트 전역 색상 토큰의 출발점으로 삼기

주의점과 팁

• 잠금은 재생성에서 제외한다는 뜻입니다. 여러 색을 잠글수록 새 조합의 변화 폭이 줄어듭니다.
• 글자와 배경으로 함께 쓸 두 색은 명암 대비를 따로 확인하는 것이 안전합니다. 파스텔처럼 밝은 색끼리는 대비가 부족할 수 있습니다.
• 화면 하나에 다섯 색을 모두 같은 비중으로 쓰기보다, 주조색 하나에 강조색 하나를 더하고 나머지는 좁은 면적에 쓰는 편이 정돈되어 보입니다.
• 공유 링크는 주소 안에 색 코드만 담기므로, 링크를 저장해 두면 나중에 같은 팔레트를 다시 열 수 있습니다.
• 스페이스바 단축키는 입력칸이나 버튼에 포커스가 있을 때는 동작하지 않습니다. 빈 곳을 클릭한 뒤 눌러 주세요.

자주 묻는 질문

팔레트는 어떻게 새로 만드나요?

스페이스바를 누르거나 새 팔레트 버튼을 누르면 잠기지 않은 색이 모두 새로 생성됩니다. 마음에 드는 색은 자물쇠를 눌러 잠가 두면 재생성에서 제외됩니다.

조화 규칙은 무엇을 기준으로 색을 만드나요?

색상환(HSL)의 색상 각도를 기준으로 합니다. 모노크롬은 같은 색상에서 명도만, 유사색은 이웃한 색상끼리, 보색은 180도 반대 색상, 3색조는 120도 간격의 세 색상, 파스텔은 채도를 낮추고 명도를 높인 부드러운 색을 만듭니다.

만든 팔레트를 공유하거나 저장할 수 있나요?

네. 주소창의 링크에 팔레트가 그대로 담기므로 링크 복사 버튼으로 공유하면 같은 색 조합이 열립니다. CSS 변수·Tailwind 설정으로 복사하거나 PNG 이미지로 저장할 수도 있습니다.

색 옆에 표시되는 이름은 무엇인가요?

생성된 색과 가장 가까운 대표 색이름(빨강, 하늘, 라벤더 등)을 참고용으로 보여 주는 근사값입니다. 정확한 색은 HEX 코드를 기준으로 사용하세요.

색은 몇 개까지 만들어지나요?

한 번에 다섯 가지 색이 만들어집니다. 각 색은 여섯 자리 HEX 코드로 표시되고, 코드를 누르면 그 색만 따로 복사할 수 있습니다.

CSS나 Tailwind로 바로 옮길 수 있나요?

CSS 변수로 복사를 누르면 :root 블록에 --color-1부터 --color-5까지 정리해 주고, Tailwind 설정으로 복사를 누르면 tailwind.config.js의 colors 항목에 넣을 수 있는 형태로 복사됩니다.

이미지 파일로도 받을 수 있나요?

PNG로 저장 버튼을 누르면 다섯 색을 나란히 붙이고 아래에 HEX 코드를 적은 이미지가 내려받아집니다. 시안이나 메신저로 색을 전달할 때 쓰기 좋습니다.

스페이스바가 동작하지 않아요.

입력칸이나 버튼에 포커스가 있으면 단축키가 동작하지 않습니다. 빈 곳을 클릭한 뒤 다시 눌러 보거나, 새 팔레트 버튼을 사용하세요. 터치 기기에서는 버튼만 사용하면 됩니다.