색상 쉐이드 생성기

사용 방법

1. 색상 선택기를 사용하거나 HEX 값(예: #3b82f6)을 직접 입력하여 기본 색상을 설정합니다.
2. 팔레트가 즉시 업데이트되어 가장 밝은(50)부터 가장 어두운(900)까지 10단계 색상을 표시합니다.
3. 각 쉐이드 카드에 HEX, HSL, RGB 값이 표시됩니다.
4. 쉐이드 카드를 클릭하면 해당 HEX 값이 클립보드에 복사됩니다.
5. 모두 CSS 변수로 복사를 클릭하면 모든 쉐이드를 :root CSS 블록으로 복사합니다.

복사 전체 출력 형식

:root {
  --color-50: #EFF6FF;
  --color-100: #DBEAFE;
  --color-200: #BFDBFE;
  --color-300: #93C5FD;
  --color-400: #60A5FA;
  --color-500: #3B82F6;
  --color-600: #2563EB;
  --color-700: #1D4ED8;
  --color-800: #1E40AF;
  --color-900: #1E3A8A;
}

디자인 시스템에서 쉐이드 활용

10단계 쉐이드 스케일은 다음에 적합합니다:

• 기본/강조 색상: 500을 주 브랜드 색상으로 사용하고, 밝은 쉐이드는 배경과 호버 상태에, 어두운 쉐이드는 텍스트와 테두리에 사용
• 상태 피드백: 50–100을 알림 배경 색조에, 700–900을 그 위의 텍스트 색상에 사용
• 다크 모드: 스케일 방향을 반전시켜 900을 배경으로, 50을 텍스트로 사용
• 컴포넌트 변형: 버튼의 기본, 호버, 활성 상태에 각각 500, 600, 700 사용

관련 도구

• 색상 변환기 — HEX, HSL, RGB, HSV 간 변환
• CSS 변수 생성기 — 완전한 디자인 토큰 시스템 구축