웹을 탐색하는 동안 특정 색상이 눈에 띕니까? 아니면 모든 것을 일관성 있게 유지하기 위해 디자인에 특정 색조를 사용해야 합니까? 다음은 화면에 있는 픽셀의 RGB 또는 HEX 코드를 얻는 방법입니다.
화면에서 색상의 RGB 또는 HEX 값 결정
화면에서 RGB 또는 HEX 색상 값을 식별하는 데 전문가의 눈이나 값비싼 도구가 필요하지 않습니다. PC에서 색상 코드를 얻는 몇 가지 쉬운 방법이 있습니다.
PC 앱 사용
화면에서 색상을 얻는 첫 번째 방법은 컴퓨터 응용 프로그램을 사용하는 것입니다. 이 응용 프로그램은 컴퓨터에 이미 설치되어 있을 수 있습니다.
Windows용 인스턴트 드로퍼
색상 코드를 자주 가져와야 하는 경우 간단한 도구만 있으면 생활이 더 쉬워집니다. Instant Eyedropper는 현재 Windows 전용 무료 응용 프로그램입니다.
설치하면 시스템 트레이에서 액세스할 수 있습니다. 선택한 색상에서 마우스 왼쪽 버튼을 누른 상태에서 손을 떼면 됩니다. 응용 프로그램은 즉시 색상 코드를 클립보드에 복사하고 모든 프로그램에 붙여넣을 수 있습니다. Instant Dropper 는 Windows XP-10에서 작동합니다.
Mac용 디지털 컬러 미터
Digital Color Meter는 Mac 장치에 사전 설치된 유사한 도구입니다. 응용 프로그램 폴더를 열고 유틸리티를 찾습니다. Digital Color Meter 도구가 바로 거기에 있어야 합니다.
이 응용 프로그램을 실행하면 커서가 스포이드로 바뀌고 화면에서 원하는 색상을 선택할 수 있습니다. 앱은 기본적으로 RGB 값을 표시합니다. 복사하여 나중에 HEX로 변환하거나 설정을 조정하여 원하는 정확한 색상을 얻을 수 있습니다.
Mac용 SIP
고급 도구가 필요한 경우 Mac에서 사용할 수 있는 SIP를 확인할 수 있습니다. SIP는 색상 선택기 이상입니다. 또한 모든 웹 디자이너가 높이 평가할 많은 고급 기능을 제공합니다. 색상을 쉽게 편집하고 팔레트로 구성하고 필요에 맞게 형식을 변경할 수 있습니다.
불행히도 SIP 는 무료 도구가 아니지만 무료 평가판을 제공합니다. 추가 기능이 돈 가치가 있는지 알아보기 위해 사용해 볼 수 있습니다.
이러한 데스크탑 응용 프로그램의 장점은 화면의 거의 모든 부분에서 색상을 캡처할 수 있다는 것입니다. 아래의 브라우저 도구는 웹 페이지 내에서만 이 작업을 수행할 수 있습니다. 물론 사진이나 스크린샷을 업로드하여 브라우저에서 볼 수 있으므로 이 제한을 피할 수 있습니다.
브라우저 사용
RGB 또는 HEX 코드 색상을 얻는 다음 쉬운 방법은 브라우저에 내장된 도구를 사용하는 것입니다. 기존 웹 페이지에서만 색상을 선택할 수 있지만 이를 위해 Firefox와 Chrome을 모두 사용할 수 있습니다.
Firefox 색상 선택기를 찾을 수 있는 위치는 다음과 같습니다.
- Firefox를 실행하고 색상 코드를 추출할 웹사이트를 엽니다.
- 오른쪽 상단 모서리에 있는 브라우저 메뉴(가로선 3개)를 클릭합니다.
- 옵션 중에서 웹 개발자 도구를 찾으십시오. “추가 도구” 섹션에 있을 수 있습니다.
- 페이지 하단에 창이 열립니다. 스포이드 아이콘을 찾으면 클릭 한 번으로 색상 코드를 복사할 수 있습니다.
단계는 Chrome에서 유사합니다.
- Chrome을 실행하고 원하는 웹사이트를 엽니다.
- 오른쪽 상단에 있는 메뉴(세로 점 3개)를 클릭하고 “추가 도구” 아래에서 “개발자 도구”를 찾습니다.
- 페이지 오른쪽에 창이 열립니다. 두 번째 섹션에서 “스타일”을 찾아 클릭합니다.
- “본문” 아래에 여러 색상의 직사각형이 표시됩니다. 색상 선택기를 활성화하려면 그 중 하나를 클릭하십시오.
조언. 페이지를 마우스 오른쪽 버튼으로 클릭하고 “검사”를 선택하여 두 브라우저 모두에서 개발자 도구를 열 수도 있습니다.
브라우저 확장 프로그램 사용
개발자 도구 외에도 편리한 브라우저 확장을 사용하여 웹 페이지에서 원하는 색상을 선택할 수도 있습니다. 모두 작업을 수행하는 다음 확장을 확인하십시오.
웹사이트 이용
색상의 RGB 또는 HEX 코드를 결정하기 위해 앱이나 확장이 반드시 필요한 것은 아닙니다. 색상을 얻으려는 특정 이미지가 있는 경우 웹사이트를 사용할 수도 있습니다. 수많은 웹사이트에서 사진을 업로드하거나 색상 코드를 추출하거나 조화로운 팔레트를 만들 수도 있습니다.
PineTools 이미지 색상 선택기
PineTools 웹사이트 에서 이미지 색상 선택기를 찾아 이미지 를 업로드하십시오. 캡처하려는 픽셀을 찾기 위해 필요한 경우 확대합니다. 한 번의 클릭으로 RGB 값과 16진수 코드를 얻을 수 있습니다.
이미지 색상 선택
이미지 색상 선택기 웹사이트는 이미지 업로드 외에 몇 가지 다른 옵션을 제공합니다. “이미지 사용”을 클릭하고 이미지를 가져올 위치를 선택합니다. 이미지의 아무 부분이나 클릭하여 특정 색상을 선택할 수 있지만 웹사이트는 이미지 기반 색상 팔레트도 제공합니다.
이미지 색상 검색
Image Color Finder 는 단순한 색상 선택기일 뿐만 아니라 창의적인 도구로도 사용할 수 있습니다. 업로드된 이미지를 픽셀화하여 색상을 더 잘 보고 원하는 만큼 확대할 수 있습니다. 사이트는 자동으로 몇 가지 색상을 제안합니다.
스크린샷 찍기
마지막으로 위에서 언급한 모든 도구 없이 색상 코드를 결정할 수 있습니다. 대신 스크린샷을 찍고 거기에서 색상을 선택합니다.
- 선택하려는 색상이 화면에 보이는지 확인하십시오.
- Windows에서는 키보드의 Print Screen 버튼(PrntScr, PrtScn 등)을 누르고, Mac에서는 “Shift + Command + 3″을 동시에 눌러 스크린샷을 찍습니다. 스크린샷이 자동으로 클립보드에 복사됩니다. 팁: 화면의 일부만 캡처할 수도 있습니다. Windows의 경우 시작 메뉴에서 캡처 도구를 엽니다. Mac에서는 키보드 단축키 “Shift + Command + 4″를 사용합니다.
- MS 그림판(또는 다른 이미징 응용 프로그램)을 열고 스크린샷을 붙여넣습니다.
- 스포이드 도구를 찾아 색상을 선택합니다.
- MS Paint의 색상 팔레트 옆에 있는 “색상 편집”을 클릭합니다. 슬라이더 아래에는 현재 색상의 RGB 값이 표시됩니다. 이 숫자를 16진수 코드로 변환하려면 웹사이트의 도움이 필요합니다.
- RGB to HEX 로 이동 하여 해당 필드에 값을 입력합니다.
- “16진수로 변환”을 클릭하면 코드가 표시됩니다.
추가 FAQ
RGB와 HEX의 차이점은 무엇입니까? 내가 무엇이 필요 하나?
RGB 및 HEX 코드는 동일한 색상을 나타냅니다. 그러나 필요한 코드는 용도에 따라 다릅니다. RGB 코드는 원하는 색상을 생성하기 위해 방출하는 빨강, 녹색 및 파랑 빛의 양을 화면에 알려줍니다. HEX 코드는 동일한 정보를 전달하지만 코딩 언어로 되어 있습니다.
디자이너나 개발자는 색상 HEX 코드가 필요할 가능성이 큽니다.
모바일 장치에서 색상을 결정하는 방법은 무엇입니까?
모바일 장치의 화면에서 색상을 선택하려면 앱을 다운로드하거나 위에 언급된 웹사이트 중 하나를 사용할 수 있습니다. 마크업 도구에는 iOS용 색상 선택 도구도 있습니다. 또한 색상의 HEX 코드를 제공할 수도 있습니다.
한 번의 클릭으로 보이는 모든 색상을 얻으십시오.
RGB 또는 HEX 색상 코드를 사용하면 오류 가능성이 없습니다. 이러한 보편적인 색상 언어를 사용하면 디자인을 동일한 색조로 일관되게 유지할 수 있습니다. 화면에서 색상 코드를 추출하는 방법은 여러 가지가 있으므로 가장 쉬운 방법을 찾으면 됩니다.
어떤 색상 선택기를 선호합니까? 아니면 추가할 다른 신뢰할 수 있는 방법이 있습니까? 아래에 알려주십시오.
답글 남기기