웹 페이지의 색상 손쉽게 따오기 (Chrome/ColorZilla)

원하는 웹 페이지의 색 배치를 손쉽게 따와보자

  웹 디자인 중에, 참고할 만한 사이트를 돌아다니다가 너무나도 맘에 드는 색상 배치를 발견했는데 색상 값을 알아내려면 포토샵을 키고 스포이드를 찍어야 한다면 너무 귀찮죠.

  크롬의 확장 프로그램인 ColorZilla는 웹 페이지 상에서 바로 마우스 위치의 색상 값을 알려주고 클릭하면 자동으로 클립보드에 복사까지 해 주는 유용한 디자인 쪽 확장 프로그램입니다. 그 외의 기능으로는 손쉽게 CSS 그라디언트를 만들어주는 기능이 있습니다.

다운로드 및 설치

  ColorZilla 확장 프로그램 페이지에 접속해서 설치하시면 바로 사용할 수 있습니다.

ColorZilla 사용법

  ColorZilla를 설치하면 오른쪽 위에 ColorZilla 아이콘이 생깁니다. 클릭하고 마우스를 웹 페이지에서 움직이면 마우스가 위치한 곳의 색상이 표시됩니다. 클릭하면 바로 해당 색상의 HEX값이 클립보드에 복사됩니다.

  물론, 옵션에서 복사될 형식을 변경할 수도 있습니다. (Auto Copy 항목 변경)

  CSS Gradient Generator를 사용하면 복잡한 그라디언트도 간단히 만들어 적용할 수 있습니다. 자바스크립트 없이, CSS만으로!

  ColorZilla와 Adobe Color CC를 동시에 사용하면 색상 배치는 더 이상 고민거리가 되지 않을 겁니다. 저처럼 타고난 색상 센스가 영 좋지 않지 않다면요.