사진에서 색상 뽑는 법 (컬러 팔레트·HEX 코드)

마음에 드는 사진 한 장에서 웹사이트나 발표 자료에 쓸 색 조합을 뽑을 수 있어요. 색을 뽑은 뒤 어떻게 고르고 확인하는지까지 정리했어요.

색을 뽑는 방법

모아키트의 컬러 팔레트 추출기에 사진을 올리면 사진에서 자주 나오는 색을 골라 보여 줘요. 사진은 서버로 보내지 않고 브라우저 안에서만 처리돼요. 결과로 나온 색은 HEX 코드(#RRGGBB 모양의 색 번호)로 복사해서 디자인 도구나 코드에 바로 붙여 쓸 수 있어요.

주 색·보조 색·강조 색 정하기

색을 여러 개 뽑았다면 역할을 나눠서 쓰는 것이 좋아요. 화면에서 가장 넓게 쓰이는 색이 주 색, 이를 받쳐 주는 색이 보조 색, 버튼처럼 눈에 띄어야 하는 곳에 쓰는 색이 강조 색이에요. 거의 흰색이나 회색인 무채색은 배경과 글자에 쓰면 안정적이에요.

명도 단계로 확장하기

한 색으로 연한 배경부터 진한 글자까지 쓰려면 같은 색의 밝기를 단계별로 만들어 두면 편해요. 추출기는 한 색을 50부터 900까지 명도 단계로 펼쳐 주니, 배경은 연한 단계를, 글자는 진한 단계를 골라 쓰세요.

글자가 잘 읽히는지 확인하기

배경색과 글자색의 대비가 낮으면 읽기 어려워요. 웹 접근성 기준(WCAG)에서는 일반 글자에 4.5 대 1 이상의 대비를 권장해요. 추출기의 글자 대비 확인으로 조합을 점검하세요. 색을 구별하기 어려운 사람들을 위한 색각 이상 시뮬레이션도 있어서, 색만으로 정보를 구분하고 있지 않은지 볼 수 있어요.

코드로 가져가기

완성한 팔레트는 CSS 변수나 Tailwind 설정, 디자인 토큰 형태로 복사하거나 PNG 이미지로 저장할 수 있어요. 코드로 가져간 색은 한곳에서 관리해야 나중에 바꾸기 쉬워요.