URL로 색상 추출
웹사이트 색상 추출기
웹사이트 색상 추출기는 URL로 웹사이트의 HTML과 CSS를 읽고 사이트의 색상 팔레트를 반환합니다. 팔레트에는 브랜드 색상, 강조색, 배경, 텍스트, 테두리가 포함되며, 각 색상의 CSS 변수와 사용 비율이 함께 표시됩니다.
- 무료, 가입 불필요
- 실제 CSS와 변수를 읽습니다
- 아무것도 저장하지 않습니다
사이트가 차단되었나요? HTML이나 CSS를 붙여넣으세요
웹사이트 색상 추출기는 어떻게 작동하나요?
웹사이트 색상 추출기는 페이지와 스타일시트를 내려받아 코드의 모든 색상 값을 읽고, 페이지에서 색상이 쓰인 위치와 빈도에 따라 순위를 매깁니다.
주소 입력
example.com 같은 도메인을 입력하거나 공개 페이지의 전체 URL을 붙여넣습니다. 추출기는 페이지와 최대 25개의 스타일시트를 가져옵니다.
스타일시트 분석
hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color(), 148개의 이름 있는 색상 등 모든 색상 문법을 읽습니다. CSS 변수는 실제 값으로 해석됩니다.
색상에 역할 부여
CSS 속성이 각 색상의 역할을 배경, 텍스트, 테두리, 채우기, 그림자 중 하나로 정합니다. 페이지의 요소와 일치하는 규칙은 3배로 계산됩니다.
팔레트 복사
브랜드 색상이 가장 먼저 표시되고 강조색, 배경, 텍스트 색상이 뒤따릅니다. 팔레트는 CSS, Tailwind, 디자인 토큰으로 내보낼 수 있습니다.
추출기는 사이트의 브랜드 색상을 어떻게 찾나요?
브랜드 색상은 버튼, 링크 또는 브랜드를 뜻하는 이름의 CSS 변수에 나타나는, 가장 많이 사용된 채도 높은 색상입니다.
- 채도. OKLCH 크로마가 0.05 이상인 색상만 브랜드 색상이나 강조색이 될 수 있습니다. 회색과 회색에 가까운 색상은 무채색으로 분류됩니다.
- 위치.
.btn,button,a,.cta같은 선택자에 쓰인 색상은 가중치를 받습니다. - 이름.
--primary,--brand,--accent같은 변수는 가중치를 받습니다. - theme-color. CSS 색상과 일치하는
<meta name="theme-color">값은 강력한 브랜드 신호가 됩니다.
| 역할 | CSS 속성 |
|---|---|
| 배경 | background, background-color, 그라데이션 |
| 텍스트 | color, text-decoration-color, caret-color |
| 테두리 | border, outline, column-rule |
| 채우기 | fill, stroke, stop-color, accent-color |
| 그림자 | box-shadow, text-shadow (목록에는 표시되지만 메인 팔레트에서는 제외) |
사용된 색상과 사용되지 않는 CSS를 어떻게 구분하나요?
추출기는 선택자가 페이지 HTML의 요소와 일치하는 CSS 규칙에 3배의 가중치를 줍니다. CSS 프레임워크에는 페이지에서 쓰이지 않는 색상이 많이 들어 있으며, 선택자 일치 검사는 이런 색상이 실제 디자인보다 높은 순위를 받지 않게 합니다.
:hover와:focus색상은 상호작용 중에만 나타나므로 절반의 가중치로 계산됩니다.@media print규칙은 무시됩니다.- 불투명도 35% 미만의 색상은 오버레이와 틴트로 간주되어 제외됩니다.
- ΔE_OK 0.02보다 가까운 색상은 하나의 스와치로 병합되며, 스와치에 변형 색상이 나열됩니다.
추출기는 다크 모드 색상도 찾나요?
네. @media (prefers-color-scheme: dark) 안의 규칙과 .dark, [data-theme="dark"] 같은 선택자 아래의 규칙은 별도의 다크 모드 팔레트를 구성합니다.
추출기가 다크 규칙을 해석할 때 CSS 변수의 다크 값이 라이트 값을 대체하므로, 다크 팔레트에는 방문자가 다크 모드에서 보는 색상이 표시됩니다.
웹사이트 추출기가 읽을 수 없는 색상은 무엇인가요?
웹사이트 추출기는 서버가 보내는 코드를 읽으므로, 세 가지 종류의 색상은 읽을 수 없습니다.
- 런타임 스타일. CSS-in-JS 라이브러리는 브라우저에서 페이지가 로드된 후 스타일을 삽입합니다.
- 이미지 색상. 사진, 래스터 로고, 동영상 속 색상은 CSS가 아닌 픽셀입니다. 추출기는 사이트의 로고와 아이콘 색상을 따로 읽습니다.
- 보호된 사이트. 봇 차단 기능이 있는 사이트는 자동화된 요청을 거부합니다.
이런 경우에는 페이지의 HTML이나 CSS를 코드 입력란에 붙여넣거나, 스크린샷을 찍어 색상 팔레트 추출기에 놓으세요. 웹사이트가 사용하는 색상을 찾는 방법 가이드에서는 브라우저 DevTools를 활용하는 방법도 다룹니다.
웹사이트 색상 추출기는 누가 사용하나요?
디자이너
리디자인 전에 클라이언트의 현재 브랜드 색상을 점검하거나, 참고 사이트의 팔레트를 분석합니다.
개발자
사이트의 색상 토큰과 변수 이름을 복원해 테마를 다시 구축합니다.
마케터
랜딩 페이지, 광고, 이메일을 메인 웹사이트의 색상에 맞춥니다.
접근성 검토자
대비 탭에서 사이트의 텍스트와 배경 조합을 WCAG 대비 기준으로 검사합니다.
웹사이트 색상 추출기 자주 묻는 질문
사이트의 일부 색상이 빠진 이유는 무엇인가요?
JavaScript가 런타임에 적용한 색상, 이미지 속 색상, 로그인이 필요한 페이지의 색상은 서버가 보내는 HTML과 CSS에 나타나지 않습니다.
봇을 차단하는 사이트에서도 색상을 추출할 수 있나요?
네, 대체 방법이 있습니다. 브라우저에서 사이트를 열고 HTML이나 스타일시트를 코드 입력란에 붙여넣거나, 스크린샷을 이미지 추출기에 업로드하세요.
추출기는 확인한 웹사이트를 저장하나요?
아니요. 서버는 요청을 처리할 때 페이지와 스타일시트를 가져오며 사본을 보관하지 않습니다. 색상 분석은 브라우저에서 실행됩니다.
색상 옆의 퍼센트는 무엇을 의미하나요?
퍼센트는 페이지의 가중 CSS 사용량에서 해당 색상이 차지하는 비율입니다. 이 값은 코드가 색상을 얼마나 자주 사용하는지를 측정하며, 화면에서 색상이 차지하는 면적을 뜻하지 않습니다.
홈페이지가 아닌 다른 페이지도 확인할 수 있나요?
네. example.com/pricing처럼 공개 페이지의 전체 URL을 입력하세요.