TheSonOfThomp/skills

컬러 팔레트

기본 색상을 지각적으로 균일한 램프로 확장하고 이를 팔레트로 구성합니다. 모든 수학적 연산은 번들된 생성기에 위임되며, 이 스킬의 판단은 구성과 검증에 있습니다.

원칙 (OKLCH를 사용하는 이유)

• HSL/RGB로 램프를 생성하지 마십시오. HSL 명도는 속임수입니다(같은 값 ≠ 같은 지각 밝기). 색조를 밝게/어둡게 할 때 색조가 변합니다. HSL 명도가 같으면 노란색은 너무 밝게, 파란색은 너무 어둡게 보입니다.
• OKLCH가 작업 공간입니다: L(명도), C(채도), H(색조) — 같은 숫자는 같아 보이며, CSS 기본입니다.
• 채도는 단계별로 색역이 클램핑되어야 합니다. 매우 밝거나 어두운 단계에서는 높은 채도가 물리적으로 불가능하므로, 생성기가 이를 줄여 브라우저가 클리핑하는 것을 방지합니다.
• 하나의 대비 기준점: 흰색 텍스트는 L ≈ 0.55부터 WCAG AA를 통과하고, 검은색 텍스트는 L ≈ 0.60부터 통과합니다. 중간 단계는 이 목표 주변에 배치됩니다.

전체 이론과 출처: references/theory.md

워크플로우

1. 목표 명확히 하기

사용자와 확인합니다(이미 알려진 내용은 건너뜁니다): 기본 색상 또는 브랜드 색상; 단계 수(11이 표준, 9는 단순, 12는 Radix 스타일 역할 필요 시); 팔레트에 필요한 색조(브랜드 + 의미: 성공/경고/위험/정보 + 중립); 다크 모드 필요 여부.

2. 램프 생성하기

cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# 다중 색조 팔레트: 한 번의 호출, 쉼표로 구분된 이름
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blue,red,green --format css

주요 플래그: --chroma N (단계별 색역 최대값의 백분율; 80-95가 일반적이며, 높을수록 더 선명함), --hue-drift D (밝음→어두움에서 의도적인 색조 변화, 예: 어두운 노란색을 주황색 쪽으로; 요청 시에만), --cvd (적색맹 시뮬레이션된 16진수), --format table|css|json.

다중 색조 규칙: 모든 색조를 한 번의 호출로 생성하여 각 단계에서 동일한 명도와 채도 백분율을 공유하도록 합니다. 이것이 blue-500과 red-500이 형제처럼 느껴지게 만듭니다. 다른 경계로 하나의 색조를 다시 생성하지 마십시오.

3. 검증하기

테이블 출력을 읽고 다음을 확인합니다:

• 명도가 단조롭고 인접 단계 ΔE가 거의 일정함(균일성 열)
• 의도된 전경/배경 단계 쌍이 WCAG AA를 통과함(흰색 텍스트에는 vs-white ≥ 4.5인 단계 필요, 검은색 텍스트에는 vs-black ≥ 4.5)
• 색조 간 ΔE 경고 없음(같은 단계의 색조 간 Oklab ΔE ≥ 0.05)
• --cvd 사용 시: 의미 전달 UI에 사용되는 단계에서 적색맹 시뮬레이션된 단계 색상을 여전히 구분할 수 있음

사용자가 감사를 위해 기존 팔레트를 제공한 경우, 각 단계를 OKLCH로 변환하고(--format json으로 재구성하거나 수동 변환) 동일한 네 가지 사항을 확인합니다.

4. 팔레트 구성하기

• 단계에 역할 할당(Radix 규칙): 1-2 앱 배경 · 3-5 컴포넌트 배경(일반/호버/활성) · 6-8 테두리/포커스 · 9-10 단색 배경 및 호버(9단계 = 가장 순수하고 채도가 높음) · 11-12 텍스트(낮음/높음 대비).
• 의미론적으로 별칭 지정: 스케일이 하나의 의미를 제공할 때는 --red-500이 아닌 --danger-500을 사용합니다. 하나의 스케일은 여러 별칭을 지원할 수 있습니다.
• 다크 모드 = 재매핑, 재생성하지 않음: 스케일을 유지하고 의미 할당을 뒤집습니다(가장 밝은 단계가 가장 어두운 표면이 되고, 텍스트 색상이 끝을 바꿉니다). OKLCH의 지각적 균일성으로 인해 반전된 매핑도 동등하게 읽을 수 있습니다.

5. 전달하기

--format css 출력을 파일에 쓰고(@supports 내부에 16진수 폴백이 있는 사용자 지정 속성), 검증 보고서를 채팅에 제공합니다. 디자인 시스템이 목적지라면 토큰 이름 지정(기본 스케일 + 의미 토큰 계층)을 제안합니다.

일반적인 수정 사항

증상	수정 방법
50/100단계가 바래 보임	예상된 현상입니다. 흰색 근처에서는 채도가 물리적으로 제한됩니다. 클램핑으로 "수정"하지 마십시오.
색조의 선명도가 균일하지 않음	모든 색조에 대해 동일한 호출을 사용하십시오. --chroma 80을 시도해 보십시오.
500단계가 흰색 텍스트 대비에 실패함	큰 텍스트/그래픽에는 허용하거나 중간 명도를 낮추십시오(--hue-drift는 도움이 되지 않습니다. 기준점을 이동하십시오).
어두운 노란색이 올리브색으로 읽힘	주황색 쪽으로 의도적인 --hue-drift 10-15를 사용하거나 브랜드 취향으로 받아들이십시오.