Color Palette는 웹 페이지의 모든 요소를 스캔하여 사용된 모든 색상을 추출합니다. 텍스트, 배경, 보더, 섀도우, 강조색까지 포함됩니다. 색상은 사용 빈도순(가장 많이 사용된 색상부터)으로 정렬된 시각적 견본으로 표시되며, 각 견본에는 HEX 값과 사용 횟수가 함께 나타납니다. 견본을 클릭하면 복사하거나 전체 팔레트를 색상 코드 목록으로 내보낼 수 있습니다.
잘 디자인된 웹사이트는 보통 3~8개의 주요 색상과 몇 가지 중립색으로 구성된 일관된 색상 팔레트를 가지고 있습니다. Color Palette는 모든 요소의 계산된 color, background-color, border-color, box-shadow 값을 스캔하여 이 팔레트를 자동으로 추출합니다. 결과는 사용 빈도순으로 정렬된 페이지의 모든 색상 컬렉션으로, 사이트의 색상 시스템을 완전히 파악할 수 있게 해줍니다. 주요 브랜드 색상과 배경색 같은 지배적인 색상이 상단에 높은 사용 횟수와 함께 나타납니다. 강조색과 일회성 값은 아래쪽에 표시됩니다. 이는 디자인 연구에 매우 유용합니다. 어떤 웹사이트든 방문해서 정확한 색상 팔레트를 몇 초 만에 추출할 수 있습니다. 또한 자신의 사이트 감사에도 좋습니다. 디자인 시스템에 속하지 않는 stray 색상이 있는지, 디자인 스펙에서 정의된 3가지 회색 대신 5가지 약간 다른 회색 음영을 사용하고 있는지 확인할 수 있습니다. Color Palette는 전체 색상 사용 현황을 가시적이고 계수 가능한 형태로 만들어줍니다.
페이지의 모든 가시 요소를 스캔하여 color, background-color, border-color, box-shadow 색상, outline-color, text-decoration-color 등 계산된 속성에서 색상을 추출합니다. 페이지에서 사용된 모든 색상이 캡처됩니다.
색상이 사용 횟수에 따라 정렬됩니다. 가장 많이 사용된 색상이 맨 위에 나타납니다. 주요 브랜드 색상과 배경색이 상단에 올라오고, 일회성 강조색은 아래쪽에 위치합니다. 페이지의 주요 색상, 보조 색상, 강조색을 즉시 파악할 수 있습니다.
각 색상이 큰 시각적 견본으로 표시되며 아래에 HEX 코드와 사용 횟수가 나타납니다. 견본이 충분히 커서 미묘한 음영 차이(#333 vs #2a2a2a)도 쉽게 구분할 수 있습니다.
색상 견본을 클릭하면 해당 HEX 값이 즉시 클립보드에 복사됩니다. 별도의 색상 패널을 열거나 대화상자를 띄울 필요가 없습니다. 클릭 한 번으로 복사 완료.
"Export All"을 클릭하면 전체 팔레트를 포맷팅된 HEX 색상 코드 목록으로 복사할 수 있습니다. 디자인 도구, CSS 변수 파일, 색상 문서에 바로 붙여넣을 수 있습니다. 목록은 사용 빈도 정렬 순서를 유지합니다.
동일한 색상의 rgb와 hex 표현을 병합하고 중복을 제거합니다. 팔레트는 고유 색상만 표시하며, 중복 표현의 사용 횟수를 합산합니다.
아름다운 색상 구성의 웹사이트를 방문하여 정확한 팔레트를 추출하세요. 이를 자신만의 디자인의 시작점으로 사용하거나, 어떤 색상 조합이 잘 어울리는지 문서화할 수 있습니다.
자신의 사이트에서 Color Palette를 실행하여 브랜드 색상 일관성을 검증하세요. 하나의 파란색이어야 할 곳에 4가지 약간 다른 파란색이 사용되고 있나요? 디자인 시스템에 속하지 않는 색상이 새어 들어오고 있나요? 사용 빈도 정렬 덕분에 불일치가 명확하게 드러납니다.
팔레트를 내보내 CSS 커스텀 속성(--color-primary, --color-secondary 등)으로 변환하세요. 사용 빈도순 출력이 어떤 색상이 주요, 보조, 강조 역할을 해야 하는지 알려줍니다.
경쟁사 웹사이트에서 색상 팔레트를 추출하여 브랜드 포지셔닝을 이해하세요. 따뜻한 색 vs 차가운 색, 높은 대비 vs 부드러운 색감 — 팔레트가 의도적인 디자인 선택을 드러냅니다.
모든 텍스트 색상을 배경 색상과 함께 확인하세요. 텍스트-배경 조합 중 대비가 너무 낮은 것이 있나요? 팔레트가 WCAG 대비 요구사항을 검사할 수 있는 전체 색상 세트를 제공합니다.
DevSuite Pro 플로팅 독을 열고 Color Palette 아이콘을 클릭하세요. 도구가 페이지의 모든 요소를 스캔하여 모든 색상 값을 추출합니다.
사용 빈도순으로 정렬된 색상 견본 그리드가 나타납니다. 가장 많이 사용된 색상이 상단에 위치합니다. 각 견본에는 HEX 코드와 해당 색상을 사용하는 요소 수가 표시됩니다.
견본을 클릭하면 해당 HEX 값이 클립보드에 복사됩니다. 잠시 확인 메시지가 나타납니다.
"Export All"을 클릭하여 모든 색상을 포맷팅된 목록으로 복사하세요. CSS 변수 파일, 디자인 도구, 문서에 붙여넣을 수 있습니다.
같은 사이트의 다른 페이지로 이동하여 팔레트를 추출하면 사이트 전체에서 색상 일관성을 검증할 수 있습니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
