기준 색상에서 50, 100, 200, ..., 900까지 11단계 셰이드를 자동 생성합니다. Tailwind·머티리얼 스타일의 디자인 시스템에 바로 활용.

CSS 변수


        

    


    

        
컬러 셰이드 생성기 사용법

        
    
            
  1. 기준 색상을 컬러 피커 또는 HEX로 선택합니다 (보통 가장 진한 본 색).
    2. 
            
  2. 50(가장 밝음)부터 900(가장 어두움)까지 11단계가 자동 생성됩니다.
    3. 
            
  3. 각 색상을 클릭하면 HEX가 복사됩니다.
    4. 
            
  4. 아래 CSS 변수 코드를 복사해 디자인 시스템에 사용합니다.
    5. 
        


        
주요 기능

        
    
            
  • HSL 명도 기반 11단계 셰이드 자동 생성
    • 
            
  • Tailwind/머티리얼 디자인 컨벤션과 호환
    • 
            
  • 각 셰이드 한 번 클릭으로 HEX 복사
    • 
            
  • 완성된 CSS 변수 한꺼번에 복사
    • 
            
  • 완전 무료, 외부 통신 없음
    • 
        


        
활용 예시

        
    
            
  • 디자인 시스템 컬러 토큰 정의
    • 
            
  • 다크모드용 어두운 셰이드 추출
    • 
            
  • 호버·active 상태별 자연스러운 색 변화
    • 
            
  • 차트·인포그래픽 그라데이션 단계
    • 
            
  • 버튼·뱃지의 강조 단계 세분화
    • 
        


        
셰이드 단계 컨벤션

        
Tailwind CSS와 머티리얼 디자인 모두 50~900 11단계를 표준으로 채택했습니다. 50은 거의 흰색, 500은 본 색, 900은 거의 검정에 가깝습니다. 본문 텍스트는 보통 700~900을, 보조 배경은 50~100을 사용합니다.


        
자주 묻는 질문

        

            

                왜 500이 기준 색상인가요?
                
500은 11단계의 가운데로, 가장 채도가 높고 정체성이 강한 본 색입니다. Tailwind·머티리얼 모두 같은 컨벤션을 사용합니다.

            

            

                어떤 알고리즘으로 셰이드를 만드나요?
                
HSL 색공간에서 명도(Lightness)를 11단계로 조절합니다(95% → 5%). 색조(Hue)와 채도(Saturation)는 일정하게 유지되어 톤이 자연스럽습니다.

            

            

                다크모드에 어떻게 활용하나요?
                
라이트 모드에서 100~200을 배경으로 쓰던 곳을 다크 모드에서는 800~900으로 바꾸면 자연스럽게 다크 테마가 만들어집니다.

            

            

                접근성(WCAG) 대비는?
                
일반적으로 50~200 배경 + 700~900 텍스트, 또는 800~900 배경 + 50~200 텍스트 조합이 WCAG AA 기준을 통과합니다. 정확한 검증은 색상 대비 검사기로 확인하세요.