Color 1 on Color 2
대비 샘플 텍스트
Text #CFAE97onBG #16150F
AAA8.84:1일반 텍스트 AAA 기준을 충족합니다.
팔레트 정보
Caramel Oak Table
추천 분야와 이유
- 스페셜티 커피 원두 패키지 — 로스팅 원두, 싱글오리진 커피, 드립백 커피 패키지에 적합합니다. 브라운과 블랙 계열은 원두의 깊은 향, 다크 초콜릿 노트, 고소한 풍미를 직관적으로 전달합니다. 베이지 톤은 친환경 종이 패키지, 크래프트 라벨, 프리미엄 카페 브랜딩과 잘 어울려 온라인 스마트스토어와 오프라인 편집숍 진열 모두에서 고급스러운 인상을 줍니다.
- 남성 가죽 지갑 — 천연 소가죽 지갑, 카드지갑, 반지갑 디자인에 잘 맞습니다. 딥 브라운과 카멜 베이지는 가죽의 결, 에이징, 클래식 무드를 강조하고 블랙 톤은 세련된 남성 패션 액세서리 이미지를 강화합니다. 선물용 지갑, 비즈니스 지갑, 프리미엄 잡화 키워드와 연결하기 좋아 상세페이지와 오프라인 쇼룸에서 신뢰감 있는 상품 이미지를 만들 수 있습니다.
- 우드 다이닝 체어 — 원목 식탁 의자, 카페 체어, 라탄 체어 같은 가구 제품에 추천합니다. 따뜻한 브라운과 베이지는 월넛, 오크, 애쉬 우드 소재의 자연스러운 무늬를 돋보이게 하고 딥 올리브 블랙은 공간에 안정적인 포인트를 줍니다. 홈카페 인테리어, 내추럴 인테리어, 빈티지 가구 키워드와 잘 맞아 온라인 가구몰과 오프라인 쇼룸 모두에서 구매 욕구를 높입니다.
- 핸드메이드 세라믹 머그컵 — 수공예 머그컵, 도자기 컵, 카페 굿즈 제작에 적합합니다. 베이지와 코코아 브라운은 흙, 유약, 세라믹 질감을 자연스럽게 보여주며 따뜻한 음료와 잘 연결됩니다. 딥 톤은 감성 카페 굿즈, 홈카페 머그, 도자기 선물세트의 차분한 분위기를 강화합니다. 과한 장식 없이도 고급스럽고 오래 사용할 수 있는 생활 소품 이미지를 줄 수 있습니다.
- 프리미엄 향초 패키지 — 우디 향초, 머스크 캔들, 앰버 캔들 패키지에 잘 어울립니다. 짙은 브라운과 올리브 블랙은 샌달우드, 시더우드, 패출리 같은 우디 향의 깊이를 시각적으로 표현하고 베이지 톤은 따뜻한 실내 분위기와 안정감을 더합니다. 니치 향초, 홈 프래그런스, 인테리어 캔들 키워드와 연결해 선물용 제품, 호텔 어메니티, 편집숍 상품에 활용하기 좋습니다.
비추천 분야와 이유
- 어린이 장난감 패키지 — 유아 장난감, 키즈 블록, 캐릭터 완구 패키지에는 적합도가 낮습니다. 이 색상 조합은 밝은 원색, 파스텔 컬러, 귀여운 캐릭터 디자인보다 성숙하고 묵직한 인상을 주기 때문입니다. 어린이 제품은 안전함, 재미, 창의성, 밝은 에너지 전달이 중요한데 딥 브라운과 블랙 톤은 시각적으로 무겁게 느껴져 키즈 완구 진열대에서 주목도가 떨어질 수 있습니다.
- 스포츠 에너지 음료 캔 — 운동 전 에너지 드링크, 탄산 스포츠 음료, 고카페인 음료 캔 디자인에는 추천하기 어렵습니다. 이 조합은 빠른 속도감, 청량감, 폭발적인 에너지보다 따뜻하고 차분한 이미지를 줍니다. 스포츠 음료 패키지는 네온 컬러, 블루, 레드, 실버 같은 강한 대비가 구매 전환에 유리한 경우가 많아 브라운 중심 색상은 활동성, 퍼포먼스, 쿨링 이미지를 약하게 만들 수 있습니다.
- 수영복 상세페이지 — 비치웨어, 래시가드, 여성 수영복 상세페이지 메인 컬러로는 적합하지 않습니다. 여름 패션 상품은 바다, 햇빛, 청량감, 경쾌한 휴양지 이미지를 전달해야 하는데 브라운과 올리브 블랙 중심의 톤은 계절감이 가을·겨울 쪽으로 기울어 보입니다. 수영복 쇼핑몰에서는 터키블루, 코랄, 화이트, 선명한 옐로우 계열이 상품 착용감과 리조트 무드를 더 잘 살릴 수 있습니다.
- 초등학생 학습 앱 UI — 초등 학습 앱, 어린이 영어 앱, 키즈 코딩 앱의 기본 UI 컬러로는 비추천합니다. 학습 앱은 사용자의 집중도와 흥미를 동시에 끌어야 하며, 특히 어린이 대상 서비스는 밝은 색상과 명확한 버튼 대비가 중요합니다. 이 조합은 안정감은 있지만 화면 전체에 적용하면 무겁고 성인용 교육 플랫폼처럼 보일 수 있어, 게임형 학습 UX와 리워드 중심 인터페이스에는 생동감이 부족합니다.
- 저가형 뷰티 마스크팩 패키지 — 1일 1팩 마스크팩, 저가형 스킨케어 패키지에는 주의가 필요합니다. 뷰티 마스크팩은 수분감, 피부 광채, 산뜻함, 즉각적인 케어 이미지를 강조하는 경우가 많은데 이 색상 조합은 촉촉함보다 건조한 흙, 나무, 가죽 질감을 떠올리게 합니다. 특히 히알루론산, 진정 케어, 쿨링 마스크팩 키워드와는 시각적 연결성이 약해 제품 효능 전달력이 낮아질 수 있습니다.
팔레트가 주는 느낌
- 짙은 올리브 블랙과 코코아 브라운, 베이지 톤이 함께 구성되어 차분하고 묵직한 분위기를 형성합니다. 밝고 경쾌한 인상보다는 원목 가구, 가죽 소품, 로스팅 커피, 빈티지 카페처럼 따뜻하고 깊이 있는 감성을 줍니다. 자연 소재, 수공예 질감, 프리미엄 라이프스타일과 잘 어울리며, 시각적으로 안정적이고 성숙한 브랜드 이미지를 만들기에 적합합니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#CFAE97와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #CFAE97onBG #785938
AA Large3.09:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #CFAE97onBG #664427
AA Large4.19:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #CFAE97onBG #9C7656
Fail1.98:1텍스트 대비 기준에 미달합니다.
Color 2
#16150F와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #16150FonBG #CFAE97
AAA8.84:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #16150FonBG #785938
Fail2.86:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #16150FonBG #664427
Fail2.11:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #16150FonBG #9C7656
AA Large4.48:1큰 텍스트 AA 기준만 충족합니다.
Color 3
#785938와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #785938onBG #CFAE97
AA Large3.09:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #785938onBG #16150F
Fail2.86:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #785938onBG #664427
Fail1.36:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #785938onBG #9C7656
Fail1.56:1텍스트 대비 기준에 미달합니다.
Color 4
#664427와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #664427onBG #CFAE97
AA Large4.19:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #664427onBG #16150F
Fail2.11:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #664427onBG #785938
Fail1.36:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #664427onBG #9C7656
Fail2.12:1텍스트 대비 기준에 미달합니다.
Color 5
#9C7656와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #9C7656onBG #CFAE97
Fail1.98:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #9C7656onBG #16150F
AA Large4.48:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #9C7656onBG #785938
Fail1.56:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #9C7656onBG #664427
Fail2.12:1텍스트 대비 기준에 미달합니다.
APCA 대비
인지 대비 기반 가독성 분석
APCA(Advanced Perceptual Contrast Algorithm)는 WCAG 2.0의 단순 대비율을 보완해 사람 눈이 느끼는 휘도, 밝은 배경·어두운 배경의 순응 상태, 텍스트 크기별 권장 용도를 함께 해석합니다.
핵심 계산 공식
어두운 글자 + 밝은 배경: Lc = ((Ybg^0.56 - Ytxt^0.57) × 1.14 - 0.027) × 100
밝은 글자 + 어두운 배경: Lc = ((Ybg^0.65 - Ytxt^0.62) × 1.14 + 0.027) × 100
Y 값은 RGB 채널에 2.4 TRC와 시각 가중치를 적용한 휘도이며, 저휘도 구간에는 soft clamp를 적용하고 ±0.1 미만의 낮은 대비는 0으로 클립합니다.
실무 적용 가이드
- |Lc| ≥ 90
- 매우 안정적인 본문/소형 텍스트에 적합합니다. 12px~14px 수준의 작은 텍스트, 얇은 글씨, 긴 본문처럼 오래 읽어야 하는 콘텐츠에 권장됩니다. 도움말, 약관, 설명문, 문서형 콘텐츠처럼 사용자가 정확히 읽어야 하는 텍스트라면 이 구간이 가장 안전합니다.
- |Lc| ≥ 75
- 일반 본문에 권장되는 안정적인 대비입니다. 16px 전후의 본문, 문단 텍스트, 주요 설명 텍스트에 적합합니다. 웹사이트 본문, 상품 설명, 서비스 소개문, 카드 설명문처럼 일반적인 콘텐츠 텍스트는 가능하면 이 기준 이상을 목표로 잡는 것이 좋습니다.
- |Lc| ≥ 60
- 짧은 UI 텍스트의 최소 권장 수준입니다. 버튼 라벨, 탭, 메뉴, 폼 라벨, 짧은 안내 문구처럼 빠르게 읽고 지나가는 텍스트에 사용할 수 있습니다. 다만 긴 본문 전체를 이 수준으로 구성하면 가독성이 부족할 수 있으므로, 본문에는 보수적으로 |Lc| 75 이상을 권장합니다.
- |Lc| ≥ 45
- 큰 글자, 굵은 글자, 아이콘에 제한적으로 사용할 수 있는 수준입니다. 24px 이상 굵은 제목, 36px 이상 일반 제목, 큰 버튼, 정보성 아이콘처럼 크기나 두께가 충분한 요소에 적합합니다. 작은 본문이나 중요한 안내 문구에는 부족할 수 있으므로 제한적으로 사용하는 것이 좋습니다.
- |Lc| ≥ 30
- 보조·비활성·플레이스홀더 수준입니다. placeholder, disabled text, 장식성 보조 텍스트처럼 중요도가 낮은 요소에만 사용하는 것이 좋습니다. 가격, 오류 메시지, 경고문, CTA 버튼처럼 사용자가 반드시 읽어야 하는 정보에는 권장하지 않습니다.
- |Lc| < 30
- 텍스트 용도로는 비추천합니다. 가독성이 낮기 때문에 본문, 버튼, 메뉴, 안내 문구에는 사용하지 않는 것이 좋습니다. 장식 배경, 구분선, 비핵심 그래픽처럼 읽을 필요가 없는 시각 요소에만 사용하는 것이 적절합니다.
Color 1
#CFAE97와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #CFAE97onBG #16150F
|Lc| 60+-61 LcWCAG 8.84:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #CFAE97onBG #785938
|Lc| 30+-41 LcWCAG 3.09:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #CFAE97onBG #664427
|Lc| 45+-48 LcWCAG 4.19:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #CFAE97onBG #9C7656
|Lc| < 30-28 LcWCAG 1.98:1
Color 2
#16150F와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #16150FonBG #CFAE97
|Lc| 60++63 LcWCAG 8.84:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #16150FonBG #785938
|Lc| < 30+21 LcWCAG 2.86:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #16150FonBG #664427
|Lc| < 30+13 LcWCAG 2.11:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #16150FonBG #9C7656
|Lc| 30++35 LcWCAG 4.48:1
Color 3
#785938와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #785938onBG #CFAE97
|Lc| 30++39 LcWCAG 3.09:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #785938onBG #16150F
|Lc| < 30-19 LcWCAG 2.86:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #785938onBG #664427
|Lc| < 30+0 LcWCAG 1.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #785938onBG #9C7656
|Lc| < 30+12 LcWCAG 1.56:1
Color 4
#664427와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #664427onBG #CFAE97
|Lc| 45++47 LcWCAG 4.19:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #664427onBG #16150F
|Lc| < 30-12 LcWCAG 2.11:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #664427onBG #785938
|Lc| < 30+0 LcWCAG 1.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #664427onBG #9C7656
|Lc| < 30+20 LcWCAG 2.12:1
Color 5
#9C7656와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9C7656onBG #CFAE97
|Lc| < 30+26 LcWCAG 1.98:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9C7656onBG #16150F
|Lc| 30+-33 LcWCAG 4.48:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9C7656onBG #785938
|Lc| < 30-13 LcWCAG 1.56:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9C7656onBG #664427
|Lc| < 30-20 LcWCAG 2.12:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.