컬러 팔레트 생성기

이렇게 씁니다

1. 기준 색상(HEX)을 넣습니다. 예: `#7c3aed`
2. 색이 없으면 브랜드 키워드를 적어도 됩니다. 예: `따뜻한 카페` — 글자에서 색을 만들어 냅니다.
3. 무드를 고릅니다 — 모던 · 따뜻한 · 차분한 · 비비드.
4. 실행하기를 누르면 역할표 · CSS 변수 · 대비 검사가 나옵니다.

역할 7색과 무드가 실제로 하는 일

Primary     기준 색 그대로        버튼 · 링크 · 강조
Accent      색상 +32°, 명도 +14   포인트 · 그라데이션 짝
Secondary   반대편 +180°, 채도 −25 보조 강조(아이콘 · 배지)
Background  같은 색상 · 채도18 · **명도 10**   다크 배경
Surface     같은 색상 · 채도14 · **명도 16**   카드 배경
Text        같은 색상 · 채도8  · **명도 92**   본문 텍스트
Muted       같은 색상 · 채도10 · 명도 62       보조 텍스트

→ 배경이 명도 10, 텍스트가 92 이므로 **다크 테마 한 세트**가 나옵니다.
  밝은 테마가 필요하면 Background·Surface·Text 를 직접 뒤집어 쓰세요.

[무드가 바꾸는 것 — 채도뿐입니다]
  모던    ±0     ← **따뜻한과 결과가 같습니다**
  따뜻한  ±0     ← 모던과 같습니다(색상은 안 바뀝니다)
  차분한  채도 −25   은은하게
  비비드  채도 +20   선명하게
  → 실제로 달라지는 것은 '차분한'과 '비비드' 둘입니다. 과장하지 않고 그대로 알립니다.

[키워드를 넣으면]  글자를 숫자로 바꿔 색상환 위치를 정합니다(채도 62 · 명도 52).
  무작위가 아니라 **같은 키워드는 항상 같은 색**이 나옵니다.

결과 맨 아래에 **Primary 위 흰 글자 대비**가 `n:1` 로 나옵니다. **4.5 이상이면 본문에 써도 되는 수준**입니다. 이 수치가 낮으면 아무리 예쁜 색이어도 버튼 글자가 안 읽히니 색을 바꾸거나 글자를 어둡게 하세요.

결과 읽는 법

• CSS 변수 블록은 그대로 복사해 `:root` 에 붙여넣으면 됩니다.
• Primary 는 화면의 10% 이내로만 쓰세요. 강조색이 넓게 깔리면 강조가 사라집니다.
• 대비 수치가 4.5 미만이면 버튼 글자를 흰색이 아니라 어두운 색으로 바꾸세요.
• Secondary(반대편 색)는 경고·삭제처럼 성격이 다른 동작에 쓰면 자연스럽습니다.

주의할 점

• **나오는 배경·텍스트 색은 다크 테마 기준**입니다. 밝은 테마는 직접 뒤집어야 합니다.
• 무드 '모던' 과 '따뜻한' 은 같은 결과를 냅니다.
• 색만으로 정보를 구분하지 마세요. 색각 이상이 있는 사용자가 구분하지 못합니다. 아이콘이나 문구를 함께 쓰세요.
• 입력값은 브라우저 안에서만 처리되고 서버로 전송되지 않습니다. 설치·가입도 없습니다.

NB Design Tools의 다른 도구

• 이미지 비율 계산기 — 비율을 유지한 채 이미지 크기를 계산합니다
• CTA 문구 만들기 — 유도할 행동과 톤으로 버튼 문구 후보를 만듭니다
• 배너 문구 만들기 — 상품과 혜택으로 배너 카피와 크기별 가이드를 만듭니다
• 디자인 브리프 작성 — 프로젝트와 요구사항으로 디자인 요청서를 만듭니다
• 폰트 추천 — 콘텐츠 성격과 플랫폼을 고르면 폰트 조합과 타이포 크기를 알려줍니다