RGB 색상 추출 사이트 - RGB saegsang chuchul saiteu

웹사이트를 돌아다니다가 어떤 색상인지 궁금했을 때가 있지 않으셨나요? 아니면 벤치마킹할 사이트에서 사용하고 있는 색상들을 알고 싶은 경우도 있을 것입니다. 웹사이트에서 사용하고 있는 컬러를 추출하는 방법에는 다양한 방법이 있습니다. 직접 크롬 개발자도구를 열어서 해당하는 DOM 엘리먼트에 어떤 색상이 적용되어 있는지 확인하는 방법도 있습니다. 하지만 개발자가 아니라면 이 방법은 사람에 따라서 꽤 까다로울 수 있습니다. 오늘은 크롬 익스텐션(크롬 확장프로그램)을 사용해서 웹사이트에서 사용하고 있는 색상을 손쉽게 추출하는 방법에 대해서 소개하도록 하겠습니다.

사용 방법

크롬 익스텐션 (크롬 확장프로그램) 사이트로 이동

Color Picker를 다운받기 위해 아래 경로를 통해서 Chrome 웹 스토어로 이동합니다.

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com

Chrome 웹 스토어로 이동 후 왼쪽 확장프로그램 검색창에 color picker를 입력하고 검색합니다.

color picker를 검색하고 상세페이지로 이동한 후 오른쪽의 Chrome에 추가 버튼을 선택합니다.

크롬 익스텐션 (크롬 확장프로그램) 추가

Chrome에 추가 버튼을 클릭하면 아래와 같은 팝업이 등장하는데 확장 프로그램 추가를 눌러서 내 확장 프로그램 목록에 추가합니다.

Color Picker를 확장 프로그램 추가하면 아래와 같이 웹 브라우저 상단 확장 프로그램 목록에 추가되게 됩니다.

Color Picker 사용법

Color Picker 사용법은 굉장히 간단합니다. Color Picker 확장프로그램을 우클릭하면 아래와 같은 목록이 나오게 되는데, 만약 웹사이트에서 컬러를 추출하고 싶다면 목록에서 Pick colors from site를 선택하면 됩니다.

Pick colors from site를 선택하면 아래와 같이 해당 사이트에서 원하는 색상들을 추출할 수 있습니다.

원하는 색상에 마우스를 가져가서 클릭만 하면 색상 추출이 완료됩니다. 원하는 색상에 마우스 클릭을 하면 자동으로 클립보드에 hexcode가 저장됩니다. 

클립보드에 최근에 추출한 색상이 저장되고, 웹사이트에서 추출한 모든 색상은 히스토리에 남게 됩니다.

이번에 소개해드릴 프로그램은,

웹 개발을 할 때 가장 유용하게 사용될 프로그램입니다.

웹 사이트를 디자인 할 때, CSS에서 레이아웃을 짜고

색상을 입힐텐데, 원하는 색상을 추출해 사용할 때 좋을 거 같네요!

바로!

웹을 검색하면서 어떤 요소에 있는 색상이 마음에 들 때

그 색상의 RGB, 16진수 색상 값을 가지고 올 수 있습니다.

웹에서 RGB, 16진수 색상 값 추출하는 프로그램

프로그램 이름을 먼저 말씀드리면

'Color Picker'라는 프로그램입니다.

정확히 말씀드리면 따로 컴퓨터에 다운로드 받아야 하는 프로그램이 아니라,

구글 '크롬'에서 사용할 수 있는 확장 프로그램입니다.

그러면 같이 다운로드하고 사용해보도록 하겠습니다.

1. 구글 크롬 확장프로그램에 들어가준다.

2. 왼쪽 하단에 Chrome 웹 스토어 열기를 클릭한다.

3. 'color picker'을 검색하고, 'Color by Fardos-Color Picker'을 클릭한다.

4. Chorme에 추가를 클릭한다.

5. 오른쪽 상단에 퍼즐모양을 클릭 후 핀으로 고정해준다.

6. color picker을 클릭하면 아래와 같이 뜨는데, 

이는 빨간색을 클릭하면 아래와 같이 계속적으로 색상을 선택할 수 있도록 나온다.

마음에 드는 색상이 나올 때까지 타고타고 들어가 16진수 값을 가지고 나오면 된다.

그러나 우리는 웹 요소에서 색상 값을 추출하기를 원하기 때문에

다른 기능을 활용한다.

7. 프로그램 아이콘에 마우스 우클릭을 하고 'Pick colors from site'를 누른다.

7-1. 다른 방법은 Color by Fardos 클릭 후, 하단에 'Eye Dropper'을 클릭한다.

8. 클릭하면 돋보기가 활성화 되는데, 원하는 요소에 클릭한다.

그러면 오른쪽 위에 값들이 저장이 된다.

원하는 요소들이  여러 개라면 모드 클릭해 값들을 모두 가져온다.

9. 오른쪽 탭에서 원하는 값을 클릭해 복사를 해서 사용한다.

클릭한 요소가 하나라면 이미 클릭한 순간 복사가 자동으로 되어 있다.

이를 활용해 원하는 웹에 원하는 색상이 있을 때

마음 껏 추출해서 그대로 색상 값을 가져와 나도 사용할 수 있게 된다.