Color 1 on Color 2
대비 샘플 텍스트
Text #54365BonBG #D2A7D6
AA4.98:1일반 텍스트 AA 기준을 충족합니다.
팔레트 정보
Grape Wall
추천 분야와 이유
- 여성 니치 향수 패키지 — 딥 퍼플, 라벤더 핑크, 블랙 바이올렛 조합이 니치 향수의 관능적인 무드와 고급스러운 향 이미지를 효과적으로 전달합니다. 플로럴 머스크 향수, 오드퍼퓸 패키지, 퍼퓸 기프트 세트 키워드와 잘 맞으며, 온라인 향수 상세페이지에서 성숙하고 우아한 브랜드 인상을 강화합니다.
- 프리미엄 아이섀도우 팔레트 케이스 — 보라 계열의 농도 차이가 뚜렷해 아이섀도우 팔레트, 글리터 메이크업, 쿨톤 화장품 패키지에 적합합니다. 어두운 퍼플은 깊이감을 주고, 연한 라벤더 톤은 부드러운 포인트를 만들어 뷰티 브랜드의 고급 색조 화장품 이미지를 선명하게 보여줍니다.
- 타로 상담 예약 웹페이지 — 블랙 퍼플과 뮤트 라벤더 조합이 타로 상담, 사주 예약, 심리 상담 페이지에 필요한 조용하고 몰입감 있는 분위기를 만듭니다. 지나치게 밝지 않아 신뢰감을 유지하면서도 신비로운 이미지를 더해 온라인 예약 플랫폼의 체류 시간과 서비스 집중도를 높입니다.
- 벨벳 파우치 선물 포장 — 짙은 보라색과 회보라 톤이 벨벳 파우치, 주얼리 포장, 액세서리 선물 패키지에 고급스러운 촉감을 시각적으로 전달합니다. 반지, 목걸이, 팔찌 같은 소형 선물 제품과 잘 어울리며, 프리미엄 기프트 포장 키워드에서 세련된 이미지를 형성합니다.
- 야간 재즈바 이벤트 포스터 — 어두운 퍼플 배경과 부드러운 라벤더 포인트가 라이브 재즈 공연, 칵테일 바 이벤트, 야간 공연 포스터에 깊은 분위기를 제공합니다. 강한 네온보다 차분한 색감이어서 고급 라운지, 와인바, 소규모 공연 홍보물에 어울리는 성숙한 시각적 인상을 줍니다.
비추천 분야와 이유
- 어린이 치약 패키지 — 어린이 치약은 청결함, 과일향, 충치 예방 이미지를 밝고 친근하게 보여주는 색상이 중요합니다. 이 조합은 어둡고 성숙한 인상이 강해 키즈 치약, 딸기맛 치약, 어린이 구강케어 패키지에서 부모와 아이가 기대하는 산뜻하고 안전한 느낌을 전달하기 어렵습니다.
- 스포츠 에너지음료 캔 디자인 — 에너지음료 패키지는 강한 속도감, 운동 전 활력, 고카페인 음료 이미지를 전달해야 합니다. 이 색감은 차분하고 무게감이 있어 스포츠 드링크, 헬스 부스터, 운동 전 음료 키워드에 필요한 역동성, 청량감, 즉각적인 에너지 표현이 부족합니다.
- 친환경 주방세제 리필팩 — 친환경 주방세제는 레몬, 허브, 무향 세정력, 식기 안전성 같은 키워드를 밝고 깨끗하게 보여줘야 합니다. 어두운 퍼플 중심의 조합은 자연 유래 성분, 주방 위생, 산뜻한 세정 이미지를 약하게 만들며 생활용품 매대에서 직관성이 떨어질 수 있습니다.
- 신선 샐러드 도시락 라벨 — 샐러드 도시락 라벨은 신선한 채소, 저칼로리 식단, 다이어트 도시락 이미지를 초록색과 밝은 중간색으로 빠르게 전달하는 것이 중요합니다. 이 조합은 식재료의 생기와 건강한 이미지를 충분히 살리기 어려워 샐러드 정기배송 상품과 맞지 않습니다.
- 초등 수학 학습지 표지 — 초등 수학 학습지는 집중력과 흥미를 동시에 주는 밝은 블루, 옐로, 민트 계열이 효과적입니다. 이 색상은 성숙하고 무거운 분위기가 강해 초등 학습지, 수학 문제집, 어린이 온라인 학습 콘텐츠에서 친근함과 학습 동기 유발을 만들기 어렵습니다.
팔레트가 주는 느낌
- 딥 퍼플과 블랙 바이올렛이 중심을 잡고, 라벤더 핑크와 뮤트 퍼플이 부드러운 광택감을 더합니다. 전체적으로 어두운 조명 아래의 벨벳 소재, 향수 보틀, 고급 화장대가 떠오르는 색감입니다. 차분하지만 여성스럽고, 신비롭지만 과하게 튀지 않아 프리미엄 뷰티, 감성 패키지, 야간 분위기의 디지털 디자인에 잘 어울립니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#54365B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #54365BonBG #9D78BD
Fail2.85:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #54365BonBG #1C0A24
Fail1.84:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #54365BonBG #907E92
Fail2.72:1텍스트 대비 기준에 미달합니다.
Color 2
#D2A7D6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #D2A7D6onBG #54365B
AA4.98:1일반 텍스트 AA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #D2A7D6onBG #9D78BD
Fail1.75:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #D2A7D6onBG #1C0A24
AAA9.16:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #D2A7D6onBG #907E92
Fail1.83:1텍스트 대비 기준에 미달합니다.
Color 3
#9D78BD와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #9D78BDonBG #54365B
Fail2.85:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #9D78BDonBG #D2A7D6
Fail1.75:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #9D78BDonBG #1C0A24
AA5.24:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #9D78BDonBG #907E92
Fail1.05:1텍스트 대비 기준에 미달합니다.
Color 4
#1C0A24와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #1C0A24onBG #54365B
Fail1.84:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #1C0A24onBG #D2A7D6
AAA9.16:1일반 텍스트 AAA 기준을 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #1C0A24onBG #9D78BD
AA5.24:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #1C0A24onBG #907E92
AA4.99:1일반 텍스트 AA 기준을 충족합니다.
Color 5
#907E92와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #907E92onBG #54365B
Fail2.72:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #907E92onBG #D2A7D6
Fail1.83:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #907E92onBG #9D78BD
Fail1.05:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #907E92onBG #1C0A24
AA4.99:1일반 텍스트 AA 기준을 충족합니다.
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
#54365B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #54365BonBG #D2A7D6
|Lc| 45++52 LcWCAG 4.98:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #54365BonBG #9D78BD
|Lc| < 30+28 LcWCAG 2.85:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #54365BonBG #1C0A24
|Lc| < 30-8 LcWCAG 1.84:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #54365BonBG #907E92
|Lc| < 30+26 LcWCAG 2.72:1
Color 2
#D2A7D6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D2A7D6onBG #54365B
|Lc| 45+-52 LcWCAG 4.98:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D2A7D6onBG #9D78BD
|Lc| < 30-23 LcWCAG 1.75:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D2A7D6onBG #1C0A24
|Lc| 60+-62 LcWCAG 9.16:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D2A7D6onBG #907E92
|Lc| < 30-25 LcWCAG 1.83:1
Color 3
#9D78BD와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9D78BDonBG #54365B
|Lc| < 30-28 LcWCAG 2.85:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9D78BDonBG #D2A7D6
|Lc| < 30+21 LcWCAG 1.75:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9D78BDonBG #1C0A24
|Lc| 30+-38 LcWCAG 5.24:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9D78BDonBG #907E92
|Lc| < 30+0 LcWCAG 1.05:1
Color 4
#1C0A24와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #1C0A24onBG #54365B
|Lc| < 30+9 LcWCAG 1.84:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #1C0A24onBG #D2A7D6
|Lc| 60++63 LcWCAG 9.16:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #1C0A24onBG #9D78BD
|Lc| 30++40 LcWCAG 5.24:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #1C0A24onBG #907E92
|Lc| 30++38 LcWCAG 4.99:1
Color 5
#907E92와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #907E92onBG #54365B
|Lc| < 30-26 LcWCAG 2.72:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #907E92onBG #D2A7D6
|Lc| < 30+23 LcWCAG 1.83:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #907E92onBG #9D78BD
|Lc| < 30+0 LcWCAG 1.05:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #907E92onBG #1C0A24
|Lc| 30+-36 LcWCAG 4.99:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.