컴퓨터 화면에서 색상을 식별하는 방법

디지털 세계는 우리 주변의 색상을 문자와 숫자의 단순한 조합으로 변환합니다. 원하는 색상을 가져오려면 해당 코드를 가져와 복제하면 됩니다.

웹을 탐색하는 동안 특정 색상이 눈에 띄었습니까? 아니면 일관성을 유지하기 위해 디자인에 특정 음영을 사용해야 합니까? 화면에서 픽셀의 RGB 또는 HEX 코드를 가져오는 방법은 다음과 같습니다.

화면에서 색상의 RGB 또는 HEX 값 식별

화면에서 색상의 RGB 또는 HEX 값을 식별하는 데 전문가의 눈이나 값비싼 도구가 필요하지 않습니다. PC에서는 색상 코드를 쉽게 얻을 수 있는 여러 가지 방법이 있습니다.

PC 앱 사용

화면에서 색상을 선택하는 첫 번째 방법은 컴퓨터 앱을 사용하는 것입니다. PC에 이미 이 앱이 있을 수 있습니다.

Windows용 인스턴트 스포이드

색상 코드를 자주 파악해야 하는 경우 손에 간단한 도구가 있으면 삶이 더 쉬워집니다. Instant Eyedropper는 현재 Windows 전용 무료 앱입니다.

일단 설치하면 시스템 트레이에서 액세스할 수 있습니다. 원하는 색상을 마우스 왼쪽 버튼으로 누른 상태에서 손을 뗍니다. 이 앱은 색상 코드를 클립보드에 즉시 복사하고 원하는 프로그램에 붙여넣을 수 있습니다. Instant Eyedropper는 Windows XP-10에서 작동합니다.

Mac용 디지털 컬러 미터

Digital Color Meter는 Mac 장치에 사전 설치된 유사한 도구입니다. 응용 프로그램 폴더를 열고 유틸리티를 찾으십시오. Digital Color Meter 도구가 바로 거기에 있어야 합니다.

이 앱을 실행하면 커서가 화면에서 색상을 선택하는 데 사용할 수 있는 스포이드 모양으로 바뀝니다. 앱은 기본적으로 RGB 값을 표시합니다. 이것을 복사하고 나중에 HEX로 변환하거나 옵션을 조정하여 원하는 정확한 색상을 얻을 수 있습니다.

Mac용 SIP

고급 도구가 필요한 경우 Mac에서 사용할 수 있는 SIP를 살펴볼 수 있습니다. SIP는 색상 선택기 그 이상입니다. 또한 모든 웹 디자이너가 인정할 수 있는 다양한 고급 기능을 제공합니다. 색상을 쉽게 편집하고 팔레트로 구성하고 필요에 맞게 형식을 변경할 수 있습니다.

안타깝게도 SIP는 무료 도구는 아니지만 무료 평가판을 제공합니다. 추가 기능이 비용 가치가 있는지 확인하기 위해 시도해 볼 수 있습니다.

이러한 데스크톱 앱의 장점은 화면의 거의 모든 부분에서 색상을 가져올 수 있다는 것입니다. 아래의 브라우저 도구는 웹 페이지 내에서만 그렇게 할 수 있습니다. 물론 사진이나 스크린샷을 업로드하여 브라우저에서 볼 수 있으므로 이 제한을 우회할 수 있습니다.

브라우저 사용

RGB 또는 HEX 코드 색상을 얻는 다음과 같은 간단한 방법은 브라우저의 내장 도구를 사용하는 것입니다. 현재 웹 페이지에서만 색상을 선택할 수 있지만 이를 위해 Firefox와 Chrome을 모두 사용할 수 있습니다.

Firefox의 색상 선택 도구를 찾을 수 있는 위치는 다음과 같습니다.

1. Firefox를 실행하고 색상 코드를 추출하려는 웹사이트를 엽니다.
   
2. 오른쪽 상단 모서리에 있는 브라우저 메뉴(가로선 3개)를 클릭합니다.
   
3. 옵션 중에서 웹 개발자 도구를 찾으십시오. "추가 도구" 아래에 있을 수 있습니다.
   
   
4. 페이지 하단에 창이 열립니다. 스포이드 아이콘을 찾으면 클릭 한 번으로 색상 코드를 복사할 수 있습니다.
   

단계는 Chrome에서도 비슷합니다.

1. Chrome을 실행하고 원하는 웹사이트를 엽니다.
   
   
2. 오른쪽 상단 모서리에 있는 메뉴(세로 점 3개)를 클릭하고 "추가 도구"에서 "개발자 도구"를 찾습니다.
   
3. 페이지 오른쪽에 창이 열립니다. 두 번째 섹션에서 "스타일"을 찾아 클릭합니다.
   
4. "본문" 아래에 여러 색상의 상자가 표시됩니다. 색상 선택기를 활성화하려면 그 중 하나를 클릭하십시오.
   

팁: 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하여 두 브라우저 모두에서 개발자 도구를 열 수도 있습니다.

브라우저 확장 프로그램 사용

개발자 도구 외에도 편리한 브라우저 확장을 사용하여 웹 페이지에서 색상을 선택할 수도 있습니다. 모든 작업을 수행하는 다음 확장을 확인하십시오.

• 컬러질라
  
• ColorPick 스포이드
  
• 점안기
  

웹사이트 사용

색상의 RGB 또는 HEX 코드를 식별하기 위해 앱이나 확장 프로그램이 반드시 필요한 것은 아닙니다. 색상을 가져오려는 특정 이미지가 있는 경우 웹 사이트를 사용할 수도 있습니다. 수많은 웹사이트에서 사진을 업로드하거나 색상 코드를 추출하거나 조화로운 팔레트를 생성할 수도 있습니다.

PineTools 이미지 색상 선택기

PineTools 웹사이트 에서 Image Color Picker 도구를 찾아 이미지를 업로드하세요. 잡고 싶은 픽셀을 찾기 위해 필요한 경우 확대합니다. 간단한 클릭으로 RGB 값과 HEX 코드를 얻을 수 있습니다.

이미지 색상 선택기

Image Color Picker 웹 사이트는 이미지 업로드 이외의 몇 가지 다른 옵션을 제공합니다. "이미지 사용"을 클릭하고 이미지를 가져올 위치를 선택합니다. 특정 색상에 대한 이미지의 아무 부분이나 클릭할 수 있지만 웹 사이트는 이미지를 기반으로 색상 팔레트도 제안합니다.

이미지 색상 찾기

단순한 색상 선택기 외에도 Image Color Finder는 창의적인 도구로도 사용할 수 있습니다. 업로드된 이미지를 픽셀화하여 색상을 더 잘 볼 수 있도록 하고 원하는 만큼 확대할 수 있습니다. 사이트는 또한 몇 가지 색상을 자동으로 제안합니다.

스크린샷 찍기

마지막으로 위에서 언급한 모든 도구 없이 색상 코드를 식별할 수 있습니다. 대신 스크린샷을 찍고 거기에서 색상을 선택합니다.

1. 선택하려는 색상이 화면에 표시되는지 확인하십시오.
2. Windows에서 키보드의 Print Screen 버튼(PrntScr, PrtScn 등)을 누르거나 Mac에서 "Shift + Command + 3"을 동시에 길게 눌러 스크린샷을 찍습니다. 스크린샷이 자동으로 클립보드에 복사됩니다.
   
   팁: 화면의 일부만 캡처할 수도 있습니다. Windows에서는 시작 메뉴에서 캡처 도구를 엽니다. Mac에서는 "Shift + Command + 4" 단축키를 사용합니다.
3. MS 그림판(또는 다른 이미지 처리 앱)을 열고 스크린샷을 붙여넣습니다.
4. 스포이드 도구를 찾아 색상을 선택합니다.
   
5. MS 그림판의 색상 팔레트 옆에 있는 "색상 편집"을 클릭합니다. 슬라이더 아래에 현재 색상의 RGB 값이 표시됩니다.
   이 숫자를 HEX 코드로 바꾸려면 웹 사이트의 도움이 필요합니다.
6. RGB to HEX로 이동하여 해당 필드에 값을 입력합니다.
   
7. "16진수로 변환"을 클릭하면 코드를 얻을 수 있습니다.
   

추가 FAQ

RGB와 HEX의 차이점은 무엇입니까? 어느 것이 필요합니까?

RGB와 HEX 코드는 같은 색상을 표현합니다. 그럼에도 불구하고 필요한 코드는 용도에 따라 다릅니다. RGB 코드는 원하는 색상을 생성하기 위해 방출할 빨강, 녹색 및 파랑 빛의 양을 화면에 지시합니다. HEX 코드는 동일한 정보를 코딩 언어로 전송합니다.

디자이너나 개발자는 색상의 HEX 코드가 필요할 가능성이 높습니다.

모바일 장치에서 색상을 어떻게 식별합니까?

휴대기기 화면에서 색상을 선택하려면 앱을 다운로드하거나 위에서 언급한 웹사이트 중 하나를 사용할 수 있습니다. 마크업 도구 내부에는 iOS용 색상 선택기 도구도 있습니다. 색상의 HEX 코드도 제공할 수 있습니다.

클릭 한 번으로 보이는 모든 색상 얻기

RGB 또는 HEX 색상 코드를 사용하면 오류 가능성이 없습니다. 이러한 보편적인 색상 언어 덕분에 디자인을 동일한 색조로 일관되게 유지할 수 있습니다. 화면에서 색상 코드를 추출하는 방법은 여러 가지가 있으므로 가장 쉬운 방법을 찾으면 됩니다.

어떤 색상 선택기 도구를 선호하십니까? 아니면 추가할 다른 신뢰할 수 있는 방법이 있습니까? 아래에서 알려주세요.