본문 바로가기
개발(Develop)/Program Install

웹에서 색상 추출하기 / 16진수 색상 값, RGB값 추출 프로그램 / color picker 사용법 / 웹 요소 색상 값 가져오기 / CSS 색상 추출하기

by 왁왁s 2021. 12. 31.

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

 

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

 

웹 사이트를 디자인 할 때, 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. 오른쪽 탭에서 원하는 값을 클릭해 복사를 해서 사용한다.

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

 


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

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

댓글