웹사이트 색상 추출기

색상 추출기 사용 방법

1. 웹사이트 주소를 입력하고 사이트 열기를 누르세요. 페이지 로딩이 끝나면 돌아와서 화면 캡처를 누르거나, 자동 캡처로 서버가 대신 찍게 할 수 있어요.
2. 스크린샷 위로 마우스를 움직이면 돋보기에 해당 픽셀과 HEX, RGB, HSL 값이 표시돼요.
3. 클릭하면 팔레트에 색이 저장되고, 코드는 버튼 한 번으로 복사할 수 있어요.
4. 이미 스크린샷이나 디자인 파일이 있다면 이미지 탭에 올려 보세요. 파일은 서버로 전송되지 않고 브라우저 안에서만 처리돼요.

왜 스크린샷에서 색을 뽑나요?

브라우저 보안 정책상 한 사이트가 다른 사이트의 픽셀을 직접 읽을 수 없어서, 일반 스포이드로는 링크만 있는 페이지의 색을 찍을 수 없어요. 페이지를 이미지로 캡처하면 그라데이션, 사진, 버튼까지 모든 픽셀의 색을 읽을 수 있습니다.

HEX, RGB, HSL 차이

HEX

#3B82F6처럼 여섯 자리로 된 코드로, CSS와 대부분의 디자인 툴에서 사용해요.

RGB

빨강·초록·파랑을 0~255 숫자로 나타낸 값이에요. 예: rgb(59, 130, 246)

HSL

색상(0~360°), 채도, 명도를 퍼센트로 나타내요. 더 밝거나 어두운 색을 만들 때 편리합니다.

자주 묻는 질문