색상 팔레트 생성기.

가지고 있는 색상이나 무작위 색상에서 시작해, 잘 어울리는 다섯 가지 색상 primary, secondary, tertiary, neutral, surface를 받아 보세요. 마음에 드는 색을 잠그고 다시 생성하면 나머지만 바뀝니다. 브라우저에서 실행되므로 고른 색상은 업로드되지 않습니다.

시작 색상조화 규칙

스페이스바를 누르면 새 팔레트를 생성합니다.

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.

색상 팔레트 생성 방법

색상 하나로 시작하세요. 색상 견본으로 고르거나 HEX, rgb(), hsl(), oklch()로 입력합니다. 이 색상이 primary가 됩니다. 아니면 생성 버튼을 눌러 탁하지도 형광색도 아닌 무작위 색상에서 시작할 수도 있습니다.
조화 규칙을 고르세요: 유사색, 보색, 삼각 배색, 분할 보색, 단색. secondary와 tertiary 색상이 어떤 색조를 쓸지 정합니다.
다시 생성하세요. 버튼을 누르거나, 선택된 입력란이 없을 때 스페이스바를 누르면 새로운 변형이 나옵니다. 잠그지 않은 색상이 바뀝니다. primary가 잠겨 있지 않으면 생성할 때마다 시작 색상도 새 무작위 색상이 되므로, 내 색상을 유지하려면 잠가 두세요.
마음에 드는 색상을 잠그세요. 각 견본의 자물쇠는 그 색상을 이후 모든 생성에서 유지합니다. 색상을 하나씩 정하며 팔레트를 완성할 수 있습니다.
결과를 복사하세요. 각 견본에는 역할 이름, HEX 코드, OKLCH 값이 표시되고 HEX 옆에는 복사 버튼이 있습니다. 견본 아래의 내보내기 탭 세 개에는 필요한 형식으로 팔레트 전체가 들어 있습니다.

다섯 가지 색상

primary는 시작 색상입니다.
secondary와 tertiary는 포인트 색상으로, 색조는 조화 규칙이 정합니다. secondary는 중간 톤이고 tertiary는 더 밝은 색입니다. 단색에서는 내 색상보다 어두운 색과 밝은 색이 됩니다.
neutral은 내 색상의 색조가 살짝 섞인 어두운 회색으로, 보조 텍스트와 캡션에 씁니다.
surface는 같은 색조가 살짝 섞인 흰색에 가까운 색으로, 배경에 씁니다.

복사할 수 있는 형식

HEX: 다섯 개의 코드를 위 순서대로 한 줄에 하나씩.
Tailwind v4 @theme: --color-primary, --color-secondary, --color-tertiary, --color-neutral, --color-surface를 oklch() 값으로 정의하는 @theme 블록. CSS 파일에 붙여 넣으면 bg-primary, text-neutral 같은 클래스를 쓸 수 있습니다. 프로젝트가 shadcn/ui를 쓰고 있어 이 이름 중 일부가 이미 정의되어 있다면 shadcn 테마 생성기를 대신 쓰세요.
DESIGN.md 색상: 다섯 가지 역할을 HEX 코드로 적은 colors: 블록. DESIGN.md의 프런트매터에 넣습니다.

Codex와 함께 쓰기

팔레트는 Codex가 보는 곳에 적어 두어야 쓸모가 있습니다. DESIGN.md에는 색상 역할이 일곱 가지 있어, 이 도구가 만드는 것보다 두 개 많습니다. primary 위의 텍스트 색상인 on-primary와 본문 텍스트 색상인 on-surface입니다. 세트를 완성하려면:

DESIGN.md 색상을 복사해 DESIGN.md에 넣거나, HEX 코드 다섯 개를 DESIGN.md 생성기에 붙여 넣으세요. 생성기는 on-primary와 on-surface도 물어보고, 명도 대비가 4.5:1 미만인 색상 조합을 알려 줍니다.
쓸 조합을 확인하세요. 텍스트에 쓸 조합은 명도 대비 검사기로 확인합니다.
AGENTS.md에서 파일을 가리키세요. 방법은 DESIGN.md 가이드에 나와 있습니다.

Codex가 나머지를 채우게 하려면 코드를 프롬프트에 붙여 넣으세요:

팔레트를 DESIGN.md로

내가 고른 색상은 primary [HEX], secondary [HEX], tertiary [HEX], neutral [HEX], surface [HEX]야. 이 색상들을 저장소 루트의 DESIGN.md colors 섹션에 적어 줘. on-primary와 on-surface도 추가하되, 각각 흰색이나 거의 검은색 중에서 골라서 primary 위의 on-primary와 surface 위의 on-surface가 명도 대비 4.5:1 이상이 되게 해 줘. 어떤 조합이 그 기준에 못 미치면 내 색상은 바꾸지 말고, 어느 조합이 미달인지와 고치는 가장 작은 변경을 알려 줘. 그다음 이 색상들만 사용해 [홈] 화면을 디자인하고, 그 밖에 필요했던 것을 나열해 줘.

자주 묻는 질문

무료인가요?

네. 무료이고, 회원가입이 필요 없으며, 생성할 수 있는 팔레트 수에도 제한이 없습니다.

고른 색상이 업로드되나요?

아니요. 팔레트는 브라우저에서 만들어지며 어디로도 전송되거나 저장되지 않으므로, 보관하고 싶은 색상은 페이지를 떠나기 전에 복사하세요. 사이트는 도구가 사용되었다는 사실만 집계하고 색상은 기록하지 않습니다.

팔레트는 어떻게 만들어지나요?

OKLCH로 계산합니다. OKLCH는 명도가 같은 만큼 바뀌면 눈에 보이는 차이도 같은 색 공간입니다. 시작 색상이 primary가 되고, 조화 규칙이 secondary와 tertiary의 색조를 primary에서 얼마나 떨어뜨릴지 정합니다. 유사색은 양쪽으로 30°, 보색은 180°와 30°, 삼각 배색은 120°와 240°, 분할 보색은 150°와 210°이고, 단색은 이동하지 않습니다. 포인트 색상의 채도는 한도 안에서 내 색상의 채도에 가깝게 맞추므로, 차분한 색에서 시작하면 포인트 색상도 차분합니다. 나머지 네 가지 색상도 생성할 때마다 명도와 채도가 조금씩 달라지므로, 같은 시작 색상과 조화 규칙으로도 생성할 때마다 새로운 변형이 나옵니다.

명도 대비도 검사하나요?

아니요. 팔레트의 한 색상 위에서 다른 색상이 얼마나 잘 읽히는지는 검사하지 않으므로, 텍스트에 쓸 조합은 확정하기 전에 명도 대비 검사기로 확인하세요.