크롬 - ColorZilla(Color Picker, 페이지 색상 선택, 추출하기, CSS 도구)

웹페이지를 수정하거나 추가할때 오래전에 이미 사용한 색상이나, 다른 페이지의 마음에 드는 색상을 따오고 싶을때

화면을 캡쳐후 포토샵이나 다른 그래픽툴로 색상을 선택해 색상 코드를 따는 번거로움이 있습니다. ColorZilla는

간단한 클릭몇번으로 페이지의 색상코드를 쉽게 따올수 있는 많은 개발자들이 사용하는 확장 프로그램입니다.

홈페이지 : http://www.colorzilla.com/

크롬 다운로드 : https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

자.. 이제 기능에 대해 알아보겠습니다.

Page Color Picker Active

가장 많이 사용하는 기능으로 커서를 위치하게 되면 해당 색상의 RGB값과 색상 코드값, 

또한 커서가 위치한 속성을 빨간색 테두리로 표시하며 가로세로 픽셀, 해당속성의 class경로가 나타납니다.

Color Picker

색상을 선택해 해당 색상의 rgb, hsl, 색상코드값을 가져올 수 있습니다. 또한 색상을 본후 OK버튼을 누르고 다시

Color Picker에 들어오면 Color history에 이전에 선택했던 색상이 계속 추가됩니다.

Copy To Clipboard

Page Color Picker Active로 선택한 색상의 rgb, hsl, 색상코드 값을 저장하고 있습니다.

Webpage Color Analyzer

해당 페이지에서 사용중인 모든색상을 표시합니다.

Palette Browser

listbox의 list에 해당하는 컬러를 출력하면서 rgb, 색상코드, 색상명을 출력합니다.

CSS Gradient Generator

Gradient효과를 만들어 낼 수 있으며 만들어낸 색상의 CSS가 오른쪽 화면에 나타납니다.

Options

Automatically ~ clicked

체크시 확장 프로그램의 ColorZilla아이콘 클릭하면 바로 Page Color Picker Active를 실행합니다.

Outline hovered elements 

체크시 Page Color Picker Active상태에서 커서이동시 빨간색 태두리를 표시합니다.

Change cursor to crosshair

체크시 Page Color Picker Active상태에서 커서를 십자가 모양으로 나타냅니다.

Automatically copy ~ clipboard - 커서선택시 색상코드값을 바로 복사합니다.

Auto-copy color format - 선택시 색상값을 목록(rgb, hsl, 색상코드값)중 선택한 값으로 나타냅니다.

Show Hex codes in lowercase - 선택시 색상코드값을 소문자로 나타냅니다.

Enable color ~ shortcut - 단축키를 지정해 ColorZilla를 실행할 수 있습니다.

이상 ColorZilla였습니다. 이 확장프로그램을 몰랐을때 포토샵으로 일일이 열어 색상값을 확인했었는데..

ColorZilla를 사용하니 블로그 꾸밀때 상당히 편하네요.. ㅎㅎ 블로그를 운영하시거나 CSS를 많이 다루는 

웹디자이너, 개발자들에게 매우 유용한 크롬 확장프로그램 인것 같습니다!