앱 또는 웹사이트에서 특정 색상을 식별하는 방법

이미지를 스크롤하면서 다음 디자인 프로젝트에 필요한 정확한 색상인 완벽한 색상을 찾았다고 상상해 보십시오. 인터넷에는 앱이나 웹사이트에서 특정 색상을 식별하는 데 도움이 되는 몇 가지 멋진 도구가 있습니다. 최고의 옵션 중 일부를 살펴보겠습니다.

1. 크롬 웹 브라우저에서 개발자 도구 사용하기

시도할 수 있는 한 가지 옵션은 Chrome 개발자 도구입니다. Chrome에는 개발자에게 유용한 기능이 많이 포함되어 있어 작업을 훨씬 더 쉽게 수행할 수 있습니다. 다음 단계를 사용하여 모든 앱이나 웹사이트에서 특정 색상을 식별할 수 있습니다.

• Chrome 웹 브라우저에서 색상을 식별하려는 웹사이트를 엽니다.
• 크롬 우측 상단의 점 3개 아이콘을 클릭합니다. 많은 옵션이 있는 팝업이 나타납니다.
• '추가 도구'를 클릭한 다음 결과 팝업에서 '개발자 도구'를 선택합니다.
• 위의 단계를 건너뛰려면 Ctrl + Shift + I를 사용하세요.
• 이제 창은 두 개의 화면으로 나뉩니다. 왼쪽의 웹사이트와 오른쪽의 웹사이트 코드
• 키보드에서 Ctrl + Shift + C를 입력합니다. 이것은 요소에 마우스 커서를 올리면 웹사이트의 특정 요소에 대한 모든 세부 정보를 보여줍니다.
• 다른 유용한 정보와 함께 요소의 색상 코드를 찾을 수 있습니다.

예

다음 웹사이트의 일부 요소에 대한 특정 색상 코드에 관심이 있다고 가정해 보겠습니다.

화면 모서리에 있는 세 개의 점을 클릭하여 개발자 도구를 선택할 수 있습니다. 드롭다운 메뉴에서 추가 도구를 선택한 다음 개발자 도구를 선택합니다.

화면은 시각적으로 두 페이지로 나뉩니다. 왼쪽에 웹사이트가 표시되고 오른쪽에 사이트 코드가 표시됩니다.

명령과 단축키 "Ctrl + Shift + C"를 입력하고 웹사이트 요소 위에 마우스 커서를 올려 놓습니다. 그러면 다른 유용한 정보와 함께 해당 요소의 색상이 표시됩니다. 다음은 검색 도구 아래에 있는 탐색 모음과 대시보드의 색상을 찾는 두 가지 예입니다.

여기에서 탐색 모음의 팝업에서 색상 코드를 찾을 수 있습니다. 색상 코드는 #333333입니다.

대시보드의 색상은 기타 유용한 세부 정보와 함께 찾을 수 있습니다. 색상: #333333, 배경색: #5D4A8E. 처음에는 조금 겁이 나는 것처럼 보일 수 있지만 약간의 연습을 통해 프로그램을 훨씬 쉽게 사용할 수 있습니다.

2. 스포이드 크롬 확장 프로그램

Eye Dropper는 인기 있고 널리 사용되는 Chrome 확장 프로그램으로 모든 웹사이트나 앱에서 특정 색상을 찾는 데 도움이 됩니다.

Eye Dropper 확장 도구를 사용하여 웹사이트 또는 앱에서 특정 색상을 식별하려면 아래 단계를 따르십시오.

• Chrome 웹 브라우저에서 웹사이트나 앱을 엽니다.
• Eye Dropper 확장 아이콘을 클릭하십시오.
• '웹 페이지에서 색상 선택'을 선택하고 앱 또는 웹사이트의 다른 요소에 마우스 커서를 올려 놓습니다.

웹 페이지 오른쪽 하단에 나열된 요소의 색상 코드를 찾을 수 있습니다.

예

자, 실제 예에서 스포이드 확장 도구를 사용해 보겠습니다. 웹사이트를 열고 Eye Dropper 확장 아이콘을 눌러 시작하겠습니다.

웹사이트의 다양한 요소에 커서를 올리면 화면 오른쪽 하단의 섹션에 색상 코드가 나타나는 것을 볼 수 있습니다.

커서를 V자 모양 아이콘에 가져가면 언급한 대로 하단 창에서 색상 코드를 볼 수 있습니다. 이 도구의 장점은 요소의 16진수 색상 코드와 함께 RGB 코드도 찾을 수 있다는 것입니다. 이 방법은 좋아하는 색상의 코드를 간단하고 빠르게 가져오려는 사람들에게 유연하게 사용할 수 있습니다.