컬러로그 로고 이미지
← 모든 컬러 팔레트 보기

Palette Detail

Blue Slate

추천 분야와 이유

  • B2B SaaS 대시보드 UI — 블루와 그레이 조합은 B2B SaaS, 업무 자동화, 데이터 분석 대시보드에서 신뢰감과 전문성을 전달하기 좋습니다. 차분한 배경색은 차트, KPI 카드, 리포트 화면의 가독성을 높이고, 기업용 소프트웨어 UX에서 중요한 안정적인 브랜드 이미지를 형성합니다.
  • 클라우드 스토리지 앱 아이콘 — 소프트 블루와 실버 그레이는 클라우드 스토리지, 파일 백업, 문서 동기화 서비스의 깨끗하고 안전한 이미지를 강화합니다. 과하게 튀지 않는 색감이 모바일 앱 아이콘에서도 신뢰를 주며, 보안, 저장 공간, 협업 툴 키워드와 자연스럽게 연결됩니다.
  • 프리미엄 노트북 파우치 — 쿨 그레이와 블루 톤은 노트북 파우치, 태블릿 슬리브, 오피스 액세서리 같은 디지털 기기 보호용품에 잘 어울립니다. 메탈 노트북과 조화롭고, 미니멀 디자인, 비즈니스 가방, 직장인 선물 키워드를 강조하기 좋습니다. 깔끔하고 실용적인 제품 인상을 줍니다.
  • 법률 사무소 명함 디자인 — 딥 블루는 법률 사무소, 세무 상담, 회계 컨설팅처럼 신뢰가 중요한 전문 서비스 명함에 적합합니다. 그레이 계열은 과장된 장식 없이 단정한 인상을 만들고, 변호사 명함, 전문직 브랜딩, 기업 컨설팅 디자인에서 필요한 권위와 차분함을 안정적으로 보여 줍니다.
  • 온라인 강의 플랫폼 관리자 화면 — 차분한 블루 그레이 톤은 온라인 강의 플랫폼의 관리자 화면, 학습 관리 시스템, 교육 콘텐츠 CMS에 적합합니다. 강사 관리, 수강생 데이터, 결제 현황처럼 정보량이 많은 화면에서도 피로감을 줄이고, 이러닝 솔루션과 교육 플랫폼의 신뢰도를 높여 줍니다.

비추천 분야와 이유

  • 키즈 장난감 패키지 — 키즈 장난감 패키지는 밝은 원색, 귀여운 캐릭터, 즉각적인 흥미 유도가 중요합니다. 이 색 조합은 차분하고 사무적인 인상이 강해 어린이 완구, 유아 선물, 창의력 장난감 키워드와 어울리는 활기와 재미가 부족해 보일 수 있습니다.
  • 수제 잼 라벨 디자인 — 수제 잼 라벨은 과일의 신선함, 달콤함, 홈메이드 감성을 보여 주는 따뜻한 색이 중요합니다. 블루와 그레이 중심의 색감은 딸기잼, 복숭아잼, 과일청 패키지에서 식욕을 직접 자극하기 어렵고, 차갑고 건조한 제품 인상을 줄 수 있습니다.
  • 비치웨어 쇼핑몰 메인 배너 — 비치웨어 쇼핑몰 배너는 햇빛, 휴양지, 여름 패션, 리조트룩의 생동감이 필요합니다. 이 팔레트는 흐린 하늘과 사무 공간을 떠올리게 해 수영복, 래시가드, 바캉스룩 프로모션의 밝고 에너지 있는 분위기를 충분히 만들기 어렵습니다.
  • 컵라면 패키지 — 컵라면 패키지는 강한 레드, 오렌지, 블랙처럼 뜨거운 맛과 자극적인 식욕을 전달하는 색이 효과적입니다. 블루 그레이 계열은 차가운 온도감을 주기 때문에 불맛 라면, 매운맛 컵라면, 편의점 신제품 진열에서 주목도가 낮아질 수 있습니다.
  • 플라워 클래스 인스타그램 광고 — 플라워 클래스 광고는 꽃의 생기, 계절감, 로맨틱한 컬러가 중요한 콘텐츠입니다. 이 조합은 세련되지만 꽃다발, 원데이 클래스, 웨딩 부케 홍보에 필요한 화사함과 향기로운 이미지를 약하게 만들 수 있습니다. 감성적인 SNS 광고에는 다소 차갑게 보입니다.

팔레트가 주는 느낌

  • 딥 블루와 쿨 그레이가 중심을 잡고, 흐린 실버와 소프트 블루가 차분한 균형을 더하는 팔레트입니다. 오피스 인테리어, 클라우드 서비스, 디지털 문서, 메탈 소재가 떠오르는 정돈된 분위기를 줍니다. 감성보다 신뢰감, 안정감, 전문성, 깔끔한 사용성을 강조하는 인상이 강합니다.

WCAG Contrast

팔레트 색상 간 대비

각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.

Color 1

#476698와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#476698

Color 1 on Color 2

대비 샘플 텍스트

Text #476698onBG #D0C8C3
AA Large
3.52:1큰 텍스트 AA 기준만 충족합니다.

Color 1 on Color 3

대비 샘플 텍스트

Text #476698onBG #9FA0AA
Fail
2.23:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 4

대비 샘플 텍스트

Text #476698onBG #B3BCC1
AA Large
3.00:1큰 텍스트 AA 기준만 충족합니다.

Color 1 on Color 5

대비 샘플 텍스트

Text #476698onBG #8499C4
Fail
2.03:1텍스트 대비 기준에 미달합니다.

Color 2

#D0C8C3와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#D0C8C3

Color 2 on Color 1

대비 샘플 텍스트

Text #D0C8C3onBG #476698
AA Large
3.52:1큰 텍스트 AA 기준만 충족합니다.

Color 2 on Color 3

대비 샘플 텍스트

Text #D0C8C3onBG #9FA0AA
Fail
1.58:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 4

대비 샘플 텍스트

Text #D0C8C3onBG #B3BCC1
Fail
1.17:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 5

대비 샘플 텍스트

Text #D0C8C3onBG #8499C4
Fail
1.74:1텍스트 대비 기준에 미달합니다.

Color 3

#9FA0AA와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#9FA0AA

Color 3 on Color 1

대비 샘플 텍스트

Text #9FA0AAonBG #476698
Fail
2.23:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 2

대비 샘플 텍스트

Text #9FA0AAonBG #D0C8C3
Fail
1.58:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 4

대비 샘플 텍스트

Text #9FA0AAonBG #B3BCC1
Fail
1.35:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 5

대비 샘플 텍스트

Text #9FA0AAonBG #8499C4
Fail
1.10:1텍스트 대비 기준에 미달합니다.

Color 4

#B3BCC1와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#B3BCC1

Color 4 on Color 1

대비 샘플 텍스트

Text #B3BCC1onBG #476698
AA Large
3.00:1큰 텍스트 AA 기준만 충족합니다.

Color 4 on Color 2

대비 샘플 텍스트

Text #B3BCC1onBG #D0C8C3
Fail
1.17:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 3

대비 샘플 텍스트

Text #B3BCC1onBG #9FA0AA
Fail
1.35:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 5

대비 샘플 텍스트

Text #B3BCC1onBG #8499C4
Fail
1.48:1텍스트 대비 기준에 미달합니다.

Color 5

#8499C4와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#8499C4

Color 5 on Color 1

대비 샘플 텍스트

Text #8499C4onBG #476698
Fail
2.03:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 2

대비 샘플 텍스트

Text #8499C4onBG #D0C8C3
Fail
1.74:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 3

대비 샘플 텍스트

Text #8499C4onBG #9FA0AA
Fail
1.10:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 4

대비 샘플 텍스트

Text #8499C4onBG #B3BCC1
Fail
1.48:1텍스트 대비 기준에 미달합니다.

APCA Contrast

인지 대비 기반 가독성 분석

APCA(Advanced Perceptual Contrast Algorithm)는 WCAG 2.0의 단순 대비율을 보완해 사람 눈이 느끼는 휘도, 밝은 배경·어두운 배경의 순응 상태, 텍스트 크기별 권장 용도를 함께 해석합니다.

핵심 계산 공식

어두운 글자 + 밝은 배경: Lc = (Ybg^0.56 - Ytxt^0.57) × 161.8

밝은 글자 + 어두운 배경: Lc = (Ybg^0.62 - Ytxt^0.65) × 161.8

Y 값은 RGB 채널을 시각 가중치로 변환한 휘도이며, 161.8은 결과를 약 -105~+105 범위의 사람이 읽기 쉬운 점수로 맞추는 스케일 상수입니다.

실무 적용 가이드

Lc 90 이상
12px 수준의 작은 본문도 안정적
Lc 75 이상
14px~16px 일반 본문 권장
Lc 60 이상
굵은 글씨·24px 이상 타이틀 권장
Lc 45 이상
큰 버튼·부가 정보에 제한 활용

Color 1

#476698와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#476698

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #476698onBG #D0C8C3
Lc 60+
+69 LcWCAG 3.52:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #476698onBG #9FA0AA
Low Lc
+40 LcWCAG 2.23:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #476698onBG #B3BCC1
Lc 45+
+58 LcWCAG 3.00:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #476698onBG #8499C4
Low Lc
+34 LcWCAG 2.03:1

Color 2

#D0C8C3와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#D0C8C3

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #D0C8C3onBG #476698
Lc 60+
-68 LcWCAG 3.52:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #D0C8C3onBG #9FA0AA
Low Lc
-29 LcWCAG 1.58:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #D0C8C3onBG #B3BCC1
Low Lc
-10 LcWCAG 1.17:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #D0C8C3onBG #8499C4
Low Lc
-35 LcWCAG 1.74:1

Color 3

#9FA0AA와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#9FA0AA

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #9FA0AAonBG #476698
Low Lc
-36 LcWCAG 2.23:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #9FA0AAonBG #D0C8C3
Low Lc
+30 LcWCAG 1.58:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #9FA0AAonBG #B3BCC1
Low Lc
+19 LcWCAG 1.35:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #9FA0AAonBG #8499C4
Low Lc
-3 LcWCAG 1.10:1

Color 4

#B3BCC1와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#B3BCC1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #B3BCC1onBG #476698
Lc 45+
-56 LcWCAG 3.00:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #B3BCC1onBG #D0C8C3
Low Lc
+12 LcWCAG 1.17:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #B3BCC1onBG #9FA0AA
Low Lc
-17 LcWCAG 1.35:1

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #B3BCC1onBG #8499C4
Low Lc
-23 LcWCAG 1.48:1

Color 5

#8499C4와 다른 색상의 대비

나머지 4개 배경색과 비교합니다.

#8499C4

APCA sample · 밝은 글자 + 어두운 배경

인지 대비 샘플

Text #8499C4onBG #476698
Low Lc
-31 LcWCAG 2.03:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #8499C4onBG #D0C8C3
Low Lc
+36 LcWCAG 1.74:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #8499C4onBG #9FA0AA
Low Lc
+6 LcWCAG 1.10:1

APCA sample · 어두운 글자 + 밝은 배경

인지 대비 샘플

Text #8499C4onBG #B3BCC1
Low Lc
+25 LcWCAG 1.48:1

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

More Palettes

다른 색상 팔레트도 둘러보기

모든 팔레트 보기 →

현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.

Violet Black Gallery

5 colors
  • #E8E7E6
  • #B805FA
  • #141014
  • #675E66
  • #7A5582

Steel Window

5 colors
  • #D9D8D4
  • #313532
  • #9FA09C
  • #80807C
  • #6A8F9F

Cherry Porcelain Box

5 colors
  • #DB1C16
  • #F9F0EE
  • #7A2327
  • #AA6D6D
  • #C48A8D

Steel Walnut

5 colors
  • #C5B4A7
  • #394A50
  • #927769
  • #20201C
  • #A0B1BA