색상 선택기를 사용하여 모든 픽셀에서 색상을 찾는 방법
빠른 답변
색상을 선택하려면 색상 선택기를 열고 이미지를 업로드한 다음(또는 화면 스포이드 사용) 원하는 색상의 픽셀을 클릭하면 HEX, RGB 및 HSL 값이 나타납니다. 모든 처리는 로컬에서 이루어지며 이미지는 업로드되지 않습니다.
소개
색상 선택기(스포이드라고도 함)를 사용하면 픽셀의 정확한 색상을 찾을 수 있습니다. 이는 브랜드 색상 일치, 이미지에서 색상 샘플링, 사진에서 색상 팔레트 구축에 필수적입니다. 브라우저 기반 색상 선택기는 캔버스 API를 사용하여 업로드된 이미지에서 색상을 읽을 수 있으며, 브라우저에 내장된 EyeDropper API는 화면 어디에서나 색상을 선택할 수 있습니다. 이 가이드에서는 브라우저에서 색상 선택기를 사용하는 방법을 보여줍니다.
단계별
-
색상 선택 도구 열기
색상 선택 도구 페이지로 이동합니다. 이 도구는 EyeDropper API를 통해 업로드된 이미지와 지원되는 브라우저의 화면 어디에서나 색상을 선택할 수 있도록 지원합니다.
-
소스를 선택하세요
이미지에서 선택하려면: 이미지를 업로드하거나 드래그 앤 드롭하세요. 화면에서 선택하려면(Chrome/Edge에만 해당): '화면에서 선택' 버튼을 클릭한 다음 화면의 아무 곳이나 클릭하세요.
-
샘플링할 픽셀을 클릭하세요.
이미지 선택의 경우 커서를 이미지 위로 이동하고 원하는 색상의 픽셀을 클릭합니다. 도구는 getImageData()를 사용하여 캔버스에서 픽셀 색상을 읽습니다. 돋보기를 사용하면 정확한 픽셀을 선택하는 데 도움이 될 수 있습니다.
-
색상 값 읽기
도구는 선택한 색상을 견본과 함께 HEX, RGB 및 HSL 형식으로 표시합니다. 커서를 이동하면 값이 즉시 업데이트됩니다.
-
색상을 복사하세요.
색상 값을 클립보드에 복사하려면 형식 옆에 있는 복사를 클릭하세요. CSS, 디자인 도구 또는 애플리케이션에서 사용하세요.
예
로고에서 브랜드 색상 선택
입력: logo.png, 브랜드 색상 픽셀 클릭
산출: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
사진에서 색상 샘플
입력: photo.jpg, 하늘 픽셀을 클릭하세요
산출: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
화면에서 선택(Chrome/Edge)
입력: '화면에서 선택'을 클릭한 다음 디스플레이의 픽셀을 클릭하세요.
산출: 해당 픽셀의 HEX 값(예: #ff5733)
일반적인 문제
- 앤티앨리어싱은 가장자리의 색상을 혼합합니다. 즉, 두 색상 사이의 가장자리에 있는 픽셀이 혼합됩니다. 정확성을 위해 단색 영역의 중앙에서 샘플링합니다.
- EyeDropper API는 지원되지 않습니다. 화면 선택 도구에는 Chrome 95 이상 또는 Edge 95 이상이 필요합니다. Firefox와 Safari는 이를 지원하지 않습니다. 대신 이미지 업로드 방법을 사용하세요.
- JPEG 압축은 색상을 변경합니다. —JPEG 손실 압축은 픽셀 색상을 약간 변경합니다. 정확한 브랜드 색상을 얻으려면 PNG 또는 원본 벡터 소스를 사용하세요.
- 색상 프로필 차이 - ICC(내장 색상 프로필)가 있는 이미지는 원시 픽셀 값이 제안하는 것과 다르게 표시될 수 있습니다.
팁
- 돋보기를 사용하여 정확한 픽셀을 선택하세요. 높은 확대/축소에서는 혼합된 가장자리가 아닌 하나의 정확한 픽셀을 선택할 수 있습니다.
- 단색 영역에서 여러 픽셀을 샘플링하고 압축으로 인해 노이즈가 발생한 경우 평균을 내므로 보다 대표적인 색상이 제공됩니다.
- 브라우저의 이미지뿐만 아니라 모든 응용 프로그램에서 색상을 선택하려면 EyeDropper API(Chrome/Edge)를 사용하세요.
- 즉각적인 비공개 색상 샘플링을 위해 색상 피커를 사용하세요. 이미지가 브라우저를 떠나지 않습니다.