컬러 팔레트 생성기

아름다운 5색 팔레트 — 스페이스바로 생성, 잠금으로 고정, 이미지에서 추출

배색 방식:

이미지에서 색상 추출

📁 클릭해서 업로드하거나 이미지를 드래그 앤 드롭하세요

JPG, PNG, WebP — 최대 10MB

이미지는 내 기기를 벗어나지 않아요 — 모든 처리가 브라우저에서 이루어져요.

팔레트 내보내기


      

    


    
    

      

        
WCAG 명암 대비 확인

        

      

    


    
    

      

        
저장된 팔레트 

        

          저장된 팔레트를 모두 삭제할까요?
          
          
        

        

      

    


    
    

    
    

      
팔레트 생성 원리

      
모든 팔레트는 HSL 색 공간을 사용해 생성돼요 — 색조(Hue: 0~360°), 채도(Saturation: 0~100%), 명도(Lightness: 0~100%). HSL은 색상환의 각도 관계를 기반으로 하기 때문에 배색 규칙을 직관적으로 적용할 수 있어요.


      

        

          

            

            

            

          

          
유사색

          
30° 이내의 인접한 색조. 조화롭고 차분한 느낌. 자연·바다 테마에 좋아요.

        

        

          

            

            

            

          

          
보색

          
180° 맞은편 2가지 색조. 강한 대비와 활기. 스포츠 브랜딩에 자주 쓰여요.

        

        

          

            

            

            

          

          
삼각배색

          
120° 간격의 3가지 색조. 균형 잡히면서도 다채로움. 활발한 브랜드에 좋아요.

        

        

          

            

            

            

          

          
단색 배색

          
같은 색조에 채도와 명도만 변화. 세련되고 통일감 있어요. 미니멀 디자인에 완벽해요.

        

        

          

            

            

            

          

          
분리 보색

          
기준 색조 하나에 150° 양쪽 2가지 색을 더함. 긴장감 없는 대비.

        

        

          

            

            

            

            

          

          
사각배색

          
90° 간격의 4가지 색조. 풍부하고 복잡한 배색. 한 색이 주도할 때 가장 잘 어울려요.

        

      


      
예시 — 유사색 팔레트

      
시작 색조: H = 210° (파란 계열). 유사색 규칙: 5가지 색조를 15° 간격으로 배치.
색조: 195°, 205°, 215°, 225°, 235°.
채도: 깊이를 위해 55%~70%로 변화. 명도: 범위를 위해 45%~70%로 변화.
결과: 자연스러운 대비를 가진 응집력 있는 오션 블루 그라디언트 팔레트.

    


    
    

    
    

      
디자이너를 위한 컬러 팔레트 팁

      
    
        
  • 60-30-10 법칙을 따르세요. 메인 컬러로 디자인의 60%(배경, 넓은 면적), 서브 컬러로 30%(섹션, UI 패널), 포인트 컬러로 10%(CTA, 하이라이트)를 채우세요. 5색 팔레트는 이 법칙에 자연스럽게 맞아요.
    • 
        
  • 텍스트 명암 대비를 항상 확인하세요. 아무리 아름다운 팔레트도 텍스트 색상과 배경의 명암 대비가 4.5:1 이상이 아니면 WCAG AA를 통과하지 못해요. 위의 내장 명암 확인 기능을 활용하세요.
    • 
        
  • 실제 제품에서는 팔레트를 제한하세요. 5색이 있다고 모든 화면에서 5색을 다 써야 하는 건 아니에요. 세련된 디자인은 2~3색을 주로 사용하고 나머지는 특별한 순간을 위해 아껴둬요.
    • 
        
  • 브랜드 색상을 먼저 잠그세요. 메인 브랜드 컬러가 있다면, 재생성 전에 해당 스와치의 잠금 아이콘을 클릭하세요 — 잠긴 색상을 중심으로 조화로운 팔레트를 만들어줘요.
    • 
        
  • 분위기 맞춤 이미지 추출. 디자인하고 싶은 분위기를 담은 사진(풍경, 제품 사진, 라이프스타일 이미지)을 업로드하면 — 추출된 팔레트가 이미 브랜드 방향과 감성적으로 맞아 있어요.
    • 
      

    


    
    

      
자주 묻는 질문

      

        
HSL(색조·채도·명도) 배색 규칙을 사용해요. 예를 들어 유사색은 30° 이내의 색조를 선택하고, 보색은 180° 맞은편 색조를 사용하며, 삼각배색은 120° 간격의 3가지 색조를 선택해요. 각 팔레트 내에서 시각적으로 보기 좋은 대비를 만들기 위해 채도와 명도를 다양하게 조합해요.

        
아니요 — 이미지는 내 기기를 벗어나지 않아요. 브라우저의 Canvas API를 사용해 픽셀 데이터를 로컬에서 읽고 주파수 비닝 알고리즘으로 주요 색상을 추출해요. 서버 없음, 업로드 없음, 추적 없음.

        
컬러 스와치나 Hex 코드 레이블을 직접 클릭하면 클립보드에 복사돼요. 짧은 확인 메시지가 나타나요.

        
CSS 사용자 정의 속성(--color-1~--color-5), Tailwind CSS 설정 스니펫, SCSS 변수, JSON 객체, 또는 쉼표로 구분된 Hex 목록으로 내보낼 수 있어요. 내보내기 버튼을 클릭하면 즉시 클립보드에 복사돼요.

        
명암 대비 확인기는 팔레트의 각 색상을 흰색(#fff)과 검정색(#000) 배경에 텍스트로 렌더링했을 때의 WCAG AA 합격/불합격 배지를 표시해요. 일반 텍스트 기준 4.5:1 비율을 충족하는 색상에는 초록색 'AA ✓' 배지가 표시돼요.

        
브라우저 localStorage에 최대 50개까지 저장할 수 있어요. 세션을 닫아도 유지돼요. 히스토리 패널에서 저장된 팔레트를 보거나 불러오거나 삭제할 수 있어요.