Sanzo Wada 팔레트
사용자가 "와다 책"의 색상 구성, 산조 와다 팔레트, 특정 조합 번호, 또는 사이트, 브랜드, 디자인, 옷차림에 어울리는 세련된 팔레트를 원할 때 사용합니다.
1. 데이터 가져오기
출처: mattdesl/dictionary-of-colour-combinations (MIT 라이선스). 빈 폴더에 클론합니다:
mkdir -p /tmp/wada && git clone --depth 1 -q https://github.com/mattdesl/dictionary-of-colour-combinations /tmp/wada/repo
대체 방법: 빈 폴더에서 npm install dictionary-of-colour-combinations 실행.
colors.json은 159개 색상의 배열입니다:
{"name": "Hermosa Pink", "combinations": [176, 227, 273], "swatch": 0,
"cmyk": [0,30,6,0], "lab": [...], "rgb": [249,193,206], "hex": "#f9c1ce"}
팔레트는 직접 저장되지 않습니다. 조합 N은 combinations 목록에 N을 포함하는 모든 색상입니다:
import json, collections
colors = json.load(open('/tmp/wada/repo/colors.json'))
combos = collections.defaultdict(list)
for c in colors:
for n in c['combinations']:
combos[n].append(c)
# combos[n] -> 2, 3, 또는 4개의 색상 리스트
Python은 -I 플래그와 함께 실행하고, 스크립트는 클론된 폴더 외부에 유지하세요.
2. 팔레트 선택하기
- 사용자가 조합 번호를 제공하면 바로 사용합니다.
- 그렇지 않으면 요청에 따라 필터링: 색상 개수(2, 3, 4), 분위기(색조로 따뜻함/차가움, LAB 채도로 부드러움/강렬함), 또는 포함할 색상(LAB 거리로 가장 가까운 색상).
- 스위처(4단계)를 위해 5
10개의 후보를 선택합니다. 사이트를 구축하지 않는 경우 35개를 인라인 견본(hex, 이름, 조합 번호)으로 표시합니다. - UI 작업의 경우 WCAG 비율로 텍스트 대비를 확인합니다: 본문 텍스트는 4.5:1. 가장 밝거나 가장 어두운 색상을 배경으로 사용합니다. 실패하는 쌍은 팔레트 색상의 더 밝거나 어두운 색조를 텍스트용으로 파생시키고 이를 기록합니다.
3. 각 팔레트를 테마로 매핑하기
웹 작업(기본적으로 Tailwind/shadcn)의 경우, 각 후보 팔레트를 전체 shadcn CSS 변수 세트로 변환합니다: --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --muted, --muted-foreground, --border, --ring. 프로젝트에서 이미 사용 중인 색상 형식(HSL 또는 OKLCH)을 사용합니다. 팔레트에 흰색에 가깝거나 검은색에 가까운 색상이 없는 경우, 순수한 회색을 사용하는 대신 자체 색상에서 색조/음영을 파생시킵니다.
모든 테마를 하나의 파일(예: lib/wada-themes.ts)에 작성합니다:
export const wadaThemes = [
{ id: 176, name: "Hermosa Pink / ...", swatches: ["#f9c1ce", ...], vars: { "--background": "...", ... } },
...
];
4. 테마 전환기 추가하기 (웹 작업의 경우 항상)
클라이언트 컴포넌트 components/wada-theme-switcher.tsx를 만들고 루트 레이아웃에서 한 번 렌더링합니다.
동작:
- 오른쪽 하단 모서리에 있는 작은 플로팅 버튼(높은 z-index, 고정된 중립 스타일링으로 모든 테마에서 읽기 쉽도록 함).
- 클릭하면 각 테마를 나열하는 패널 열림: 조합 번호, 이름 및 작은 원형 견본. 테마를 클릭하면
document.documentElement.style에 해당vars를 설정하여 즉시 적용합니다. - 이전/다음 화살표와 키보드 단축키(
[및])로 테마를 빠르게 순환합니다. - 인라인 변수를 제거하여 사이트의 원래 테마를 복원하는 "기본값" 옵션.
- 선택한 테마를
localStorage에 저장(try/catch로 감싸기)하여 페이지 탐색 및 새로 고침 후에도 유지. - 현재 테마를
globals.css에 붙여넣을 수 있는:root { ... }블록(조합 번호가 주석으로 포함됨)으로 복사하는 "Copy CSS" 버튼. - 가시성:
process.env.NODE_ENV !== "production"또는 URL에?themes=1이 있는 경우에만 표시. 이를 통해 사용자는 라이브 Vercel 미리보기에서 테스트하고 클라이언트와 링크를 공유할 수 있으며, 일반 방문자는 절대 볼 수 없습니다.
사용자가 우승자를 선택("176번 고정")하면 해당 테마의 변수를 기본값으로 globals.css에 작성합니다. 전환기와 wada-themes.ts를 제거할지 아니면 ?themes=1 뒤에 유지할지 묻습니다.
기타 출력
- 일반 CSS 사이트:
:root에 사용자 정의 속성을 설정하는 바닐라 JS의 동일한 전환기. - 디자인 / 인쇄: 조합 번호와 함께 색상별 hex, RGB, CMYK를 나열.
- 옷차림 / 비디지털: 각 색상을 일반 언어로 설명하고 어떤 아이템(베이스, 메인, 악센트)에 어울리는지 설명.
항상 조합 번호를 인용하여 사용자가 책에서 찾을 수 있도록 합니다.
참고 사항
- Hex 값은 디지털 근사치입니다. 인쇄된 책의 CMYK 값이 기준입니다.
- 색상 이름은 데이터세트에서 가져옵니다. 일본어 이름을 임의로 만들지 마세요.