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

디지털 세계는 우리 주변의 색상을 문자와 숫자의 간단한 조합으로 변환합니다. 마음에 드는 색상을 얻으려면 해당 코드를 가져와서 복제할 수 있습니다.

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

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

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

PC 앱 사용

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

Windows용 인스턴트 스포이드

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

설치하고 나면 시스템 트레이에서 액세스할 수 있습니다. 원하는 색상을 마우스 왼쪽 버튼으로 길게 누른 다음 놓습니다. 앱이 즉시 색상 코드를 클립보드에 복사하므로 원하는 프로그램에 붙여넣을 수 있습니다. 인스턴트 스포이드 Windows XP-10에서 작동합니다.

Mac용 디지털 컬러 미터

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

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

Mac용 SIP

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

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

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

브라우저 사용

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

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

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

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

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

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

브라우저 확장 사용

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

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

웹사이트 이용

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

PineTools 이미지 색상 선택기

이미지 색상 선택기 도구를 찾으세요. PineTools 웹사이트를 방문하고 이미지를 업로드하세요. 필요한 경우 확대하여 잡고 싶은 픽셀을 찾으세요. 간단한 클릭만으로 RGB 값과 HEX 코드를 얻을 수 있습니다.

이미지 색상 선택기

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

이미지 색상 찾기

간단한 색상 선택기 외에도 이미지 색상 찾기 창의적인 도구로도 기능할 수 있습니다. 색상에 대한 더 나은 개요를 위해 업로드된 이미지를 픽셀화하고 원하는 만큼 확대할 수 있습니다. 이 사이트는 또한 자동으로 몇 가지 색상을 제안합니다.

스크린샷 찍기

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

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

추가 FAQ

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

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

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

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

모바일 장치 화면에서 색상을 선택하려면 앱을 다운로드하거나 위에 언급된 웹사이트 중 하나를 이용하세요. 마크업 도구에는 iOS용 색상 선택기 도구도 있습니다. 색상의 HEX 코드도 제공할 수 있습니다.

단 한 번의 클릭으로 보이는 모든 색상을 얻으세요

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

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