색상 추출기로 스크린샷에서 브랜드 팔레트 빠르게 뽑기

개발

클라이언트 로고 파일이나 기존 제품 스크린샷만 있고 정확한 브랜드 가이드가 없을 때, 눈대중으로 색을 찍으면 페이지마다 색이 달라집니다.

이럴 때는 브라우저에서 바로 쓸 수 있는 Dante Tools를 열어 먼저 손으로 검증해보는 것이 좋습니다. 작은 확인 과정을 거치면 배포 후 되돌리는 시간을 줄일 수 있습니다.

색상 추출기 사용 화면
색상 추출기 사용 화면

언제 쓰면 좋은가

레퍼런스 이미지나 제품 스크린샷에서 주요 색상을 추출해 랜딩페이지, 발표 자료, 썸네일 색상을 맞추는 방법입니다.

팔레트가 필요한 작업

랜딩페이지 CTA 색상
블로그 대표 이미지 배경
발표 자료 강조 색상

실무 루틴

  1. 레퍼런스 이미지를 업로드합니다.
  2. 추출할 색상 수를 5개 안팎으로 정합니다.
  3. 가장 많이 쓰는 색과 포인트 색을 구분합니다.
  4. HEX 값을 디자인 토큰이나 문서 스타일에 반영합니다.

배포 전 체크

  • 배경색과 글자색의 대비가 충분한가
  • 로고의 안티앨리어싱 색을 대표색으로 착각하지 않았는가
  • 추출한 색을 그대로 쓰기보다 UI 역할에 맞게 정리했는가

색상 추출은 브랜드 가이드가 없을 때 출발점을 만들어줍니다. 다만 최종 색상은 접근성과 UI 역할 기준으로 한 번 더 다듬어야 합니다.

다른 글