사진, 이미지 색상 HEX, RGB 색상코드 값 추출방법

윈도우 프로그램인 그림판으로 사진의 색상 코드를 추출하는 건 가능하나 좀 더 디테일하게, 또는 바로 hex코드 색상으로 추출은 크롬 개발자도구 사용이 좋습니다.  그림판으로 하는 거에 비해 조금 어려울 수 있으나 금방 익숙해질 수 있습니다.

 

크롬 브라우저로 사진 색상 추출하기

꼭 크롬 뿐만 아니라 익스플로러, 엣지 브라우저 등에서도 동일한 방법입니다.

 

브라우저 내 사진을 불러와야 하기 때문에 PC에 저장되어 있는 경우 크롬(브라우저)을 실행한 후 저장된 사진을 드래그&드랍을 하여 사진을 불러옵니다.

 

 

 

그 다음, F12를 누르면 개발자 도구 창이 열리게 됩니다.

여기서 Elements 탭으로 이동하여 상단 속성에 background: #0e0e0e; 같은 색상코드가 있는 것을 볼 수 있을겁니다. 만약에 없다면 직접 해당부분을 수정하여 임의로 background나 background-color을 입력하면 됩니다.

 

* background가 없다면 직접 타이핑하여 추가, 색상은 임의로 white, black, blue처럼 아무거나 입력해도 됩니다.

 

 

 

이제 backgound 속성 옆에 있는 네모난 색 상자를 클릭하면 현재 설정된 코드를 볼 수 있습니다. 이 상태로 크롬 브라우저에서 불러온 사진에 마우스를 올리면 선택한 부분이 확대가 되며 그 상태로 한번 클릭을 하면 background 속성 값이 변하게 됩니다.

 

 

선택한 색상으로 값이 바뀌어 HEX색상 코드값을 확인할 수 있습니다.

 

 

 

RGB코드 값을 보고 싶다면 적색 상자로 선택한 화살표 부분을 클릭하면 바뀌게 됩니다.