내 제품 사진으로 브랜드 색상 팔레트 만들기
제품과 패키지 사진에서 실제 색을 뽑고, 각 색에 역할을 주고, 광고, 캡션, 엔드 카드에 쓰기 전에 모든 텍스트 조합을 WCAG 명암비로 확인하세요.
작은 브랜드 대부분은 로고 파일은 있어도 색상 목록은 없어요. 색은 제품 자체에 있어요. 병, 라벨, 상자, 원단이죠. 광고, 썸네일, 캡션 스타일을 만들 때가 되면 누군가 사진에서 헥스 코드를 눈대중으로 보고 맞기를 바라요.
약 10분이면 더 낫게 할 수 있어요. 실제 제품 사진에서 색을 뽑고, 각 색에 역할을 주고, 텍스트로 읽을 수 있는 조합을 확인하세요. 무료 색상 팔레트 추출기가 브라우저 안에서 추출과 확인을 해 주고, 아무것도 업로드되지 않아요.
무드 보드 대신 제품에서 시작하는 이유
사람들은 선반이나 손에서 본 모습으로 제품을 알아봐요. 제품 패키지와 색이 맞는 광고는 한눈에 같은 브랜드처럼 느껴지고, 색이 어긋나면 짝퉁처럼 느껴져요. 제품에서 뽑은 팔레트는 실제로 파는 것을 정직하게 보여 주는데, 무드 보드는 드물게 그래요.
서비스도 마찬가지예요. 물리적인 제품이 없다면, 가장 좋은 스크린샷, 매장 전면, 팀 사진처럼 사람들이 이미 당신과 연결 짓는 것을 쓰세요.
1단계: 사진을 고르고 자르기
깨끗한 사진 두세 장을 고르세요. 배경이 단순한 제품 사진, 라벨이 정면을 향한 패키지 사진, 그리고 마음에 드는 라이프스타일 사진 하나예요. 그다음 강하게 자르세요. 추출기는 넣은 모든 픽셀을 세기 때문에, 나무 테이블 위의 병을 넣으면 테이블이 브랜드 색 중 하나로 나와요. 제품과 라벨만 남기도록 자르면 팔레트가 곧 제품이 돼요.
가능하면 낮이나 밝은 조명에서 찍으세요. 따뜻한 조명 아래서는 흰 패키지가 크림색으로 보이고, 뽑는 모든 색에 그 색조가 묻어요.
2단계: 색 다섯에서 여덟 개 뽑기
각 사진을 추출기에 넣고, 깨끗한 제품 사진이면 5~6색, 복잡한 사진이면 8색을 요청하세요. 비슷한 픽셀끼리 묶고 각 묶음의 평균을 큰 순서대로, 이미지에서 차지하는 비율과 함께 나열해요. 시작점은 고정돼 있어서 같은 사진은 항상 같은 팔레트를 주고, 흰 병 위의 빨간 뚜껑처럼 작고 밝은 강조색은 평균에 묻히지 않고 자기 색 견본을 받아요.
모든 사진을 돌려서 반복해서 나오는 색을 찾으세요. 그게 브랜드예요. 한 사진에만 나오는 색은 대개 배경이나 빛이에요.
3단계: 모든 색에 역할 주기
팔레트는 각 색에 역할이 있을 때만 쓸모가 있어요. 대부분의 브랜드에는 네 가지가 필요해요:
- 배경: 레이아웃 대부분이 놓이는 색이에요. 보통 패키지의 기본색이나 밝은 뉴트럴이에요.
- 텍스트: 배경 위에서 읽기 좋은 어두운 색이에요. 거의 검정이면 충분해요. 명암비 검사를 통과한다면 진한 브랜드 색이 더 좋아요.
- 강조: 버튼, 가격 스티커, 또는 하이라이트한 단어 하나에 쓰는 강한 색이에요.
- 보조: 박스, 구분선, 부가 텍스트에 쓰는 뉴트럴 한두 개예요.
사진이 준 색을 전부 쓰려는 충동은 참으세요. 역할이 분명한 이름 있는 색 다섯 개면 광고 백 개를 일관되게 유지해요. 열두 개면 그렇지 못해요.
4단계: 어디에든 쓰기 전에 명암비 확인하기
큰 모니터에서 멋져 보이는 색 조합이 햇빛 아래 휴대폰에서는 읽기 어려울 수 있고, 저시력 사람들에게는 훨씬 더 어려워요. W3C의 웹 콘텐츠 접근성 지침(WCAG)은 이를 위한 숫자를 주는데, 바로 명암비예요. 1:1(같은 색 두 개)에서 21:1(흰 바탕의 검정)까지예요. 기준은 다음과 같아요:
| 일반 텍스트 | 큰 텍스트 | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
WCAG 정의에 따르면 큰 텍스트는 최소 18포인트, 또는 굵은 14포인트예요. 그리고 이 숫자들은 엄격한 기준이에요. W3C의 1.4.3 지침은 계산된 비율을 반올림하면 안 된다고 해요. 그러니 4.499:1은 4.5:1을 충족하지 못해요.
WCAG는 웹 콘텐츠를 위해 만들어졌고 광고를 위한 것이 아니지만, 그 논리는 화면 위 모든 텍스트에 적용돼요. 영상에 입힌 자막이나 엔드 카드의 문구도 포함이에요.
작업 예시
패키지에 네이비 #1a3c6e, 크림 #fdf6e3, 오렌지 #e07a2e가 있다고 해 볼게요.
공식은 (L1 + 0.05) / (L2 + 0.05)예요. 여기서 L1은 더 밝은 색의 상대 휘도이고 L2는 더 어두운 색의 상대 휘도예요. 상대 휘도는 검정이 0, 흰색이 1이에요. 네이비는 약 0.046, 크림은 약 0.923, 오렌지는 약 0.300이 나와요.
- 크림 위의 네이비 텍스트: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, 반올림한 수치로는 약 10.1, 정확히는 10.16:1이에요. 어떤 크기에서도 AAA를 통과해요. 이게 주 조합이에요.
- 크림 위의 오렌지 텍스트: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, 약 2.78:1이에요. 큰 텍스트에서도 실패해요. 크림 위에서 글자를 싣는 용도로는 오렌지를 쓰면 안 돼요.
- 오렌지 위의 검정 텍스트: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, 반올림한 수치로는 7.0이지만 정확히는 6.99:1이에요. 모든 텍스트에서 AA를 통과하지만 AAA에는 살짝 못 미쳐요. 버튼 라벨로는 괜찮아요.
- 네이비 위의 크림 텍스트: 첫 번째와 같은 조합이라 같은 10.16:1이에요. 색 쌍을 뒤집어도 비율은 바뀌지 않아요.
그래서 역할은 거의 저절로 정해져요. 배경은 크림, 텍스트는 네이비, 오렌지는 강조 모양으로 쓰고 그 위에 검정 글자를 올려요(오렌지 위의 네이비는 3.65:1이라 큰 텍스트에서만 AA예요). 추출기는 이 전체 격자를 한 번에 보여 줘요. 모든 색을 서로 대비하고, 흰색과 검정도 포함해서, 각 칸을 AAA, AA, AA 큰 텍스트, 실패로 표시해요.
5단계: 한 번만 기록하기
팔레트를 CSS 사용자 지정 속성이나 JSON으로 내보내고 로고 파일 옆에 두세요. 역할을 정한 뒤에는 변수 이름을 역할별로 바꾸세요. --brand-bg, --brand-text, --brand-accent가 한 달 뒤의 --color-3보다 훨씬 읽기 쉬워요. 각 변수 아래에 어떤 조합이 통과했는지 한 줄씩 적어 두면, 아무도 검사를 다시 할 필요가 없어요.
그다음 이미 가지고 있는 공식 자료와 숫자를 비교하세요. 사진은 카메라가 본 색을 주는데, 그건 인쇄된 패키지에 가깝지만 잉크 사양과 똑같지는 않아요. 인쇄업체나 디자이너가 정확한 값을 가지고 있다면, 그 값이 우선이에요.
광고와 게시물에서 팔레트 쓰기
- 캡션과 자막: 배경색 상자 위의 텍스트 색, 또는 그 반대예요. 먼저 조합을 확인하세요.
- 엔드 카드: 배경색에 로고와 한 줄의 텍스트 색을 넣어요. 강조색은 짧은 행동 유도 문구 뒤의 버튼 모양을 채울 수 있어요.
- 썸네일과 커버: 강조색 하나, 크고 읽기 쉬운 단어 하나, 그리고 넓은 배경이에요.
- 패키지의 QR 코드: 브랜드 색이 패키지보다 확실히 어두우면 쓸 수 있어요. 우리 QR 코드 생성기는 명암비가 낮으면 경고해요.
Hermoso가 맞는 곳
Hermoso는 AI 마케팅 에이전트예요. 내 시장에서 이미 잘 먹히는 광고를 조사하고, 브랜드에 맞는 이미지 및 영상 광고를 만들고, 내 소셜 계정에 게시물을 올리고 예약하고, 내 광고 계정에서 유료 캠페인을 운영해요. 웹사이트로 브랜드를 추가하면 제품, 로고, 팔레트를 익혀요. 캡션과 엔드 카드는 요청하지 않으면 꺼져 있고, 요청하면 텍스트, 상자, 엔드 카드 색을 헥스 코드로 설정할 수 있어서, 여기서 확인한 조합이 그대로 나가요. 웹 앱에서 쓰거나, MCP 서버를 통해 Claude, ChatGPT, Cursor 안에서 쓸 수 있어요.
자주 묻는 질문
제품 색의 헥스 코드는 어떻게 찾나요?
제품이나 패키지만 나오도록 깨끗한 사진을 자르고 색상 팔레트 추출기에 넣으세요. 주요 색을 HEX, RGB, HSL로 보여 줘요. 사진 두세 장을 돌려서 반복되는 색을 남기세요.
텍스트에 필요한 명암비는 얼마인가요?
WCAG 2.2에서 AA 등급은 일반 텍스트에 4.5:1, 큰 텍스트에 3:1이 필요해요. AAA는 7:1과 4.5:1이에요. 큰 텍스트는 최소 18포인트, 또는 굵은 14포인트예요.
4.49:1이면 AA에 충분한가요?
아니요. W3C는 기준과 비교할 때 비율을 반올림하면 안 된다고 해요. 그러니 4.499:1은 4.5:1을 충족하지 못해요.
브랜드 팔레트에는 색이 몇 개 있어야 하나요?
각 색에 역할을 줄 만큼이면 충분해요. 보통 배경, 텍스트 색, 강조색 하나, 그리고 뉴트럴 한두 개예요. 역할이 분명한 이름 있는 색 다섯 개가 긴 목록보다 광고를 더 일관되게 유지해 줘요.
사진에서 뽑은 색은 정확한가요?
아니요. 카메라가 그 빛 아래 기록한 색이라 제품과는 가깝지만, 인쇄나 잉크 사양과 같지는 않아요. 공식 값이 있다면 그것을 쓰세요.