구글 크롬 확장 프로그램 HTML 색상 코드값 알아 오는 Eye Dropper

구글 크롬 확장 프로그램 HTML 색상 코드값 알아 오는 Eye Dropper

 

환경: Chrome

 

웹 사이트를 디자인 하거나 블로그를 운영하는 분들은 괜찮은 색상 조합이 있는 사이트를 발견하면 참조하고 싶을 겁니다. 색상값을 알고 싶다면 도구가 필요합니다. 포토샵같은 프로그램을 띄우지 않고 크롬 확장프로그램으로 간단하게 해결할 수가 있습니다. 그리고 프로그램에서 사용하는 4가지 컬러 표현 형식을 전부 알려줍니다.

 

▼ 크롬 웹 스토어로 이동한 후 “Eye Dropper” 확장 프로그램을 검색합니다. kepi.cz 에서 제공하는 프로그램이 상단에 뜰 겁니다. CHROME 에 추가 버튼을 눌러 크롬에 추가합니다. 이 외에도 여러 프로그램들이 있으며, 취향에 맞는 프로그램을 선택하세요. 사용법은 비슷합니다. 

https://chrome.google.com/webstore/category/extensions?hl=ko 

 

▼ Eye Dropper 프로그램을 설치하고 클릭하면 그림과 같은 팝업 화면이 뜹니다. 두 개의 탭에서 Pick from web 으로 이동합니다. 그리고 [Pick color from web page] 버튼을 클릭합니다. 

 

▼ [Pick color from web page] 버튼을 클릭하는 순간 마우스 포인트에 조그마한 사각형 박스가 생깁니다. 색상 값을 알고 싶은 영역으로 사각형 포인트를 끌어다 놓고 클릭하시면 바로 값을 추출합니다. 

 

▼ 색상값의 정보를 알기 위해 오른쪽 상단에 있는 Eye Dropper 아이콘을 클릭합니다. 그럼 팝업창 오른쪽에 캡처 한 영역의 색상값을 다양한 형태로 변환해서 보여 줍니다. 프로그래밍을 할 경우 색상을 적용하는 형태가 함수 별로 다르기 때문에 변환해 줘야 하는데 그럴 필요가 없습니다. 그런데 RGB 와 HSB 는 있는데 CMYK 값이 없는게 아쉽네요.

 

▼ 두 번째 탭은 포토샵에 있는 Color picker 와 같은 기능을 합니다. 선택한 색상의 RGB 와 HSB 값을 추출해서 알려줍니다. 웹 사이트에서 추출하고 싶은 색상이 있다면 다른 프로그램을 띄울 필요가 없겠죠.