Color 1 on Color 2
대비 샘플 텍스트
Text #208248onBG #E0F3E2
AA Large4.16:1큰 텍스트 AA 기준만 충족합니다.
팔레트 정보
Leafy Mint
추천 분야와 이유
- 비건 수분 크림 패키지 — 세이지 그린과 민트 그린 조합은 비건 스킨케어, 수분 크림, 저자극 화장품 패키지에 적합합니다. 산뜻한 크림 톤은 피부 진정과 보습 이미지를 강화하고, 짙은 그린은 식물성 원료와 클린 뷰티 키워드를 안정적으로 전달합니다. 온라인 상세페이지와 오프라인 진열대 모두에서 자연주의 화장품의 신뢰감을 높여줍니다.
- 허브 티 파우치 패키지 — 유칼립투스와 세이지 계열의 색감은 허브 티, 디카페인 티, 릴랙스 티 상품에 잘 맞습니다. 부드러운 녹색은 편안한 수면 루틴, 카페인 프리, 자연 원료 같은 검색 키워드와 연결되며, 밝은 민트 톤은 신선한 향과 깔끔한 맛을 시각적으로 표현합니다. 선물용 티 패키지에도 고급스럽게 적용됩니다.
- 요가 매트 온라인 상세페이지 — 차분한 그린 팔레트는 요가 매트, 필라테스 매트, 홈트레이닝 용품 상세페이지에 적합합니다. 강한 운동감보다 호흡, 스트레칭, 명상, 바른 자세 같은 웰니스 키워드를 강조하기 좋습니다. 짙은 그린은 안정감을 주고, 밝은 민트는 깨끗한 홈짐 이미지를 만들어 구매 전환용 배너에도 자연스럽게 어울립니다.
- 식물 관리 앱 UI — 식물 물주기 앱, 반려식물 관리 앱, 플랜테리어 앱 UI에 잘 어울립니다. 어두운 그린은 식물 성장과 신뢰감을 주고, 연한 민트와 세이지 톤은 모바일 화면에서 편안한 가독성을 제공합니다. 식물 기록, 물주기 알림, 홈가드닝 팁 같은 기능을 친근하고 깨끗하게 보여주기 좋아 장기 사용감을 높입니다.
- 천연 비누 라벨 디자인 — 핸드메이드 천연 비누, 어성초 비누, 티트리 비누, 약산성 클렌징 바 라벨에 적합합니다. 크림 민트와 세이지 그린은 깨끗한 세정감, 순한 성분, 자연 유래 원료 이미지를 강조합니다. 오프라인 편집숍 진열에서는 과하지 않은 고급감을 주고, 온라인 썸네일에서는 친환경 생활용품 키워드를 직관적으로 전달합니다.
비추천 분야와 이유
- 고성능 게이밍 노트북 상세페이지 — 고성능 게이밍 노트북은 보통 속도, 파워, 그래픽 성능, RGB 조명, 하이엔드 스펙을 강조해야 합니다. 이 색감은 차분하고 자연스러운 웰니스 무드가 강해 게이밍 기어 특유의 강렬한 에너지와 공격적인 퍼포먼스 이미지를 약하게 만들 수 있습니다. 클릭률을 높이는 테크 배너에는 대비와 긴장감이 부족합니다.
- 매운 컵라면 패키지 — 매운 컵라면 패키지는 강한 식욕 자극, 불맛, 고추, 얼큰한 국물, 즉각적인 매운맛 키워드가 중요합니다. 민트와 세이지 계열은 신선하고 순한 인상을 주기 때문에 강렬한 매운맛을 기대하게 만들기 어렵습니다. 편의점 진열대에서는 빨강, 주황, 검정 계열 상품 사이에서 맛의 임팩트가 약하게 보일 수 있습니다.
- 럭셔리 향수 블랙 라벨 — 관능적인 럭셔리 향수 블랙 라벨은 깊은 블랙, 골드, 버건디, 앰버 계열로 농도감과 야간 무드를 강조하는 경우가 많습니다. 이 조합은 식물성, 깨끗함, 산뜻함이 먼저 느껴져 우디 오리엔탈 향수나 스모키 향수의 무게감을 표현하기에는 가볍게 보일 수 있습니다. 고가 향수의 드라마틱한 존재감이 줄어듭니다.
- 어린이 장난감 박스 패키지 — 어린이 장난감 박스는 즉각적인 즐거움, 창의 놀이, 캐릭터, 선명한 색 대비가 구매 결정에 큰 영향을 줍니다. 이 색감은 안정적이고 정돈된 자연주의 이미지가 강해 장난감 매대에서 활동성과 재미를 충분히 전달하기 어렵습니다. 키즈 완구 SEO에 중요한 생일선물, 역할놀이, 유아 장난감 키워드와 시각적 연결성이 낮습니다.
- 클럽 파티 포스터 — 클럽 파티 포스터는 야간 이벤트, DJ 공연, 댄스 파티, 네온 조명, 강한 비트감을 시각적으로 보여줘야 합니다. 부드러운 민트와 세이지 그린은 편안하고 자연적인 이미지를 만들어 에너지, 긴장감, 화려한 밤 분위기를 약화합니다. SNS 홍보 이미지에서 즉각적인 주목도를 만들기에는 채도와 대비가 부족합니다.
팔레트가 주는 느낌
- 짙은 포레스트 그린과 부드러운 민트, 세이지, 유칼립투스 계열이 함께 보여 깨끗한 식물성 이미지와 안정적인 웰니스 무드를 만듭니다. 밝은 크림 민트가 산뜻함을 주고, 중간 톤의 그린이 자연 소재, 린넨, 우드, 허브, 스킨케어 같은 키워드를 떠올리게 합니다. 전체적으로 자극적이기보다 조용하고 신뢰감 있으며, 친환경적이고 정돈된 라이프스타일 브랜드에 어울립니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#208248와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #208248onBG #50C98A
Fail2.31:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #208248onBG #8DC19E
Fail2.36:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #208248onBG #ADD4B7
Fail2.96:1텍스트 대비 기준에 미달합니다.
Color 2
#E0F3E2와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #E0F3E2onBG #208248
AA Large4.16:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #E0F3E2onBG #50C98A
Fail1.80:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #E0F3E2onBG #8DC19E
Fail1.76:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #E0F3E2onBG #ADD4B7
Fail1.40:1텍스트 대비 기준에 미달합니다.
Color 3
#50C98A와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #50C98AonBG #208248
Fail2.31:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #50C98AonBG #E0F3E2
Fail1.80:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #50C98AonBG #8DC19E
Fail1.02:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #50C98AonBG #ADD4B7
Fail1.28:1텍스트 대비 기준에 미달합니다.
Color 4
#8DC19E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #8DC19EonBG #208248
Fail2.36:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #8DC19EonBG #E0F3E2
Fail1.76:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #8DC19EonBG #50C98A
Fail1.02:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #8DC19EonBG #ADD4B7
Fail1.26:1텍스트 대비 기준에 미달합니다.
Color 5
#ADD4B7와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #ADD4B7onBG #208248
Fail2.96:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #ADD4B7onBG #E0F3E2
Fail1.40:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #ADD4B7onBG #50C98A
Fail1.28:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #ADD4B7onBG #8DC19E
Fail1.26: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
#208248와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #208248onBG #E0F3E2
|Lc| 60++63 LcWCAG 4.16:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #208248onBG #50C98A
|Lc| 30++31 LcWCAG 2.31:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #208248onBG #8DC19E
|Lc| 30++31 LcWCAG 2.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #208248onBG #ADD4B7
|Lc| 30++43 LcWCAG 2.96:1
Color 2
#E0F3E2와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E0F3E2onBG #208248
|Lc| 60+-67 LcWCAG 4.16:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E0F3E2onBG #50C98A
|Lc| 30+-34 LcWCAG 1.80:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E0F3E2onBG #8DC19E
|Lc| 30+-33 LcWCAG 1.76:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E0F3E2onBG #ADD4B7
|Lc| < 30-21 LcWCAG 1.40:1
Color 3
#50C98A와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #50C98AonBG #208248
|Lc| 30+-32 LcWCAG 2.31:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #50C98AonBG #E0F3E2
|Lc| 30++30 LcWCAG 1.80:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #50C98AonBG #8DC19E
|Lc| < 30+0 LcWCAG 1.02:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #50C98AonBG #ADD4B7
|Lc| < 30+10 LcWCAG 1.28:1
Color 4
#8DC19E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8DC19EonBG #208248
|Lc| 30+-33 LcWCAG 2.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8DC19EonBG #E0F3E2
|Lc| < 30+30 LcWCAG 1.76:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8DC19EonBG #50C98A
|Lc| < 30+0 LcWCAG 1.02:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8DC19EonBG #ADD4B7
|Lc| < 30+10 LcWCAG 1.26:1
Color 5
#ADD4B7와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #ADD4B7onBG #208248
|Lc| 45+-45 LcWCAG 2.96:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #ADD4B7onBG #E0F3E2
|Lc| < 30+18 LcWCAG 1.40:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #ADD4B7onBG #50C98A
|Lc| < 30-12 LcWCAG 1.28:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #ADD4B7onBG #8DC19E
|Lc| < 30-11 LcWCAG 1.26:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.