간편 색상 선택기

Chrome용 무료 컬러 피커

어떤 페이지의 색상이든 고르세요. #E8553D 코드를 받습니다

간편 색상 선택기는 Chrome용 무료 스포이트입니다. 버튼이나 Alt+P를 누르고, 확대 돋보기로 원하는 픽셀을 겨냥해 클릭하세요. HEX, RGB 또는 HSL 코드가 이미 클립보드에 있습니다. 최근 50개 색상은 팝업에 보관됩니다.

Chrome에 추가 — 무료

Chrome Web Store 사용자 453명

Edge, Brave, Opera 등 다른 Chromium 기반 브라우저에서도 작동합니다.

웹페이지의 포스터 위에서 사각형 확대 돋보기가 픽셀 하나를 잡아 HEX, RGB, HSL을 보여 주고, 옆에는 #E8553D와 색상 기록이 표시된 간편 색상 선택기 팝업이 있습니다

한눈에 보기

기능
스포이트 방식의 컬러 피커: 확대 돋보기로 웹페이지의 어떤 픽셀이든 겨냥해 클릭하면 HEX, RGB 또는 HSL 코드가 복사됩니다.
대상
브라우저에 열린 실제 사이트, 시안, 스크린샷에서 색상을 맞추는 웹 개발자와 디자이너, 그리고 색상 코드가 필요한 모든 분.
가격
무료. 계정도, 유료 버전도 없습니다.
데이터
기록과 기본 형식은 사용 중인 기기의 확장 프로그램 로컬 저장소에만 보관됩니다. 분석도, 네트워크 요청도 없습니다.
지원 환경
컴퓨터에서 Chrome Web Store로 설치하는 Chrome 및 기타 Chromium 기반 브라우저. 새 탭 페이지, 설정, Chrome Web Store 같은 브라우저 페이지에서는 작동하지 않습니다.
제한
시작할 때 찍은 스냅샷을 사용해 탭의 보이는 부분에서 색상을 고릅니다. CMYK, Pantone, 대비 검사는 없으며 브라우저 밖에서는 고를 수 없습니다.
버전
2.7.0, 2026년 10월 23일 업데이트

세 단계, 클릭 한 번

  1. 1

    선택기 시작

    도구 모음 아이콘을 클릭하고 색상 선택을 누르거나, 아무 페이지에서나 Alt+P를 누르세요.

  2. 2

    돋보기로 겨냥

    사각형 돋보기가 커서 주변을 확대하고 정확한 픽셀을 잡아 줍니다. 그 아래 칩에 HEX, RGB, HSL이 실시간으로 표시됩니다.

  3. 3

    클릭하고 붙여넣기

    코드가 기본 형식으로 복사되고 짧은 알림으로 알려 드립니다. CSS, Figma, 메시지에 바로 붙여넣으세요.

이런 분들이 씁니다

CSS

프런트엔드 작업

DevTools를 열지 않고도 실제 사이트에서 정확한 값을 가져와 CSS, SCSS, Tailwind 설정에 쓸 수 있습니다.

HEX

디자인 및 브랜드 확인

인터페이스, 시안, 레퍼런스에서 팔레트를 추출하고 페이지가 올바른 브랜드 색상을 쓰는지 확인하세요.

HSL

색상 조정

밝기와 채도를 직접 조정하려면 HSL을, 숫자가 필요한 코드에는 RGB를 가져가세요.

기능

  • 픽셀, 정확히 겨냥

    돋보기가 커서 주변 11 × 11 픽셀을 확대하고, 조준선이 고를 픽셀 하나를 잡아 줍니다. 1픽셀 테두리나 그라디언트의 한 단계도 정확히 고를 수 있습니다.

  • 형식

    #2A6FDB 같은 HEX, rgb(42, 111, 219) 같은 RGB, hsl(217, 71%, 51%) 같은 HSL. 기본 형식은 팝업에서 한 번만 고르면 됩니다.

  • 기록된 색상

    고른 색상은 중복 없이 최근 50개 색상 격자의 맨 앞에 들어갑니다. 견본을 클릭하면 세 가지 코드를 보고 복사할 수 있습니다.

  • Alt+P 단축키

    팝업을 열지 않고 바로 시작합니다. 다른 키를 쓰고 싶다면 팝업의 키캡을 눌러 Chrome 단축키 설정을 여세요.

  • 네트워크 요청

    모든 것이 브라우저 안에서 실행됩니다. 계정도, 분석도, 원격 측정도 없습니다.

  • 라이트 및 다크

    팝업과 돋보기는 시스템 테마를 따르며, 판단하려는 색상에 색조가 섞이지 않는 중립 회색을 씁니다.

웹페이지 어디서든 색상 코드를 얻는 방법

Chrome 자체 스포이트는 DevTools 안에 있습니다. 스타일 창을 열고 색상 속성을 찾아 견본을 클릭한 다음 스포이트를 누릅니다. 동작은 하지만 깊숙이 숨어 있고, 고른 값이 클립보드가 아니라 페이지 CSS의 해당 속성을 대체합니다.

간편 색상 선택기는 스포이트를 클릭 한 번 또는 단축키 하나 거리에 둡니다. 시작하면 탭의 보이는 부분을 스냅샷으로 찍고 그 위에 사각형 돋보기를 열어, 평균이 아닌 정확한 픽셀을 볼 수 있습니다. 클릭 한 번으로 코드가 복사되고, 팝업은 세 가지 형식 모두로 최근 50개 색상과 함께 보관합니다.

시작하기 전에 필요한 부분까지 페이지를 스크롤하세요. 돋보기는 그 스냅샷에서 색상을 읽습니다. 새 탭 페이지, 설정, Chrome Web Store 같은 브라우저 페이지는 모든 확장 프로그램에 닫혀 있습니다.

설계부터 사생활 보호

  • 네트워크 요청 없음

    확장 프로그램은 서버와 통신하지 않습니다. 분석도 원격 측정도 없습니다.

  • 기기 안에만 보관

    기록과 기본 형식은 확장 프로그램의 로컬 저장소에 있습니다.

  • 권한 네 가지

    활성 탭(색상 선택을 시작할 때만)은 스냅샷을 찍기 위해, scripting은 돋보기를 표시하기 위해, storage는 기록과 형식을 위해, 클립보드 쓰기는 코드를 복사하기 위해 사용합니다.

DevTools 스포이트 vs 간편 색상 선택기

DevTools 스포이트 vs 간편 색상 선택기DevTools 스포이트간편 색상 선택기
시작 방법DevTools를 열고, 스타일에서 색상을 찾아, 견본을 클릭한 다음 스포이트 선택도구 모음 버튼 또는 Alt+P
결과가 가는 곳열어 둔 CSS 속성. 복사는 직접 해야 함클릭하면 클립보드로
색상 형식HEX, RGB, HSL 등HEX, RGB, HSL
이전에 고른 색상저장되지 않음최근 50개, 언제든 다시 복사
가격Chrome에 내장무료

자주 묻는 질문

웹사이트에서 색상 코드를 얻으려면 어떻게 하나요?

간편 색상 선택기를 설치하고, 페이지에서 Alt+P를 누른 뒤, 돋보기를 색상에 맞추고 클릭하세요. HEX 코드(원하면 RGB나 HSL)가 클립보드에 복사됩니다.

웹페이지의 이미지에서 색상을 추출하려면 어떻게 하나요?

같은 방법입니다. 선택기를 시작하고 그림에서 원하는 픽셀을 클릭하세요. 돋보기가 확대해 주므로 정확한 픽셀 하나를 고를 수 있습니다.

HEX 대신 HSL이나 RGB를 복사할 수 있나요?

네. 팝업에서 기본 형식(HEX, RGB, HSL)을 고르세요. 팝업은 기록에 있는 모든 색상의 세 형식도 보여 주며, 각각 복사 버튼이 있습니다.

이전에 고른 색상은 어디서 찾나요?

팝업을 열면 최근 50개 색상이 최신순 견본으로 있습니다. 하나를 클릭하면 코드를 보고 복사할 수 있으며, 기록을 지울 수도 있습니다.

Alt+P 단축키는 어떻게 바꾸나요?

팝업의 단축키 키캡을 클릭하세요. Chrome 키보드 단축키 페이지가 열리고 다른 키를 지정할 수 있습니다.

일부 페이지에서 작동하지 않는 이유는 무엇인가요?

Chrome은 새 탭 페이지, 설정, Chrome Web Store 같은 자체 페이지를 모든 확장 프로그램에 대해 막아 둡니다. 또한 선택기는 탭의 보이는 부분만 읽으므로 먼저 색상이 있는 곳까지 스크롤하세요.

브라우저 밖의 색상도 고를 수 있나요?

아니요. 현재 브라우저 탭에서만 고릅니다. CMYK나 Pantone으로 변환하거나 대비를 검사하지도 않습니다.

무료인가요? 데이터를 수집하나요?

무료이며 네트워크 요청을 하지 않습니다. 기록과 기본 형식은 사용 중인 기기에 남습니다.

PYROCTAL의 다른 무료 확장 프로그램

겨냥하고, 클릭하고, 붙여넣으세요.

Chrome에 추가 — 무료