Color 1 on Color 2
대비 샘플 텍스트
Text #5B7296onBG #AFB2C0
Fail2.32:1텍스트 대비 기준에 미달합니다.
팔레트 정보
Clouded Denim
추천 분야와 이유
- B2B SaaS 대시보드 UI — 블루 그레이 계열은 데이터 시각화, 업무 관리, 클라우드 서비스 화면에서 신뢰성과 안정성을 높이는 색상 전략으로 적합합니다. 낮은 채도는 장시간 사용에도 눈의 피로를 줄이고, 관리자 페이지, CRM, 프로젝트 관리 툴처럼 정보 구조가 중요한 B2B SaaS UI 디자인에서 전문적인 브랜드 이미지를 형성합니다.
- 남성용 방수 트렌치코트 — 차분한 블루와 그레이 톤은 남성 패션 상품 중 방수 트렌치코트에 잘 어울립니다. 도시적인 분위기, 출근룩, 미니멀 아우터 키워드와 연결되며, 검정이나 베이지보다 부드럽고 세련된 인상을 줍니다. 기능성 소재와 결합하면 실용성, 프리미엄 감성, 데일리 코디 활용도를 함께 강조할 수 있습니다.
- 온라인 회계 프로그램 랜딩페이지 — 회계, 세무, 정산 서비스는 정확성, 보안, 신뢰가 중요한 분야입니다. 이 색상 조합은 과도한 장식 없이 안정적인 금융 서비스 이미지를 만들며, 온라인 회계 프로그램 랜딩페이지에서 전환율을 높이는 시각적 기반이 됩니다. 특히 소상공인 회계, 자동 장부, 세금 신고 서비스와 같은 SEO 키워드와 잘 결합됩니다.
- 무선 키보드 패키지 디자인 — 무선 키보드 같은 데스크테크 제품은 깔끔함, 생산성, 사무용 기기 이미지를 필요로 합니다. 부드러운 회청색 계열은 전자제품 패키지 디자인에서 차분한 기술감과 프리미엄 오피스 무드를 전달합니다. 게이밍 감성보다 업무용, 재택근무, 미니멀 데스크 셋업을 강조하는 제품 브랜딩에 효과적입니다.
- 프리미엄 치과 예약 앱 — 치과 예약 앱은 청결함, 의료 신뢰도, 편안한 사용자 경험이 중요합니다. 이 색상 조합은 병원 앱 UI에서 차갑지만 지나치게 딱딱하지 않은 이미지를 만들며, 진료 예약, 비대면 상담, 치아 관리 서비스에 적합합니다. 화이트 배경과 함께 사용하면 전문적인 의료 플랫폼 디자인과 모바일 헬스케어 브랜딩에 잘 맞습니다.
비추천 분야와 이유
- 아동용 생일파티 초대장 — 아동용 생일파티 초대장은 밝은 에너지, 즐거움, 즉각적인 시선을 끄는 색감이 중요합니다. 이 색상 조합은 차분하고 절제된 분위기가 강해 키즈 파티, 풍선 장식, 캐릭터 초대장 디자인과 맞지 않을 수 있습니다. 생동감 있는 옐로, 핑크, 민트 계열보다 축제감과 귀여운 이미지를 전달하기 어렵습니다.
- 매운 라면 신제품 패키지 — 매운 라면 패키지는 식욕 자극, 강렬한 맛, 즉각적인 구매 욕구를 유도해야 합니다. 블루 그레이 중심의 색상은 차갑고 담백한 인상을 주기 때문에 매운맛, 불맛, 고추 향, 자극적인 식품 마케팅과 어울리지 않습니다. 레드, 오렌지, 블랙처럼 강한 대비를 만드는 색보다 맛의 강도를 표현하기 어렵습니다.
- 여름 워터파크 프로모션 배너 — 여름 워터파크 광고는 청량감, 역동성, 휴가 분위기, 가족 단위 방문 욕구를 빠르게 전달해야 합니다. 이 색상 조합은 흐리고 차분한 도시적 느낌이 강해 물놀이, 여름 이벤트, 야외 액티비티 배너에는 다소 무겁게 보일 수 있습니다. 선명한 아쿠아 블루, 라임, 썬 옐로 계열보다 클릭 유도력이 약할 수 있습니다.
- K-pop 콘서트 굿즈 포스터 — K-pop 콘서트 굿즈 포스터는 팬덤의 열기, 무대 조명, 강한 개성, 소장 욕구를 시각적으로 표현해야 합니다. 이 색상 조합은 정제된 오피스 무드가 강해 아이돌 굿즈, 콘서트 MD, 팬 이벤트 홍보물에는 에너지가 부족해 보일 수 있습니다. 네온 컬러, 고대비 그라데이션, 메탈릭 포인트가 더 적합합니다.
- 열대 과일 스무디 컵 디자인 — 열대 과일 스무디는 신선함, 달콤함, 과즙감, 건강한 활력을 강조해야 합니다. 블루 그레이와 흐린 퍼플 톤은 차갑고 건조한 인상을 줄 수 있어 망고, 파인애플, 패션프루트 같은 과일 음료 패키지와 조화가 약합니다. 소비자가 기대하는 상큼한 비주얼, 비타민 음료, 여름 카페 메뉴 이미지를 만들기 어렵습니다.
팔레트가 주는 느낌
- 차분한 블루 그레이와 흐린 라벤더 톤이 중심이 되어 안정감, 신뢰감, 절제된 세련미를 전달합니다. 선명한 대비보다 낮은 채도와 부드러운 명도 차이가 강조되어 차가운 금속, 비 오는 도시, 정돈된 사무 공간 같은 인상을 줍니다. 감정적으로는 침착하고 전문적이며, 과장되지 않은 고급스러움을 형성합니다. 따라서 신뢰 기반 서비스, 미니멀 디자인, 실용적 제품군에 적합합니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#5B7296와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #5B7296onBG #8D96AA
Fail1.65:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #5B7296onBG #9BACBC
Fail2.10:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #5B7296onBG #9CA4C4
Fail1.99:1텍스트 대비 기준에 미달합니다.
Color 2
#AFB2C0와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #AFB2C0onBG #5B7296
Fail2.32:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #AFB2C0onBG #8D96AA
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #AFB2C0onBG #9BACBC
Fail1.10:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #AFB2C0onBG #9CA4C4
Fail1.17:1텍스트 대비 기준에 미달합니다.
Color 3
#8D96AA와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #8D96AAonBG #5B7296
Fail1.65:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #8D96AAonBG #AFB2C0
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #8D96AAonBG #9BACBC
Fail1.27:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #8D96AAonBG #9CA4C4
Fail1.20:1텍스트 대비 기준에 미달합니다.
Color 4
#9BACBC와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #9BACBConBG #5B7296
Fail2.10:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #9BACBConBG #AFB2C0
Fail1.10:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #9BACBConBG #8D96AA
Fail1.27:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #9BACBConBG #9CA4C4
Fail1.06:1텍스트 대비 기준에 미달합니다.
Color 5
#9CA4C4와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #9CA4C4onBG #5B7296
Fail1.99:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #9CA4C4onBG #AFB2C0
Fail1.17:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #9CA4C4onBG #8D96AA
Fail1.20:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #9CA4C4onBG #9BACBC
Fail1.06: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
#5B7296와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5B7296onBG #AFB2C0
|Lc| 30++30 LcWCAG 2.32:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5B7296onBG #8D96AA
|Lc| < 30+16 LcWCAG 1.65:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5B7296onBG #9BACBC
|Lc| < 30+26 LcWCAG 2.10:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5B7296onBG #9CA4C4
|Lc| < 30+23 LcWCAG 1.99:1
Color 2
#AFB2C0와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #AFB2C0onBG #5B7296
|Lc| 30+-32 LcWCAG 2.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #AFB2C0onBG #8D96AA
|Lc| < 30-15 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #AFB2C0onBG #9BACBC
|Lc| < 30+0 LcWCAG 1.10:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #AFB2C0onBG #9CA4C4
|Lc| < 30+0 LcWCAG 1.17:1
Color 3
#8D96AA와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8D96AAonBG #5B7296
|Lc| < 30-17 LcWCAG 1.65:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8D96AAonBG #AFB2C0
|Lc| < 30+13 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8D96AAonBG #9BACBC
|Lc| < 30+8 LcWCAG 1.27:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8D96AAonBG #9CA4C4
|Lc| < 30+0 LcWCAG 1.20:1
Color 4
#9BACBC와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9BACBConBG #5B7296
|Lc| < 30-28 LcWCAG 2.10:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9BACBConBG #AFB2C0
|Lc| < 30+0 LcWCAG 1.10:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9BACBConBG #8D96AA
|Lc| < 30-10 LcWCAG 1.27:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9BACBConBG #9CA4C4
|Lc| < 30+0 LcWCAG 1.06:1
Color 5
#9CA4C4와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9CA4C4onBG #5B7296
|Lc| < 30-25 LcWCAG 1.99:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9CA4C4onBG #AFB2C0
|Lc| < 30+0 LcWCAG 1.17:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9CA4C4onBG #8D96AA
|Lc| < 30+0 LcWCAG 1.20:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9CA4C4onBG #9BACBC
|Lc| < 30+0 LcWCAG 1.06:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.