본문 바로가기
Study/Tip

그림판으로 간단하게 RGB 값 추출해서 RGB 코드 알아내기

by 얏옹이 2022. 12. 21.
반응형

RGB값 추출 및 코드 알아내기

 

우리는 HTML이나 CSS를 다루다보면 색상 관련하여 다양한 색상을 입히고 싶거나 좋아보이는 색상을 가져와서

 

내 코드에 적용하고 싶을때가 많다. 나또한 그랬고 그러다가 손쉽게 알아낼수 있는 방법을 발견해 포스팅한다.

 

물론 간단한 방법이라 정확한값이 아닐수는 있다. 임시로 쓰기에 좋거나 간단하게 쓰기 좋은 방법이다.

 

먼저 이런 파일이 하나있다고 치자. 이건 윈도우에서 기본으로 제공하는 배경화면이다.

 

 

그럼 이 파일을 그림판으로 열어주겠다. 파일 -> 마우스오른쪽 -> 편집 누르면 기본으로 그림판이 열릴것이다.

 

그림판에서 표시된 스포이드모양의 버튼을 누른후 표시된 영역을 클릭해보자.

 

 

그럼 오른쪽의 색1 색2중에서 색1이 색상이 변할것이다. 이것이 색상을 가져오는 기능이다.

 

색상을 가져왔다면 색 편집을 눌러주자.

 

 

그럼 이런창이 뜬다. 여기에서 Red Green Blue 값을 잘 기억하자.

 

 

자 이제 RGB의 값을 알았으니 해당 색상의 색상코드를 알아보러 가보자.

 

 

네이버에서 제공하는 RGB 색상표 라는게 있다. 

 

RGB 색상표 새창으로 이동하기

 

rgb 색상표 : 네이버 통합검색

'rgb 색상표'의 네이버 통합검색 결과입니다.

search.naver.com

 

여기에 아까 그림판에서 추출한 색상값을 입력해주자.

 

 

그럼 #4B4CBD라는 RGB 코드표로 변환해준다. 이걸 코드에 응용하면 된다.

 

아울러 네이버 색상표 말고도 W3School에서 제공하는 RGB 색상표도 있다.

 

W3School RGB 색상표 새창으로 이동하기

 

HTML Color Picker

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

반응형