Color 1 on Color 2
대비 샘플 텍스트
Text #EFB795onBG #5D626B
AA Large3.47:1큰 텍스트 AA 기준만 충족합니다.
팔레트 정보
Vintage Hotel
추천 분야와 이유
- 프리미엄 원목 향초 패키지 — 살구 베이지와 우드 브라운은 천연 왁스, 시더우드, 샌달우드 향을 연상시켜 프리미엄 향초 패키지 디자인에 적합합니다. 짙은 네이비와 그레이를 라벨 컬러로 사용하면 고급 캔들 브랜드, 니치 향초, 홈 프래그런스 제품의 신뢰감과 선물용 이미지를 강화할 수 있습니다.
- 남성용 가죽 지갑 상세페이지 — 네이비, 브라운, 그레이 조합은 남성용 가죽 지갑의 클래식한 이미지를 안정적으로 전달합니다. 온라인 쇼핑몰 상세페이지에서 천연가죽 질감, 카드 수납, 비즈니스 선물 키워드와 함께 사용하면 실용성과 고급스러움을 동시에 강조할 수 있습니다.
- 부티크 호텔 객실 키카드 — 낮은 채도의 퍼플과 브라운은 부티크 호텔의 조용한 객실 분위기, 우드 인테리어, 고급 침구 이미지를 잘 보완합니다. 객실 키카드, 체크인 봉투, 웰컴 카드에 적용하면 차분한 호텔 브랜딩과 프리미엄 숙박 경험을 시각적으로 전달할 수 있습니다.
- 와인바 메뉴판 디자인 — 말린 과일을 떠올리게 하는 퍼플과 묵직한 브라운은 레드와인, 치즈 플래터, 저녁 데이트 분위기와 잘 맞습니다. 와인바 메뉴판, 예약 안내 카드, 테이블 텐트 디자인에 사용하면 어두운 조명 아래에서도 성숙하고 품격 있는 브랜드 이미지를 만들 수 있습니다.
- 고급 만년필 브랜드 박스 — 그레이와 네이비는 정제된 필기구 브랜드의 전문성과 신뢰감을 높이며, 살구 베이지는 제품 박스에 부드러운 대비를 더합니다. 만년필, 잉크 세트, 졸업 선물 패키지에 활용하면 클래식 문구류, 프리미엄 오피스 기프트, 서재용품 키워드와 잘 연결됩니다.
비추천 분야와 이유
- 어린이 젤리 과자 패키지 — 어린이 젤리 과자 패키지는 선명한 레드, 옐로, 그린처럼 즉각적인 식욕과 재미를 주는 고채도 컬러가 중요합니다. 이 색 조합은 차분하고 성숙한 인상이 강해 과일맛 젤리, 키즈 간식, 편의점 스낵 진열대에서 밝고 달콤한 제품 매력을 약하게 보일 수 있습니다.
- 피트니스 앱 운동 완료 화면 — 운동 완료 화면은 에너지, 성취감, 빠른 행동 유도를 위해 선명한 블루, 라임, 오렌지 같은 활력 있는 색이 효과적입니다. 이 팔레트는 안정적이지만 무게감이 있어 홈트레이닝 앱, 러닝 기록, 칼로리 소모 알림 화면에서 역동성과 즉각적인 동기 부여가 부족해 보일 수 있습니다.
- 여름 워터파크 포스터 — 워터파크 포스터는 시원한 터키 블루, 아쿠아, 화이트, 밝은 옐로 계열로 물놀이의 청량감과 속도감을 보여주는 것이 중요합니다. 이 색상 구성은 따뜻하고 묵직한 인상이 강해 여름 축제, 야외 수영장, 가족 물놀이 광고에서 시원한 계절감이 약하게 전달됩니다.
- K팝 아이돌 응원봉 패키지 — 아이돌 응원봉 패키지는 팬덤 컬러, 네온 효과, 반짝이는 실버 소재처럼 무대 조명에서 돋보이는 시각적 임팩트가 필요합니다. 이 조합은 클래식하고 절제된 느낌이 강해 콘서트 굿즈, 팬미팅 MD, 포토카드 패키지에서 젊고 화려한 팬덤 에너지를 충분히 살리기 어렵습니다.
- 신생아 목욕용품 패키지 — 신생아 목욕용품 패키지는 순한 성분, 저자극 테스트, 아기 피부 보습 이미지를 위해 화이트, 파스텔 블루, 연한 민트 계열이 더 적합합니다. 이 팔레트는 브라운과 네이비의 무게감이 있어 베이비 워시, 유아 샴푸, 신생아 선물세트에서 산뜻하고 깨끗한 인상이 덜해 보일 수 있습니다.
팔레트가 주는 느낌
- 옅은 살구 베이지, 차분한 그레이, 깊은 네이비, 말린 자두빛 퍼플, 우드 브라운이 함께 어우러져 따뜻하지만 가볍지 않은 분위기를 만듭니다. 밝은 색보다 낮은 채도의 색이 중심이어서 안정감, 신뢰감, 성숙한 인상을 줍니다. 과하게 화려하지 않아 프리미엄 패키지, 클래식 인테리어, 남성 패션, 고급 문구류처럼 오래 보아도 질리지 않는 디자인에 잘 어울립니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#EFB795와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #EFB795onBG #2A334E
AAA7.06:1일반 텍스트 AAA 기준을 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #EFB795onBG #5A3D55
AA5.32:1일반 텍스트 AA 기준을 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #EFB795onBG #74513C
AA Large3.98:1큰 텍스트 AA 기준만 충족합니다.
Color 2
#5D626B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #5D626BonBG #EFB795
AA Large3.47:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #5D626BonBG #2A334E
Fail2.04:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #5D626BonBG #5A3D55
Fail1.53:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #5D626BonBG #74513C
Fail1.15:1텍스트 대비 기준에 미달합니다.
Color 3
#2A334E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #2A334EonBG #EFB795
AAA7.06:1일반 텍스트 AAA 기준을 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #2A334EonBG #5D626B
Fail2.04:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #2A334EonBG #5A3D55
Fail1.33:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #2A334EonBG #74513C
Fail1.77:1텍스트 대비 기준에 미달합니다.
Color 4
#5A3D55와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #5A3D55onBG #EFB795
AA5.32:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #5A3D55onBG #5D626B
Fail1.53:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #5A3D55onBG #2A334E
Fail1.33:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #5A3D55onBG #74513C
Fail1.34:1텍스트 대비 기준에 미달합니다.
Color 5
#74513C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #74513ConBG #EFB795
AA Large3.98:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #74513ConBG #5D626B
Fail1.15:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #74513ConBG #2A334E
Fail1.77:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #74513ConBG #5A3D55
Fail1.34: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
#EFB795와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #EFB795onBG #5D626B
|Lc| 45+-48 LcWCAG 3.47:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #EFB795onBG #2A334E
|Lc| 60+-64 LcWCAG 7.06:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #EFB795onBG #5A3D55
|Lc| 45+-58 LcWCAG 5.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #EFB795onBG #74513C
|Lc| 45+-52 LcWCAG 3.98:1
Color 2
#5D626B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5D626BonBG #EFB795
|Lc| 45++46 LcWCAG 3.47:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5D626BonBG #2A334E
|Lc| < 30-15 LcWCAG 2.04:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5D626BonBG #5A3D55
|Lc| < 30-9 LcWCAG 1.53:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5D626BonBG #74513C
|Lc| < 30+0 LcWCAG 1.15:1
Color 3
#2A334E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #2A334EonBG #EFB795
|Lc| 60++64 LcWCAG 7.06:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #2A334EonBG #5D626B
|Lc| < 30+16 LcWCAG 2.04:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #2A334EonBG #5A3D55
|Lc| < 30+0 LcWCAG 1.33:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #2A334EonBG #74513C
|Lc| < 30+12 LcWCAG 1.77:1
Color 4
#5A3D55와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5A3D55onBG #EFB795
|Lc| 45++57 LcWCAG 5.32:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5A3D55onBG #5D626B
|Lc| < 30+9 LcWCAG 1.53:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5A3D55onBG #2A334E
|Lc| < 30+0 LcWCAG 1.33:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5A3D55onBG #74513C
|Lc| < 30+0 LcWCAG 1.34:1
Color 5
#74513C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #74513ConBG #EFB795
|Lc| 45++50 LcWCAG 3.98:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #74513ConBG #5D626B
|Lc| < 30+0 LcWCAG 1.15:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #74513ConBG #2A334E
|Lc| < 30-12 LcWCAG 1.77:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #74513ConBG #5A3D55
|Lc| < 30+0 LcWCAG 1.34:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.