html로 개발을 하다 보면 다른 웹사이트의 색상을 표현하고 싶은 경우가 있습니다. 이럴 경우엔 색상코드 추출 방법을 통해 해당 사이트에서 사용하고 있는 색상을 알아낼 수 있습니다.
바로 익스플로러의 개발자 도구와 크롬의 확장프로그램인 ColorPicker를 이용하면 색상코드 추출 기능을 사용할 수 있는데요. 이 방법에 대해서 소개해 드리겠습니다.
1. 개발자 도구 이용하기
색상을 추출할 테스트 페이지로는 서울시청 웹사이트로 하겠습니다.
여기서 서울 글자의 색상코드를 알아보겠습니다.
1) 익스플로러를 켜서 서울시청 페이지로 이동한 뒤에 F12키를 눌러 개발자 도구를 실행시킵니다.
2) DOM 탐색기의 스포이드 모양의 아이콘을 누르면 생기는 하위 메뉴의 스포이드 아이콘을 다시 눌러줍니다.
3) 그럼 마우스 커서가 스포이드 모양으로 바뀌게 되는데 자신이 추출하고 싶은 색상위에 마우스 커서를 대면 자동으로 RGB컬러를 표시해 줍니다.
4) 위의 RBG 번호를 기억한 후 네이버에서 색상코드라고 검색하여 색상 팔레트를 띄웁니다.
5) 위에 나왔던 RGB번호를 그대로 입력하시면 샵(#)이 포함된 색상코드를 추출해 낼 수 있습니다.
2. 크롬 확장 프로그램 이용하기
위의 방법은 절차가 2번으로 이루어져서 번거로울 수가 있는데요.
크롬의 확장 프로그램을 사용하면 위의 2단계를 거치지 않고 바로 한번에 색상코드 추출이 가능합니다.
크롬을 켜신 뒤 Chrome 웹 스토어로 이동하셔서 ColorPicker라고 검색을 합니다.
그럼 ColorPick Eyedropper라는 확장 프로그램이 나오는데 무료를 눌러 설치를 해주시면 됩니다.
이후 오른쪽 상단에 ColorPicker 아이콘을 누르면 드롭다운메뉴가 생기고 마우스 커서가 변하게 됩니다.
그리고 추출하고자 하는 색상 위에 마우스를 올려놓으시면 자동으로 색상코드 추출하게 됩니다.
답글 남기기