웹이미지 색상코드를 빠르게 찾아주는 COLORZILLA: 크롬에서 실시간 색상추출하기

오늘은 인터넷을 사용하면서 실시간으로 색상을 추출해서 색상코드를 알려주는 프로그램인 컬러질라 ColorZilla에 대해서 알아보겠습니다. 컬러질라는 구글에서 만든 크롬 Chrome의 확장 프로그램입니다. 크롬의 툴바에 설치해 두고 사용할 수 있습니다. 

이미 400만명의 이용자가 사용하고 있는 인기 있는 프로그램인데요. 그만큼 쉽고 빠르게 원하는 이미지의 색상코드를 추출할 수 있어서입니다. 아래 화면에서 보는 것처럼, 빠르게 색상코드를 추출할 수 있습니다. 방법은 크롬에 확장프로그램인 컬러질라를 설치해 두고 사용하는 것인데요. 크롬 Chrome 툴바에서 색추출 스포이드를 꺼내서 이미지에 가져가면 색상을 추출해 줄 뿐 아니라 색상 코드가 자동 복사됩니다. 오늘은 크롬에서 컬러질라를 사용하는 방법과 설치방법을 자세히 알아보겠습니다. 

Ccolor Zilla 웹페이지에서 색상코드 추출

---

ColorZilla 설치하기

컬러질라를 이용하기 위해서는 크롬의 웹스토어에서 크롬 확장 프로그램을 설치해 주어야합니다. 구글에서 <ColorZilla>를 검색하면 쉽게 이동할 수 있습니다. 크롬 웹스토어 주소는 아래 링크로 연결해 두겠습니다.

https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

1. 크롬에 확장프로그램 설치하기

크롬 웹스토어의 Color Zilla 설치 화면입니다. 아래 화면에서, <크롬에 추가>를 눌러 설치하면 됩니다.

<Chrome에 추가>를 누르면, 아래와 같은 메시지가 나오고,  <확장프로그램 추가>를 눌러 설치를 진행합니다. 

 

2. Chrome 툴바에 Color Zillar 추가하기

컬러질라 설치가 끝나면 크롬의 툴바에 설치한 확장프로그램을 직접 추가해 주어야 합니다. 하지만 방법은 쉽고 간단합니다. 그리고 크롬에서 친절하게 노란색 말풍선으로 안내를 자세하게 해 주기 때문에, 안내에 따라 클릭 한 두 번만 해주면 됩니다.

아래 그림에서와 같이 크롬을 실행하면 오른쪽 위에 노란색 말풍선이 나옵니다. 

안내에 따라, 크롬에서 확장프로그램을 관리하는 ⓛ 폴더를 클릭하고 열리는 창에서 ②  ColorZilla 옆의 고정표시를 눌러줍니다. 

하늘색 화살표로 표시한 스포이트 모양이 컬러 질라의 아이콘입니다. 위의 과정을 마쳤다면 아래와 같이 크롬을 실행하면 스포이드 모양의 컬러질라 아이콘이 보입니다.

ColorZilla 이용방법

1. 웹페이지에서 색상코드 추출하기

컬러질라에서 색상을 추출하는 방법은 간단합니다.

-크롬을 실행시키고 웹페이지를 검색하다가 추출하고 싶은 색이 있다면, 위의 스포이드를 누르고 원하는 색상에 마우스를 가져갑니다.

-마우스를 움직이는 동안 위쪽에 생기는 검은 바(△ △ △ △ 표시)에 색상코드와 포인트 좌표를 볼 수 있습니다. 

-색상코드을 알고 싶은 지점에서 마우스를 한 번 클릭해 줍니다. 클립보드에 색상코드가 자동복사됩니다.  

-마우스 왼쪽 버튼을 누르고 <붙여 넣기>를  하면 색상코드 <#9FCEFB>를 단번에 가져올 수 있습니다.

2. ColorZilla에서 추출한 색상코드를 가져오는 방법

추출한 색상코드 하나를 가져오는 방법은 마우스로 붙여 넣기로 간단하게 할 수 있습니다. 하지만, 클립보드에는 하나씩만 저장할 수 있습니다. 

조금 전에 추출했던 색상코드를 알고 싶다면 저장해 놓은 색상코드 기록에서 찾을 수 있습니다. 크롬에서 컬러질라 아이콘을 선택하고 <선택된 색상 기록>을 열어줍니다.

아래와 같이 컬러팔레트가 열리고 오른쪽으로 선택했던 색상기록이 저장된 것을 볼 수 있습니다. 여기서 색상팔레트로 색상을 다듬고 색상코드를 복사해 갈 수도 있습니다. 

여러 개 색상코드를 동시에 복사해 갈 수는 없다는 점은 아쉽지만, 색상기록이 꽤 많이 되기 때문에 빠르게 색상코드를 추출해 두고 선별해서 색상코드를 가져가기에는 아주 좋습니다. 특히 다른 앱을 열지 않아도 된다는 점은 아주 큰 장점입니다. 

3. ColorZilla 활용법: 브라우저 밖 색상 추출

컬러질라 사용 범위는 웹페이지에 한정되지 않는다는 점에서 또 활용도가 높습니다. 브라우저 밖 색상 추출도 가능하기 때문인데요. 크롬을 실행한 상태에서 컬러질라 옵션창을 열고 <브라우저 밖 색상 추출>을 선택하면 웹브라우저를 벗어난 영역에서도 색상을 추출할 수 있습니다. 

 

4. ColorZilla 활용법: 옵션으로 더 빠른 색상추출

컬러질라는 다양한 옵션을 제공하고 있어서 사용자 환경에 맞게 더 빠르고 편한 색상추출 환경을 조절할 수 있습니다. 예를 들어, 자동복사되는 색상 포맷을 #RRGGBB/ RRGGBB/rgb(R,G,B)/ rgb(R%,G%,B%)/ hsl(H,S%,L%)로 선택할 수 있다든지, 키보드 단축키를 이용해서 색상추출을 할 수 있다든지 하는 옵션이 있습니다. 

이상으로 마우스 클릭 두 번으로 끝나는 색상코드 추출하기, Color Zilla의 설치방법과 색상코드 추출하는 방법, 컬러질라 활용법에 대해서 알아보았습니다.