사진 한 장으로 배색 팔레트 만들기
색 조합은 감각의 영역처럼 보이지만, 사실 가장 쉬운 지름길이 있습니다. 이미 조화로운 것에서 빌려오는 것입니다. 잘 찍힌 사진, 좋아하는 영화 포스터, 명화 한 점에는 검증된 배색이 통째로 들어 있습니다. 그 색을 코드로 뽑아 내 작업물에 옮기는 순서를 정리했습니다.
최종 업데이트: 2026년 7월
1. 왜 사진에서 빌려오면 실패가 적나
색상환에서 색을 하나씩 고르다 보면 채도와 밝기가 제각각인 색이 모여 촌스러워지기 쉽습니다. 반면 한 장의 사진 속 색들은 같은 빛 아래에서 함께 찍힌 색입니다. 노을 사진의 주황과 보라는 같은 저녁 빛을 받아서 톤이 이미 맞춰져 있고, 카페 인테리어 사진의 원목색과 초록은 실제로 어울리게 골라진 조합입니다. 여기서 색을 뽑으면 출발점부터 조화가 보장됩니다.
2. 1단계: 재료가 될 사진 고르기
아무 사진이나 되는 것은 아닙니다. 이런 사진이 좋은 재료입니다.
- 분위기가 목적과 맞는 사진: 차분한 발표 자료라면 새벽 바다나 안개 낀 숲, 발랄한 카드뉴스라면 과일이나 시장 풍경처럼, 사진의 분위기가 곧 결과물의 분위기가 됩니다.
- 색 수가 적당히 정리된 사진: 온갖 색이 뒤섞인 사진보다 큰 색 덩어리가 서너 개로 보이는 사진이 팔레트도 깔끔하게 나옵니다.
- 영화 스틸컷·명화·브랜드 화보: 전문가가 색을 설계한 이미지라 특히 실패가 없습니다. 참고용 배색 추출은 좋지만, 이미지 자체를 작업물에 쓰는 것은 저작권을 확인하세요.
팁: 사진의 일부만 마음에 든다면 이미지 자르기로 그 부분만 잘라낸 뒤 추출하세요. 배경의 잡색이 팔레트에 끼어드는 것을 막을 수 있습니다.
3. 2단계: 색 추출하고 다듬기
이미지 색상 추출 도구에 사진을 올리면 대표색이 비중 순으로 나옵니다. 여기서 그대로 쓰지 말고 한 번 다듬는 것이 요령입니다.
- 5~6색으로 추출합니다. 색이 너무 많으면 오히려 고르기 어렵습니다.
- 서로 비슷해 보이는 색이 있으면 하나만 남긴다고 생각하고 3~4색을 추립니다.
- 포인트로 쓰고 싶은 색이 팔레트에 안 잡혔다면(작은 꽃 한 송이의 색 같은 경우) 스포이드로 그 지점을 직접 클릭해 추가합니다.
- HEX 목록을 복사해 메모해 두거나, 팔레트 이미지로 저장해 무드보드에 붙입니다.
4. 3단계: 60-30-10으로 역할 나누기
좋은 색을 골라도 비율이 틀리면 어색해집니다. 인테리어와 그래픽 디자인에서 두루 쓰이는 60-30-10 법칙은 세 가지 역할에 색을 배정합니다.
- 바탕색 60%: 화면 대부분을 덮는 색. 추출한 색 중 가장 연하고 차분한 색을 고르거나, 그 색의 밝기를 올려 아주 옅게 만들어 씁니다.
- 보조색 30%: 제목 상자, 구분선, 도형처럼 구조를 만드는 색. 바탕과 같은 계열의 진한 색이 무난합니다.
- 강조색 10%: 버튼, 핵심 숫자, 밑줄처럼 시선이 꽂혀야 할 곳에만 아껴 씁니다. 팔레트에서 가장 튀는 색의 자리입니다.
비율은 정확히 재라는 뜻이 아니라 "강조색은 아주 조금만"이라는 감각의 문제입니다. 강조색이 30%를 넘는 순간 강조가 아니게 됩니다.
5. 4단계: PPT·카드뉴스에 적용
- 파워포인트: 도형이나 글자 색에서 "다른 채우기 색"을 열면 HEX 또는 RGB를 직접 입력할 수 있습니다. 슬라이드 마스터의 테마 색에 등록해 두면 문서 전체에 일관되게 적용됩니다.
- 카드뉴스·SNS 이미지: 배경은 바탕색, 제목 띠는 보조색, "지금 신청"같은 행동 유도 문구만 강조색으로. 한 장 안에서 색 역할을 바꾸지 않는 것이 통일감의 핵심입니다.
- 블로그·웹사이트: 추출 도구의 CSS 변수 복사를 쓰면
--color-1같은 변수 선언이 통째로 복사되어 스타일시트에 바로 붙일 수 있습니다.
글자색만은 팔레트보다 가독성이 우선입니다. 본문 글자는 배경과 명도 차이가 충분한 진한 무채색(거의 검정)을 쓰고, 팔레트 색은 제목과 장식에 쓰는 편이 안전합니다.
6. 흔한 실수 세 가지
- 추출된 색을 전부 쓰려는 것: 팔레트가 6색이어도 실제로 쓰는 것은 3~4색이면 충분합니다. 나머지는 후보일 뿐입니다.
- 선명한 색끼리만 조합: 강조색이 둘 이상이면 서로 싸웁니다. 튀는 색 하나, 받쳐 주는 색 둘의 구도를 지키세요.
- 어두운 배경에 어두운 글자: 사진에서 뽑은 색은 중간 밝기가 많아서 글자색으로 쓰면 잘 안 읽히는 경우가 흔합니다. 글자는 명도 대비부터 확인하세요.
마음에 드는 사진에서 배색 팔레트를 바로 뽑아 보세요. 색상 수 조절, 스포이드, HEX 목록·CSS 변수 복사까지. 사진은 서버로 올라가지 않습니다.
이미지 색상 추출 도구 써 보기7. 자주 묻는 질문
명화나 영화 장면에서 색을 뽑아 써도 되나요?
색 자체는 저작권 보호 대상이 아니어서 배색을 참고하는 것은 문제가 없습니다. 다만 이미지 원본을 작업물에 넣거나, 특정 브랜드의 상징색을 그 브랜드로 오인될 방식으로 쓰는 것은 별개의 문제이니 주의하세요.
발표 자료인데 회사 로고 색과 사진 팔레트가 안 어울려요
로고 색을 강조색 자리에 고정하고, 사진은 로고 색과 같은 계열이 포함된 것으로 다시 고르는 순서가 빠릅니다. 로고 색을 추출 도구의 스포이드로 찍어 HEX를 확인한 뒤, 그 색과 어울리는 사진을 찾아보세요.
다크 모드 화면에도 같은 팔레트를 써도 되나요?
바탕색과 글자색은 뒤집어야 하지만, 보조색·강조색은 밝기만 한 단계 올리면 대개 그대로 통합니다. 어두운 배경에서는 같은 색도 더 탁해 보이므로 HSL의 밝기(L)를 10% 정도 올려 보정하는 것이 요령입니다.