재사용하고 싶은 색이 보입니다 — 사진에서, 마음에 드는 사이트의 스크린샷에서, 소스 파일이 사라진 지 오래인 옛 로고에서 — 그리고 짐작이 아니라 실제 헥스 코드가 필요합니다. 눈대중은 결코 딱 맞지 않습니다. 모니터는 거짓말을 하고, "그 파란색"은 사실 미묘하게 다른 파란색 여섯 개입니다. 팔레트를 픽셀에서 바로 뽑으면 CSS, 디자인 도구, 브랜드 문서에 붙여넣을 수 있는 코드를 얻습니다.
하는 법과, 무작위로 픽셀을 집는 게 아니라 실제로 쓸 만한 팔레트를 얻는 법을 소개합니다.
"팔레트 추출"이 실제로 하는 일
도구가 이미지를 훑어 그것을 가장 잘 대표하는 색 — 지배적인 톤과 눈에 띄는 강조색 — 을 찾은 뒤, 각각을 복사할 수 있는 헥스 코드로 줍니다. 백만 개의 개별 픽셀 색 대신, 이미지를 요약하는 정돈된 세트(가령 5개나 8개)를 얻습니다.
이것은 몇 가지 흔한 작업에 정말 유용합니다.
- 원본 규격이 없을 때 로고나 옛 자산에서 브랜드 색 복구.
- 분위기를 맞추고 싶은 사진 — 풍경, 제품 컷, 예술 작품 — 에서 디자인 팔레트 구축.
- 스크린샷만 가진 기존 사이트나 그래픽 맞추기.
- 이미 쓰는 이미지와 어울리는 배경이나 강조색 고르기.
이미지를 넣고 코드를 읽으세요.
쓸 만한 팔레트를 얻으려면 개수 조절을 쓰세요
가장 중요한 단 하나의 설정은 몇 개의 색을 뽑느냐입니다. 그것이 답을 완전히 바꿉니다.
- 적은 색(3–5개) 은 핵심 팔레트 — 이미지를 규정하는 한 줌의 톤 — 를 줍니다. 촘촘한 세트가 한계가 아니라 장점인 브랜딩이나 디자인 시스템에 보통 원하는 것입니다.
- 많은 색(8–12개) 은 미묘한 강조색과 그라데이션을 담습니다. 이미지가 풍부하고 다양해 보조 톤까지 원할 때, 또는 사진이 정확히 어떻게 구성됐는지 연구할 때 유용합니다.
첫 결과가 어색하게 느껴지면 — 한 색조가 지배하거나, 원했던 강조색이 병합돼 사라졌다면 — 개수를 조정해 다시 읽으세요. 80%가 하늘인 사진은 낮은 개수에서 파란색을 잔뜩 줍니다. 더 작은 색의 튀는 부분을 드러내려면 개수를 올리세요.
클릭해서 복사 — 중요한 작업 흐름
헥스 코드를 읽고 타이핑하는 데서 오류가 스며듭니다(#3A7BD5 vs #3A7BD6, 그리고 왜 이상해 보이나 10분을 고민하죠). 색상 팔레트 도구에서는 각 견본이 클릭 시 헥스 코드를 복사하므로, 키보드를 건드리지 않고 이미지에서 클립보드로, 스타일시트로 바로 갑니다.
실용적인 흐름입니다.
- 이미지를 불러옵니다.
- 작업에 맞게 개수를 설정합니다 — 브랜드 팔레트엔 낮게, 강조색을 잡으려면 높게.
- 원하는 견본을 각각 클릭합니다. 가려는 곳에 붙여넣습니다.
- 범위가 부족한가요? 개수를 살짝 올려 여분을 잡으세요.
디자이너의 눈으로 결과 읽기
팔레트가 잘 안착하도록 알아 둘 만한 몇 가지입니다.
- 지배적인 색이 늘 쓸모 있는 건 아닙니다. 흰 배경의 제품 사진은 흰색이나 거의-흰색을 잔뜩 보고합니다. 정확하지만, 여러분이 실제로 신경 쓰는 색은 제품입니다 — 개수를 올려 뽑아내거나, 먼저 피사체로 잘라내세요.
- 사진은 보이는 것보다 많은 색을 가집니다. 피부, 그림자, 반사가 여러분이 의식적으로 알아채지 못한 톤을 더합니다. 높은 개수는 그것을 드러내고, 낮은 개수는 평균 뒤로 숨깁니다.
- 헥스는 이식 가능합니다. 복사하는 모든 코드가 CSS, Figma, Photoshop, Canva, 브랜드 문서에서 바로 작동합니다. 변환이 필요 없습니다.
왜 브라우저에 머무는가
추출 전체가 로컬에서 실행됩니다 — 이미지는 Canvas로 여러분 브라우저에서 읽히고 분석되며, 절대 서버로 업로드되지 않습니다. "이미지"가 미공개 목업, 고객의 사적인 브랜드 자산, 또는 아무 웹 도구에 올려선 안 될 내부 스크린샷일 때 중요합니다. 무료이고, 가입이 필요 없으며, 첫 방문 이후 오프라인에서 작동합니다.
색을 잡고, 클릭해 복사하고, 있어야 할 곳에 붙여넣으세요.