베이스 색상을 입력하여 Tailwind CSS 스타일 색상 팔레트(50-950)를 자동으로 생성합니다.
A. Tailwind CSS는 50(가장 밝음)부터 950(가장 어두움)까지 11단계의 색상 팔레트를 제공합니다. 이를 통해 일관된 색상 시스템을 유지할 수 있습니다.
A. Tailwind Config 형식은 tailwind.config.js의 theme.extend.colors에 추가하고, CSS Variables 형식은 전역 CSS 파일에 추가하여 사용합니다.
A. 입력한 베이스 색상은 500 shade에 해당하며, 이를 기준으로 더 밝거나 어두운 색상이 자동 생성됩니다.
A. 영문자, 숫자, 하이픈(-)만 사용 가능합니다. 예: primary, accent-blue, brand-500
Tailwind CSS는 50부터 950까지 11단계의 색상 스케일을 채택하여 일관된 시각적 계층을 제공합니다. 각 숫자는 밝기를 나타내며, 낮은 숫자(50, 100)는 매우 밝은 색상, 높은 숫자(800, 900, 950)는 매우 어두운 색상입니다. 이 시스템은 배경색·텍스트색·테두리색 등에서 bg-primary-100, text-primary-700처럼 직관적으로 조합하여 사용할 수 있어 디자인 결정 속도를 크게 높여줍니다.
브랜드 색상을 Tailwind에 통합하려면 tailwind.config.js의 theme.extend.colors에 커스텀 팔레트를 추가합니다. 이 생성기는 입력한 베이스 색상을 HSL 색상 모델로 변환한 뒤 명도(Lightness)를 단계별로 조정하여 일관된 팔레트를 자동 생성합니다. 생성된 코드를 Tailwind Config 형식으로 복사하면 프로젝트 전체에서 primary-500, primary-700 같은 유틸리티 클래스를 바로 활용할 수 있습니다.
팔레트를 디자인 시스템에 통합할 때는 500을 기본(Primary), 600~700을 호버·포커스 상태, 100~200을 배경·강조 영역에 사용하는 패턴이 일반적입니다. CSS Variables 형식으로 내보내면 Tailwind 외에도 vanilla CSS, Sass, CSS-in-JS 등 어떤 환경에서도 동일한 색상 토큰을 재사용할 수 있어 멀티 프레임워크 프로젝트에서 디자인 일관성을 유지하는 데 효과적입니다.