Color 1 on Color 2
대비 샘플 텍스트
Text #0D447BonBG #040C1C
Fail1.98:1텍스트 대비 기준에 미달합니다.
팔레트 정보
Deep Sea
추천 분야와 이유
- 사이버 보안 SaaS 대시보드 — 보안 솔루션, 클라우드 보안, 데이터 보호, 위협 탐지 같은 SEO 키워드와 시각적 결이 잘 맞습니다. 짙은 블루 계열은 정보 보호와 신뢰성을 직관적으로 전달하고, 밝은 블루는 복잡한 관리자 화면의 가독성과 클릭 유도 버튼의 명확성을 높입니다. B2B SaaS 웹사이트, 보안 관제 대시보드, 로그인 화면에 적합합니다.
- 모바일 뱅킹 앱 UI — 핀테크 앱, 모바일 뱅킹, 자산 관리, 송금 서비스처럼 신뢰와 안정성이 핵심인 디지털 금융 서비스에 적합합니다. 네이비 톤은 금융 브랜드의 전문성을 강화하고, 코발트 블루는 현대적인 앱 디자인과 빠른 서비스 이미지를 만듭니다. 잔액 확인, 카드 관리, 투자 리포트 화면에서 안정적인 사용자 경험을 제공합니다.
- 스마트 도어락 패키지 — 스마트 도어락, 홈 보안, IoT 디바이스, 디지털 잠금장치 같은 검색 키워드와 높은 연관성을 가집니다. 깊은 블루는 안전한 주거 환경과 기술 신뢰도를 강조하고, 밝은 블루는 사용 편의성과 연결성을 보여줍니다. 오프라인 전자제품 매장 진열 박스, 설치 안내서, 제품 상세페이지에 모두 활용하기 좋습니다.
- 피부과 온라인 예약 플랫폼 — 피부과 예약, 의료 플랫폼, 비대면 상담, 병원 예약 시스템처럼 정확성과 청결한 이미지가 필요한 서비스에 적합합니다. 블루 계열은 차분하고 위생적인 인상을 주며, 진료 정보와 예약 단계의 신뢰도를 높입니다. 과하게 차갑지 않은 밝은 블루 포인트를 함께 쓰면 환자 친화적인 병원 웹사이트 디자인을 만들 수 있습니다.
- 프리미엄 하드 캐리어 — 프리미엄 캐리어, 비즈니스 여행 가방, 기내용 캐리어, 하드 캐리어 같은 상품 키워드에 잘 어울립니다. 어두운 네이비는 견고함과 고급스러움을 강조하고, 코발트 포인트는 공항과 도시 여행에 어울리는 세련된 이미지를 만듭니다. 오프라인 매장 POP, 온라인 상세페이지, 제품 보증 카드 디자인에 적합합니다.
비추천 분야와 이유
- 매운 컵라면 패키지 — 컵라면 패키지, 매운 라면, 즉석식품, 편의점 라면처럼 강한 식욕 자극과 열감이 필요한 상품에는 적합도가 낮습니다. 블루 계열은 청량하고 차분한 인상이 강해 매운맛, 뜨거움, 자극적인 풍미를 직관적으로 전달하기 어렵습니다. 레드, 오렌지, 옐로우 중심의 식품 패키지보다 구매 욕구가 약해 보일 수 있습니다.
- 어린이 젤리 구독 박스 — 어린이 간식, 젤리 구독, 키즈 스낵 박스, 달콤한 간식 같은 키워드에는 밝고 따뜻한 색감이 더 효과적입니다. 이 색 조합은 신뢰와 기술 이미지는 강하지만, 아이들이 기대하는 장난감 같은 재미, 달콤함, 즉각적인 즐거움을 표현하기에는 차분합니다. 키즈 패키지에서는 핑크, 옐로우, 라임 계열보다 주목도가 낮을 수 있습니다.
- 봄꽃 꽃다발 포장지 — 봄꽃다발, 플라워 부케, 생일 꽃다발, 로맨틱 선물 포장처럼 부드럽고 따뜻한 감성이 중요한 상품에는 어울림이 제한적입니다. 짙은 블루는 고급스럽지만 꽃의 생기, 향기, 계절감을 눌러 보이게 할 수 있습니다. 특히 파스텔 꽃, 웨딩 부케, 기념일 꽃 선물에는 크림, 핑크, 라벤더 계열이 더 자연스럽습니다.
- 유기농 이유식 파우치 — 유기농 이유식, 아기 간식, 베이비푸드, 영유아 식품 패키지에서는 안전함뿐 아니라 따뜻함, 신선함, 자연 원료 이미지가 중요합니다. 블루 계열은 위생적이고 신뢰감은 주지만, 채소, 곡물, 과일의 신선한 맛과 부모가 기대하는 부드러운 영양 이미지를 충분히 전달하기 어렵습니다. 그린, 베이지, 크림 톤이 더 적합합니다.
- 수제 크루아상 박스 — 수제 크루아상, 베이커리 박스, 버터 페이스트리, 디저트 포장 같은 상품에는 따뜻한 갈색, 크림, 골드 계열이 더 효과적입니다. 이 색 조합은 세련되고 신뢰감은 있지만 갓 구운 빵의 고소함, 바삭한 식감, 버터 풍미를 즉각적으로 떠올리게 하기는 어렵습니다. 베이커리 패키지에서는 차가운 인상이 구매 전환을 낮출 수 있습니다.
팔레트가 주는 느낌
- 짙은 네이비와 선명한 코발트, 밝은 스카이 블루가 단계적으로 이어져 신뢰감, 보안성, 전문성, 디지털 감도를 동시에 전달합니다. 전체 인상은 차분하지만 무겁게 가라앉지 않고, 기술 기반 서비스나 프리미엄 제품에 어울리는 정돈된 긴장감을 줍니다. 깊은 색은 안정적인 브랜드 아이덴티티를 만들고, 밝은 블루는 접근성과 사용성을 보완합니다. 금융, 보안, 데이터, 의료 예약, 스마트 디바이스처럼 정확성과 신뢰가 중요한 접점에서 설득력 있는 무드를 형성합니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#0D447B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #0D447BonBG #2169AF
Fail1.74:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #0D447BonBG #072D56
Fail1.40:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #0D447BonBG #5AA5DF
AA Large3.70:1큰 텍스트 AA 기준만 충족합니다.
Color 2
#040C1C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #040C1ConBG #0D447B
Fail1.98:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #040C1ConBG #2169AF
AA Large3.45:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #040C1ConBG #072D56
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #040C1ConBG #5AA5DF
AAA7.34:1일반 텍스트 AAA 기준을 충족합니다.
Color 3
#2169AF와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #2169AFonBG #0D447B
Fail1.74:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #2169AFonBG #040C1C
AA Large3.45:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #2169AFonBG #072D56
Fail2.44:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #2169AFonBG #5AA5DF
Fail2.13:1텍스트 대비 기준에 미달합니다.
Color 4
#072D56와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #072D56onBG #0D447B
Fail1.40:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #072D56onBG #040C1C
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #072D56onBG #2169AF
Fail2.44:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #072D56onBG #5AA5DF
AA5.19:1일반 텍스트 AA 기준을 충족합니다.
Color 5
#5AA5DF와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #5AA5DFonBG #0D447B
AA Large3.70:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #5AA5DFonBG #040C1C
AAA7.34:1일반 텍스트 AAA 기준을 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #5AA5DFonBG #2169AF
Fail2.13:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #5AA5DFonBG #072D56
AA5.19: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
#0D447B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #0D447BonBG #040C1C
|Lc| < 30-10 LcWCAG 1.98:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0D447BonBG #2169AF
|Lc| < 30+13 LcWCAG 1.74:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0D447BonBG #072D56
|Lc| < 30+0 LcWCAG 1.40:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0D447BonBG #5AA5DF
|Lc| 30++39 LcWCAG 3.70:1
Color 2
#040C1C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040C1ConBG #0D447B
|Lc| < 30+11 LcWCAG 1.98:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040C1ConBG #2169AF
|Lc| < 30+26 LcWCAG 3.45:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040C1ConBG #072D56
|Lc| < 30+0 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040C1ConBG #5AA5DF
|Lc| 45++52 LcWCAG 7.34:1
Color 3
#2169AF와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #2169AFonBG #0D447B
|Lc| < 30-13 LcWCAG 1.74:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #2169AFonBG #040C1C
|Lc| < 30-24 LcWCAG 3.45:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #2169AFonBG #072D56
|Lc| < 30-19 LcWCAG 2.44:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #2169AFonBG #5AA5DF
|Lc| < 30+24 LcWCAG 2.13:1
Color 4
#072D56와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #072D56onBG #0D447B
|Lc| < 30+0 LcWCAG 1.40:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #072D56onBG #040C1C
|Lc| < 30+0 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #072D56onBG #2169AF
|Lc| < 30+20 LcWCAG 2.44:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #072D56onBG #5AA5DF
|Lc| 45++46 LcWCAG 5.19:1
Color 5
#5AA5DF와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5AA5DFonBG #0D447B
|Lc| 30+-39 LcWCAG 3.70:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5AA5DFonBG #040C1C
|Lc| 45+-50 LcWCAG 7.34:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5AA5DFonBG #2169AF
|Lc| < 30-26 LcWCAG 2.13:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #5AA5DFonBG #072D56
|Lc| 45+-46 LcWCAG 5.19:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.