이미지파일에서 색상 코드, 헥스 코드 확인/추출하는 방법!!

포토샵, 프리미어, 하다 못해서 간단한 그림판 등에서 어떤 색상에 대해 통일감을 주거나 이미지 편집, 생성을 하다 보면 색상 RGB코드가 필요할 때가 있죠? 또는 #FF0000 같은 헥스 코드가 필요하던지요?

인터넷에서 찾은 마음에 드는 배경색을 찾았다던지 혹은 '이 색상은 이쁘네?' 하며 미리 컬러코드를 저장하고 싶어서 코드를 알고 싶을 때가 한 번쯤은 생깁니다.

 

 

 

 

이럴 땐 색상에 대한 정보를 추출할 수 있는 프로그램 또는 웹사이트를 이용해서 해당 이미지의 RGB 값 또는 코드를 알아낼 수 있습니다.

---

이미지 파일에서 색상코드, 헥스코드 추출하는 3가지 방법

 

그림판과 픽픽이라는 이미지 캡쳐프로그램 그리고 마지막으로 웹사이트에서 추출하는 방법에 대해 알아보겠습니다.

 

1. 그림판을 이용하여 확인하는 방법

사실 윈도우가 설치된 곳이면 어디서나 가장 쉽고 편리한 방법입니다.

색상 RGB코드를 추출하고자 하는 이미지 파일을 열어줍니다.

 

 

 

스포이트 마크(1)를 누른 후에 원하는 곳을 클릭(별표)하면 색1(2)에 추출된 색상이 나타납니다.

이때, 색 편집(3)을 클릭하면 색 편집창이 나오게 됩니다.

색 편집창에서 오른쪽 하단을 보면 색상 RGB코드 값이 나옵니다.

 

 

 

 

추가적으로 헥스(Hex) 코드를 알고 싶다면 네이버에서 「색상 코드표」를 검색합니다.

추출한 RGB 색상코드(1)를 기입하고 조회(2)하면 "#FF596 F"라는 헥스 코드를 얻을 수가 있군요.

 

실제로 해보면 금방 되는 굉장히 단순하고 편리한 방법입니다.

 

 

 

 

2. 이미지 캡쳐 프로그램 '픽픽'을 이용하여 확인하는 방법

 

이번엔 '픽픽'을 이용해서 바로 바탕화면, 인터넷 창, 동영상의 색상 코드를 확인해보겠습니다.

우선 픽픽 프로그램을 다운받아서 설치합니다.

 

 

 

설치 후 픽픽을 실행하면 색상추출도구를 클릭합니다.

클릭하게 되면 바로 바탕화면에서 이미지의 원하는 부분에 마우스를 위치시키고 클릭하면 됩니다.

 

 

 

 

 

위와 같이 코드값을 알려주는 창이 뜨게 되고 마우스 포인트를 따라 코드값을 알려줍니다.

원하는 곳에서 클릭을 하게 되면 픽픽 프로그램에선 색상 팔레트가 뜨면서 색상 RGB코드값과

헥스코드 값을 둘 다 알려줍니다.

 

 

 

이미지 캡처를 자주 하시는 분이라면 간단한 편집을 추가하시는 분이라면 아무래도 이미지 캡처 프로그램을

이용해서 하시는 것이 더욱 편하고 빠를 듯 합니다.

 

 

3. 인터넷 사이트를 이용하여 확인하는 방법

 

이미지 주소를 복사 붙여 넣기 해서 보는 사이트에 대해 알아보겠습니다.

 

http://www.degraeve.com/color-palette/?src=rss 

Color Palette Generator

 

 

사이트를 들어가보면 아래와 같이 단순한 웹페이지를 볼 수 있습니다.

 

 

 

해당 사이트는 이미지 파일(1)의 경로를 붙여 넣어서 색상 추출하기를 누르면 색상 추출이 밝고 화사한 색상(2)과 어둡고 탁한 색상(3)으로 구분해서 추출한 후 나열해줍니다. 

 

실제로 코드를 추출해보겠습니다.

구글에서 원하는 곳의 이미지에서 마우스 오른쪽 클릭을 하면 창이 하나 뜨게 됩니다.

거기서 이미지 주소 복사를 눌러서 이미지의 경로를 복사합니다.

 

 

 

 

 

그리고 주소를 복사, 붙여 넣기를 하였더니 색상 코드를 추출하여 줍니다.

일반적으로 단일 색감을 확인할 때는 별로 안 좋다고 생각할 수도 있겠지만

『디자인적으로 색감의 전체적인 분위기와 콘셉트를 알아낼 때 굉장히 유용한 사이트』입니다.

 

이외에도 아래의 사이트들은 비슷한 색상 코드 추출 사이트입니다.

 

http://www.colr.org/

colr.org

http://www.colourlovers.com/photocopa/

 

http://www.colourlovers.com/photocopa/

 

 

---

 

 

여러 가지 방법이 있겠지만 저의 경우에는 픽픽을 애용하고 있습니다.

물론 픽픽을 알기 전까지는 그림판으로 하고 있었습니다.

 

이미지에서 색상 코드, 헥스 코드를 추출/확인하는 법을 알아보았습니다.

원하시는 방법으로 편하게 작업하시길 바랍니다.