컬러피커(Color picker) 스포이드 기능으로 색상추출하기

오늘은 크롬 확장프로그램을 설치해서

컬러피커(Color picker)를 쓰는 방법을 포스팅해보려 한다.

 

웹사이트 내에서 내가 원하는 색상추출을 하고 싶을 때

유용한 방법이다.

클론코딩할때 완전히 똑같은 색깔을 찾을 수도 있다.

포토샵의 스포이드 기능이랑 동일한데,

웹사이트 내에서 간단한 클릭 한 번으로

내가 원하는 색상번호를 찾아준다.

먼저 크롬 웹 스토어에 들어가서 컬러피커 (color picker)를 

검색을 해준다.

 

들어가서 보니까 굉장히 유용한 기능이 많다.

크롬 확장프로그램을 사용하면 브라우저 내에서

간단한 연동으로, 편리한 기능들을 쓸 수 있다.

 

영어 문법을 체크해주는 검사기라던가,

정보를 스크랩해 저장해줄 수 있는

프로그램 사용이 가능하다.

 

https://chrome.google.com/webstore/category/extensions

Chrome 웹 스토어

 

검색을 하고 나면 탭컬러라는 이름이 제일 먼저 보인다.

이걸 일단 클릭해본다.

설명 밑에 스크롤을 내리면 관련 프로그램들이 보인다.

색상 선택기 첫번째 프로그램을 

클릭해서 이걸 다운받아주면 된다.

 

혹은 아예 크롬 웹 스토어에 

"Colorzilla"나 컬러질라라는 이름을 검색해서 쓰면 된다.

컬러질라(Colorzilla)의 기능은 첫번째로 스포이드로

색상추출을 해주는 것이 있다.

웹사이트 내에서 색깔을 알고 싶은 부분을 클릭하면

화면에 보이는 것처럼 색상이름이 나온다.

 

개발자도구를 켜야 볼 수 있는 

요소 이름도 확인가능하다.

nav인지 logo인지

컬러피커(color picker)기능으로

한번에 알아볼 수 있다.

설명을 확인해봐도 색상 선택기를 사용해서

스포이드 기능을 쓸 수 있다고 되어 있다.

그라디언트 생성기도 가능하다고 써져 있다.

 

브라우저의 어느 부분을 클릭해도 색상 판독값을 확인하고

조정 및 붙여넣기가 가능하다.

개인적으로 컬러피커(color picker)중에서도

컬러질라(color zilla)가 유용하다고 생각된다.

 

포토샵과 가장 유사한 색상추출 기능을 제공하고 있고,

태그 이름이나 클래스 요소의 

정보도 체크가 가능하다.

이 크롬 확장 프로그램이 정보를 빼내가진 않으니

"엑세스 권한"을 허용해달라는 설명이 있다.

 

잘 만든 기능인데 아직 베타 버전이라는 

설명을 보고 깜짝 놀랐다.

크롬 웹스토어에서 설치하면 간편하게 쓸 수 있다.

반응형

브라우저에서 저 버튼을 클릭하면

밑에 크롬 확장 프로그램들이 표시된다.

 

여기서 컬러질라(Color zilla)를 눌러주면 사용이 가능하다.

스포이드로 색상추출하는 것만 써봤는데

위에 검은색 바가 뜨면서

클릭한 지점의 컬러를 알려준다.

 

태그 정보로는 a태그라고 옆에 알려주고 있다.

 

요약

컬러질라(Color zilla)라는 크롬 확장 프로그램은

색상추출이 가능한 스포이드 기능,

html 요소 정보 안내 기능을 제공한다.