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

Palette Detail

Steel Window

추천 분야와 이유

  • B2B SaaS 보안 대시보드 — 짙은 그린 블랙과 회색 계열이 데이터 보호, 접근 제어, 모니터링 같은 기능을 안정적으로 보이게 합니다. 흐린 블루는 기술적인 이미지를 더하면서도 과한 미래감으로 흐르지 않습니다. 많은 정보를 보여 주는 화면에서도 색이 튀지 않아 전문성과 신뢰감을 유지하기 좋습니다.
  • 스마트 도어락 제품 상세 페이지 — 금속과 콘크리트를 연상시키는 회색 톤이 하드웨어의 견고함을 잘 전달합니다. 짙은 색은 보안 제품에 필요한 무게감을 주고, 블루 계열은 스마트 기능과 연결성을 자연스럽게 암시합니다. 집 안을 지키는 제품이라는 인상을 차분하고 설득력 있게 만들 수 있습니다.
  • 남성용 방수 트렌치코트 — 차분한 회색과 흐린 블루가 비 오는 날씨, 방수 소재, 도시적인 외출복 이미지를 잘 살립니다. 지나치게 화려하지 않아 출근복이나 세미 포멀 스타일과도 잘 맞습니다. 짙은 색이 실루엣을 단단하게 잡아 주어 기능성 의류이면서도 성숙한 인상을 줄 수 있습니다.
  • 오피스용 금속 펜 세트 — 회색과 짙은 그린 블랙이 금속 바디의 차가운 질감과 잘 어울립니다. 블루 톤은 단조로움을 줄이면서도 업무용 제품의 절제된 분위기를 해치지 않습니다. 선물용 문구로 사용할 때 과시적이기보다 실용적이고 정돈된 인상을 줄 수 있습니다.
  • 건축 포트폴리오 웹사이트 — 콘크리트, 유리, 철제 프레임을 떠올리게 하는 색 조합이라 건축물 사진과 도면을 차분하게 받쳐 줍니다. 밝은 회백색은 여백을 깔끔하게 만들고, 짙은 색은 텍스트와 메뉴를 선명하게 보여 줍니다. 작품보다 배경이 튀지 않아 구조와 공간감이 잘 드러납니다.

비추천 분야와 이유

  • 어린이 생일파티 초대장 앱 — 전체 색감이 차갑고 절제되어 있어 어린이 생일파티에 필요한 밝은 즐거움과 즉흥적인 기대감을 주기 어렵습니다. 회색과 짙은 색이 많아 축하 분위기보다 사무적이거나 조용한 인상을 남길 수 있습니다. 풍선, 케이크, 놀이 요소를 돋보이게 하기에는 생동감이 부족합니다.
  • 과일 주스 병 라벨 — 과일 주스는 신선함, 당도, 향긋함을 즉각적으로 보여 주어야 하지만 이 조합은 금속과 비 오는 도시의 인상이 강합니다. 흐린 블루와 회색은 과즙의 밝고 먹음직스러운 느낌을 약하게 만들 수 있습니다. 망고, 파인애플, 패션프루트 같은 원료와도 색감 연결이 어렵습니다.
  • 반려견 장난감 패키지 — 반려견 장난감은 움직임, 놀이, 친근함이 빨리 전달되어야 합니다. 이 색상들은 차분하고 성인 취향에 가까워 장난감의 즐거운 성격이 약해 보일 수 있습니다. 매장 진열대에서도 밝은 원색 제품들 사이에서 덜 눈에 띄며, 보호자에게 재미보다 기능 제품처럼 보일 가능성이 있습니다.
  • K-pop 팬덤 굿즈 랜딩 페이지 — 팬덤 굿즈는 강한 개성, 즉각적인 시선 집중, 감정적인 몰입이 중요합니다. 이 조합은 정돈되고 차가운 편이라 콘서트, 응원봉, 포토카드의 뜨거운 분위기를 충분히 전달하기 어렵습니다. 팬덤 특유의 설렘과 화제성을 만들기에는 색의 에너지가 낮게 느껴질 수 있습니다.
  • 디저트 카페 딸기 케이크 박스 — 딸기 케이크는 달콤함, 부드러움, 선물 같은 화사함이 중요하지만 이 색 조합은 차갑고 건조한 인상이 강합니다. 회색과 짙은 색이 크림, 과일, 베이커리의 먹음직스러운 느낌을 눌러 버릴 수 있습니다. 특히 봄 시즌 한정 상품처럼 밝은 감성을 강조하기에는 부적합합니다.

팔레트가 주는 느낌

  • 밝은 회백색, 짙은 그린 블랙, 중간 회색, 흐린 블루가 함께 있어 차갑고 정돈된 인상을 줍니다. 금속, 콘크리트, 흐린 유리, 비 오는 창가가 떠오르며 감정 표현은 절제되어 있습니다. 산뜻함보다는 신뢰감, 실용성, 조용한 전문성이 강하게 느껴지는 팔레트입니다.

WCAG Contrast

팔레트 색상 간 대비

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

Color 1

#D9D8D4와 다른 색상의 대비

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

#D9D8D4

Color 1 on Color 2

대비 샘플 텍스트

Text #D9D8D4onBG #313532
AAA
8.73:1일반 텍스트 AAA 기준을 충족합니다.

Color 1 on Color 3

대비 샘플 텍스트

Text #D9D8D4onBG #9FA09C
Fail
1.84:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 4

대비 샘플 텍스트

Text #D9D8D4onBG #80807C
Fail
2.78:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 5

대비 샘플 텍스트

Text #D9D8D4onBG #6A8F9F
Fail
2.44:1텍스트 대비 기준에 미달합니다.

Color 2

#313532와 다른 색상의 대비

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

#313532

Color 2 on Color 1

대비 샘플 텍스트

Text #313532onBG #D9D8D4
AAA
8.73:1일반 텍스트 AAA 기준을 충족합니다.

Color 2 on Color 3

대비 샘플 텍스트

Text #313532onBG #9FA09C
AA
4.73:1일반 텍스트 AA 기준을 충족합니다.

Color 2 on Color 4

대비 샘플 텍스트

Text #313532onBG #80807C
AA Large
3.14:1큰 텍스트 AA 기준만 충족합니다.

Color 2 on Color 5

대비 샘플 텍스트

Text #313532onBG #6A8F9F
AA Large
3.58:1큰 텍스트 AA 기준만 충족합니다.

Color 3

#9FA09C와 다른 색상의 대비

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

#9FA09C

Color 3 on Color 1

대비 샘플 텍스트

Text #9FA09ConBG #D9D8D4
Fail
1.84:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 2

대비 샘플 텍스트

Text #9FA09ConBG #313532
AA
4.73:1일반 텍스트 AA 기준을 충족합니다.

Color 3 on Color 4

대비 샘플 텍스트

Text #9FA09ConBG #80807C
Fail
1.51:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 5

대비 샘플 텍스트

Text #9FA09ConBG #6A8F9F
Fail
1.32:1텍스트 대비 기준에 미달합니다.

Color 4

#80807C와 다른 색상의 대비

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

#80807C

Color 4 on Color 1

대비 샘플 텍스트

Text #80807ConBG #D9D8D4
Fail
2.78:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 2

대비 샘플 텍스트

Text #80807ConBG #313532
AA Large
3.14:1큰 텍스트 AA 기준만 충족합니다.

Color 4 on Color 3

대비 샘플 텍스트

Text #80807ConBG #9FA09C
Fail
1.51:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 5

대비 샘플 텍스트

Text #80807ConBG #6A8F9F
Fail
1.14:1텍스트 대비 기준에 미달합니다.

Color 5

#6A8F9F와 다른 색상의 대비

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

#6A8F9F

Color 5 on Color 1

대비 샘플 텍스트

Text #6A8F9FonBG #D9D8D4
Fail
2.44:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 2

대비 샘플 텍스트

Text #6A8F9FonBG #313532
AA Large
3.58:1큰 텍스트 AA 기준만 충족합니다.

Color 5 on Color 3

대비 샘플 텍스트

Text #6A8F9FonBG #9FA09C
Fail
1.32:1텍스트 대비 기준에 미달합니다.

Color 5 on Color 4

대비 샘플 텍스트

Text #6A8F9FonBG #80807C
Fail
1.14: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

#D9D8D4와 다른 색상의 대비

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

#D9D8D4

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

인지 대비 샘플

Text #D9D8D4onBG #313532
Lc 90+
-107 LcWCAG 8.73:1

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

인지 대비 샘플

Text #D9D8D4onBG #9FA09C
Low Lc
-42 LcWCAG 1.84:1

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

인지 대비 샘플

Text #D9D8D4onBG #80807C
Lc 60+
-64 LcWCAG 2.78:1

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

인지 대비 샘플

Text #D9D8D4onBG #6A8F9F
Lc 45+
-58 LcWCAG 2.44:1

Color 2

#313532와 다른 색상의 대비

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

#313532

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

인지 대비 샘플

Text #313532onBG #D9D8D4
Lc 90+
+107 LcWCAG 8.73:1

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

인지 대비 샘플

Text #313532onBG #9FA09C
Lc 60+
+66 LcWCAG 4.73:1

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

인지 대비 샘플

Text #313532onBG #80807C
Low Lc
+45 LcWCAG 3.14:1

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

인지 대비 샘플

Text #313532onBG #6A8F9F
Lc 45+
+51 LcWCAG 3.58:1

Color 3

#9FA09C와 다른 색상의 대비

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

#9FA09C

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

인지 대비 샘플

Text #9FA09ConBG #D9D8D4
Low Lc
+42 LcWCAG 1.84:1

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

인지 대비 샘플

Text #9FA09ConBG #313532
Lc 60+
-62 LcWCAG 4.73:1

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

인지 대비 샘플

Text #9FA09ConBG #80807C
Low Lc
-19 LcWCAG 1.51:1

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

인지 대비 샘플

Text #9FA09ConBG #6A8F9F
Low Lc
-13 LcWCAG 1.32:1

Color 4

#80807C와 다른 색상의 대비

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

#80807C

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

인지 대비 샘플

Text #80807ConBG #D9D8D4
Lc 60+
+64 LcWCAG 2.78:1

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

인지 대비 샘플

Text #80807ConBG #313532
Low Lc
-40 LcWCAG 3.14:1

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

인지 대비 샘플

Text #80807ConBG #9FA09C
Low Lc
+22 LcWCAG 1.51:1

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

인지 대비 샘플

Text #80807ConBG #6A8F9F
Low Lc
+7 LcWCAG 1.14:1

Color 5

#6A8F9F와 다른 색상의 대비

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

#6A8F9F

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

인지 대비 샘플

Text #6A8F9FonBG #D9D8D4
Lc 45+
+57 LcWCAG 2.44:1

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

인지 대비 샘플

Text #6A8F9FonBG #313532
Lc 45+
-46 LcWCAG 3.58:1

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

인지 대비 샘플

Text #6A8F9FonBG #9FA09C
Low Lc
+16 LcWCAG 1.32:1

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

인지 대비 샘플

Text #6A8F9FonBG #80807C
Low Lc
-4 LcWCAG 1.14:1

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

More Palettes

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

모든 팔레트 보기 →

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

Steel Walnut

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

Dusty Rosewood

5 colors
  • #D99048
  • #352C2E
  • #8B6855
  • #947FB1
  • #A29D9B

Red Line

5 colors
  • #C71A2B
  • #630407
  • #0B0404
  • #F9A69D
  • #360404

Violet Black Gallery

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