이미지 색상 추출기

비슷한 색이 아니라 정확한 색이 필요할 때

브랜드를 다시 만드는데 참고할 것이 오래된 로고 하나뿐입니다. 버튼을 마음에 드는 사이트의 스크린샷에 맞춥니다. 사진에서 어떤 색조를 발견해 여러분 자신의 디자인에 쓰고 싶습니다. 어느 경우든 문제는 같습니다. 눈은 화면에서 HEX 코드를 읽어낼 수 없습니다. "그 청록색"은 사실 살짝씩 다른 청록색 열두 가지이고, 모니터가 그것들을 더 벌려 놓습니다. 픽셀이 실제로 지닌 숫자가 필요합니다.

그것이 이 도구가 하는 일입니다. 이미지를 불러와 그 위를 움직이면, 확대경 루페가 커서를 따라다니며 밑의 픽셀을 크게 키워 보여주니 원하는 정확한 하나에 착지할 수 있습니다. 클릭하면 그 색이 스와치로 저장됩니다. 각 스와치는 HEX, RGB, HSL 값을 각각 옆의 복사 버튼과 함께 나열하므로, 이미지의 픽셀에서 클립보드의 코드로 곧장 갑니다.

이미지는 절대 기기를 떠나지 않습니다. 픽셀을 캔버스에서 브라우저 안 로컬로 읽습니다. 아무것도 업로드하지 않고, 계정도 없으며, 페이지가 로드되면 네트워크를 꺼도 계속 작동합니다. "이미지"가 미출시 목업, 고객의 브랜드 자산, 또는 아무 웹 도구에나 넘기면 안 되는 내부 스크린샷일 때 바로 그것이 요점입니다.

실제로 어떻게 쓰나

• 루페는 정밀함을 위한 것. 로고와 UI에는 색이 한 픽셀 안에서 바뀌는 단단한 가장자리가 있습니다. 앤티에일리어싱 때문에 바로 옆 픽셀은 탁한 혼합이죠. 확대된 화면은 확정하기 전에 어느 픽셀 위에 있는지 정확히 보게 하므로, 가장자리가 아니라 평평한 브랜드 색을 고릅니다.
• 모든 클릭이 스와치를 간직. 표본 추출은 한 번 하고 사라지는 게 아닙니다. 이미지를 여기저기 클릭하면 각 색이 목록에 쌓이므로, 한 번에 로고의 주 색, 강조색, 글자색을 뽑아 나란히 비교할 수 있습니다.
• 세 형식, 한 번의 선택. 각 스와치가 HEX, RGB, HSL을 한꺼번에 보여줍니다. 형식을 바꾸려 다시 표본을 뽑지 않습니다. 같은 색이 이미 셋 다로 앉아 있고, 각자 복사 버튼이 있습니다.

HEX, RGB, HSL — 무엇을 복사할까

같은 색을 쓰는 세 가지 방식이고, 알맞은 것은 그것이 어디로 가느냐에 달렸습니다.

• HEX (#3A7BD5)는 웹의 기본입니다. CSS, 대부분의 디자인 도구, 브랜드 문서죠. 간결하고 어디에나 붙여 넣을 수 있습니다. 그러지 않을 이유가 없다면 이것을 복사하세요.
• RGB (rgb(58, 123, 213))는 빨강, 초록, 파랑 채널을 풀어 씁니다. 도구가 채널 값을 원할 때, 알파(rgba)가 필요할 때, 또는 색이 어떻게 섞였는지 따질 때 유용합니다.
• HSL (hsl(215, 65%, 53%))은 색조, 채도, 명도를 설명합니다. 그냥 재사용하는 게 아니라 색을 조정하고 싶을 때 손을 뻗을 것이죠. 호버 상태를 위해 명도를 살짝 올리고, 차분한 변형을 위해 채도를 낮추고, 색조를 유지한 채 척도를 만드세요.

솔직한 한계 하나, 그리고 자매 도구

이것은 점 표본기입니다. 각 클릭이 픽셀 하나를 읽습니다. 깨끗한 로고나 평평한 UI에서는 바로 그것이 원하는 바입니다. 잡음 많은 사진—입자, 그라데이션, JPEG 아티팩트—에서는 이웃한 두 픽셀이 다를 수 있으므로, 평평한 영역에서 고르고 루페를 써서 이상치에 착지하지 않도록 하세요. 여기에는 영역 평균 브러시가 없습니다.

그리고 손으로 고르고 싶지 않다면, img.diy에는 이미지 전체를 훑어 지배적인 색을 자동으로 건네는 별도의 팔레트 도구가 있습니다. 둘은 다른 질문에 답합니다. 팔레트 도구는 이 이미지가 어떤 색들로 이루어졌는지 알려주고, 색 선택기는 특정 픽셀 하나—로고의 바로 이 지점, 저 버튼 하나—를 가리켜 그 값을 취하게 합니다. 이미지를 요약하려면 팔레트 도구에, 원하는 지점을 이미 안다면 이 도구에 손을 뻗으세요.

이미지를 불러오고, 호버해 픽셀을 찾고, 클릭해 간직하고, 필요한 형식을 복사하세요.