색상 선택기 (점 안기)를 사용하는 방법은 무엇입니까?


96

내가 방금 발견 한 크롬 개발 도구에 내장 된 매우 유용한 도구가 있습니다. 이름도 모르고 Google에서도 찾을 수 없습니다. 픽셀 인스펙터 도구라고 할 수 있습니다.

사용 방법은 다음과 같습니다.

1a. 배경색으로 html 요소를 검사합니다.

1b. 요소의 배경색을 정의합니다.

  1. 색상 선택기를 클릭하십시오.
  2. 페이지의 요소 위로 마우스를 이동합니다 (개발 도구가 아님).

참조 : http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

내 질문 :이 도구 이름은 무엇입니까? 쉽게 사용하는 방법? 대부분의 경우 색상은 신경 쓰지 않지만 아이콘의 픽셀을 검사하고 싶습니다. 이 도구의 단축키가 있습니까?


:이 복사 및 높은 수준의 뷰에 대한 유용한 하나입니다 chrome.google.com/webstore/detail/eyedropper-color-pick/...
austin_ce

아래 댓글에도 답변이 있습니다. 개발 도구에서 찾을 수 있습니다 (요소 탭의 "스타일"탭에서 "색상"규칙을 클릭하면 팝업에 색상 선택기가 있습니다). 내가 찾고있는 것은 색상이 필요없는 방법입니다. 규칙, 이미지에서 색상을 선택하고 싶다고 상상 해보세요.
mdikici

답변:


104

스포이드를 여는 방법은 간단합니다.

  1. DevTools 열기 F12
  2. 요소 탭으로 이동
  3. 스타일 사이드 바에서 색상 미리보기 상자를 클릭하십시오.

여기에 이미지 설명 입력

주요 기능은 픽셀 색상 값을 클릭하여 검사하는 것이지만 새로운 기능을 사용하면 하단에있는 두 개의 화살표 아이콘을 클릭하여 페이지의 기존 색상 팔레트 또는 머티리얼 디자인 팔레트를 볼 수도 있습니다. 페이지를 디자인 할 때 매우 편리 할 수 ​​있습니다.


6
현재 버전 68.0.3440.106을 사용하고 있습니다. 당신은 더 이상 색상 선택 색상 팔레트를 사용할 수 없습니다
카라스

2
여기서 Chrome v72는 답변에 설명 된대로 작동합니다.
Dinei

1
저는 v78을 사용하고 있으며이 작업을 수행 할 수 없습니다. 세부 사항을 잊어 버렸는지 알아 내기 위해 여기까지 왔어요
Herbert Van-Vliet

34

스포이드 도구라고합니다. 내가 아는 바로 가기 키가 없습니다. 지금 사용할 수있는 유일한 방법은 스타일 사이드 바에서 색상 선택기 상자를 클릭 한 다음 이미 수행 한 페이지를 클릭하는 것입니다.


8
더 쉬운 방법이 필요합니다
SuperUberDuper

@SuperUberDuper 음, 이제 있습니다. 내 대답은 몇 살입니다. 요즘에는 스타일 사이드 바의 색상 값 옆에있는 작은 색상 견본 상자를 클릭 한 다음 페이지 위로 마우스를 이동하여 색상 선택 도구를 볼 수 있습니다. 이제 훨씬 쉬워졌습니다.
jaredwilli

5
하지만 먼저 색 규칙이 필요합니다
SuperUberDuper

1
@SuperUberDuper 또는 var ...를 사용 --c: red하여 devtools 패널에 색상 속성을 가져 오는 가장 쉬운 방법입니다.
Brandito

더 설명해 주
시겠어요

5

현재 스포이드 도구는 이전에 저에게 도움이되었지만 내 버전의 Chrome에서 작동하지 않습니다 (위에서 설명한대로). 최신 버전의 Chrome에서 업데이트되고 있다고 들었습니다.

하지만 Firefox에서는 쉽게 색상을 잡을 수 있습니다.

  1. Firefox에서 페이지 열기
  2. 햄버거 메뉴-> 웹 개발자-> 스포이드
  3. 스포이드 도구를 이미지 위로 드래그합니다 ...을 클릭 합니다.
    색상이 클립 보드에 복사되고 스포이드 도구가 사라집니다.
  4. 색상 코드 붙여 넣기

스포이드 도구를 Chrome에서 사용할 수없는 경우이 방법을 사용하는 것이 좋습니다.
또한 액세스하기가 더 쉽습니다. :-)


나도 작동하지 않았지만 브라우저 창에 devtools가 도킹 된 경우에만 작동하도록 제한이 있습니다.
buzard
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.