디자인 컬러 고민 끝! 사진에서 색상 추출하고 조합까지 해주는 '나만의 컬러 차트'

 

 

색상 차트 사진에서 색상을 추출하고 조합을 찾아보세요

사진을 드래그하거나 클릭해서 업로드

JPG · PNG · WEBP

색상 수 10

추출된 색상

H: 217°  S: 91%  L: 60%

 

 

단순히 예쁜 색을 찾는 걸 넘어, 디자인의 효율을 높여주는 도구가 되었으면 좋겠습니다.

저처럼 컬러 선택에 어려움을 겪으시는 분들께 작은 도움이 되길 바랍니다!

 

 

"왜 만들었나요?"

디자인 작업을 하다 보면 가장 시간 많이 잡아먹는 게 바로 **'컬러 선정'**이죠. 핀터레스트나 어도비 컬러를 뒤져봐도 마음에 딱 드는 걸 찾기 어렵고, 무엇보다 매번 사이트를 옮겨 다니는 게 번거로워서 **'내가 쓰기 편한 도구'**를 직접 만들게 되었습니다.

• 포인트: "디자인할 때 컬러 고민하는 시간을 0으로 줄이자!"
• 특징: 복잡한 기능은 빼고, 딱 필요한 추출·추천·저장 기능만 넣었습니다.
  
  
  주요 기능 소개
  • 좋아하는 분위기의 사진을 드래그만 하세요.
  • K-Means 알고리즘을 활용해 이미지에서 가장 지배적인 색상들을 자동으로 뽑아줍니다.
  • 추출할 색상의 개수(4개~20개)도 슬라이더로 조절할 수 있어요.
  ② 실패 없는 6가지 배색 추천 (Harmony)
  • 기준 색상 하나만 정하면 디자인 이론에 근거한 6가지 배색을 제안합니다.
    • 보색/분열 보색: 강렬하고 눈에 띄는 포인트가 필요할 때
    • 유사색/단색: 부드럽고 통일감 있는 무드를 원할 때
    • 삼각/사각 배색: 다채롭고 풍성한 컬러감이 필요할 때
  ③ 테마별 프리셋 & 나만의 컬렉션
  • '골든 아워', '서울 밤거리', '카페 라떼' 등 이름만 들어도 색이 떠오르는 80개 이상의 프리셋을 미리 담아뒀습니다.
  • 마음에 드는 조합은 '컬렉션'에 저장해두고 언제든 다시 꺼내 쓸 수 있습니다.
  ④ 개발자를 위한 편의성
  • 색상 코드를 일일이 타이핑할 필요 없습니다.
  • 클릭 한 번으로 HEX 코드 복사는 물론, 프로젝트에 바로 붙여넣을 수 있는 CSS 변수(--color-1) 형태로도 복사됩니다.
• ① 사진에서 감성 추출 (Photo Extraction)