무료 도구, 회원가입 불필요
웹사이트에서 색상 팔레트 추출하기
URL을 붙여 넣으면 사이트의 브랜드, 텍스트, 배경, 강조 색상을 hex 코드와 함께 사용 빈도순으로 보여 드려요. 무료이고 회원가입도 필요 없어요. Stripe의 DESIGN.md와 Linear의 DESIGN.md 전체 예시를 보거나, DESIGN.md가 무엇을 더해 주는지 알아보세요.
내 코드에서 이 팔레트 사용하기
추출기는 색상을 역할(배경, 표면, 텍스트, 브랜드, 강조, 테두리)별로 묶고, 페이지에서 차지하는 면적에 따라 순위를 매겨요. 재사용하려면 스타일 곳곳에 hex 코드를 붙여 넣지 말고 역할마다 이름을 붙이세요. 그러면 한 번만 바꿔도 그 색상이 쓰인 모든 곳이 업데이트돼요.
1. 색조가 아닌 역할로 이름 짓기. --color-text-muted는 리디자인 후에도 의미가 통하지만, --gray-600은 어디에 쓰이는지 알려 주지 않아요. 복사한 hex 코드로 바꿔 넣으세요.
:root {
--color-brand: #635bff;
--color-text: #0a2540;
--color-text-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-border: #e3e8ee;
}
body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }2. Tailwind에서 사용하기. 각 변수가 bg-surface, text-ink-muted, border-line 같은 유틸리티 세트가 돼요.
/* app.css, Tailwind CSS v4 */
@theme {
--color-brand: #635bff;
--color-ink: #0a2540;
--color-ink-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-line: #e3e8ee;
}3. 사용할 색상 조합 확인하기. 본문 텍스트는 배경과의 대비율이 최소 4.5:1, 큰 텍스트는 3:1이어야 해요. 추출기는 페이지 배경 위 주요 텍스트 색상의 대비율을 보여 줘요. 그 밖에 사용할 조합은 배포 전에 직접 확인하세요.
색상은 디자인 시스템의 한 층이에요. DESIGN.md는 색상을 타입 스케일, 간격, 컴포넌트 규칙과 함께 담아서 코딩 에이전트가 알맞은 곳에 알맞은 색상을 쓰게 해 줘요.
FAQ
색상 팔레트 FAQ
무료 웹사이트 색상 팔레트 추출기에 대한 짧은 답변이에요.
실제 브라우저에서 페이지를 불러오고, 페이지에 칠해진 색상을 각각 페이지에서 차지하는 면적으로 측정해요. 각 색상에는 가장 그럴듯한 역할이 지정돼요: 배경, 패널, 텍스트, 브랜드, 강조, 테두리.
팔레트에는 페이지가 실제로 쓰는 색상만, 면적순으로 최대 12개까지 나와요. 이미지나 영상 속 색상, 마우스를 올렸을 때만 나타나는 색상, 사이트의 다른 페이지에서 쓰이는 색상은 포함되지 않아요.
아니요. 처음 방문한 사람이 기본으로 보는 테마(보통 라이트)로 페이지를 읽어요. 기본이 다크인 사이트는 다크로 나와요. 사이트에 다크 모드가 있다면 전체 DESIGN.md에서 다뤄요.
파일로는 안 돼요. hex 코드는 복사할 수 있어요. 견본을 선택해 하나씩 복사하거나, 한 줄에 하나씩 전부 한 번에 복사하세요.
네, 픽셀 하나씩 고를 수 있어요. Chrome이나 Edge에서 요소를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택한 뒤, '스타일' 창에서 색상 옆의 사각형을 클릭하세요. 색상 선택기에 페이지의 어느 지점이든 읽는 스포이트가 있어요. Firefox의 '검사기' 도구 모음에도 같은 스포이트가 있어요.
이 도구는 색상만 보여 줘요. DESIGN.md는 사이트의 색상과 그 역할, 타입 스케일, 간격, 컴포넌트 규칙을 코딩 에이전트가 따를 수 있는 파일 하나에 담아요.