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

Palette Detail

The Roaring Volcano

추천 분야와 이유

  • 스페셜티 원두 패키지 — 번트 오렌지와 브라운 레드는 로스팅 원두, 다크 초콜릿, 캐러멜 향미를 시각적으로 표현하기 좋습니다. 딥 블랙과 차콜 그레이는 프리미엄 커피 브랜드의 고급스러운 패키지 디자인을 강화하고, 버터 옐로는 산미나 향미 노트를 강조하는 포인트 컬러로 활용하기 좋습니다.
  • 위스키 바 메뉴판 — 어두운 블랙과 차콜 톤은 위스키 바, 칵테일 라운지, 재즈바 메뉴판에 필요한 야간 분위기와 고급스러운 무드를 안정적으로 만듭니다. 오렌지 브라운 계열은 오크통, 스모키 향, 앰버 컬러의 술을 떠올리게 하며, 옐로 포인트는 추천 메뉴와 시그니처 칵테일을 돋보이게 합니다.
  • 남성용 가죽 카드지갑 — 브라운 레드와 블랙 조합은 남성 카드지갑, 가죽 지갑, 미니멀 지갑 상세 페이지에서 견고하고 세련된 인상을 줍니다. 차콜 그레이는 금속 장식이나 스티치 디테일과 잘 어울리고, 따뜻한 옐로 포인트는 선물용 가죽 소품의 프리미엄 이미지를 높여 줍니다.
  • 매운 소스 유리병 라벨 — 번트 오렌지와 딥 브라운은 핫소스, 칠리 오일, 바비큐 소스의 매운맛과 훈연 향을 직접적으로 전달합니다. 블랙 배경은 편의점 소스 진열대나 온라인 식품몰 썸네일에서 강한 주목도를 만들고, 옐로 포인트는 불맛, 스파이시, 매운 소스 키워드를 선명하게 보여 줍니다.
  • 느와르 영화 포스터 — 딥 블랙과 차콜 그레이는 범죄 스릴러, 느와르 영화, 독립영화 포스터에 필요한 그림자와 긴장감을 잘 표현합니다. 오렌지와 옐로 톤은 가로등, 담배 연기, 밤거리 조명처럼 장면성을 만드는 데 효과적입니다. 강한 대비가 예고편 썸네일과 영화제 포스터에서 시선을 끕니다.

비추천 분야와 이유

  • 신생아 침구 세트 — 신생아 침구 세트는 부드러움, 청결함, 안정감을 주는 파스텔 컬러와 밝은 뉴트럴 톤이 중요합니다. 이 색 조합은 블랙과 진한 브라운의 비중이 높아 아기 이불, 유아 베개, 출산 선물 패키지에서 따뜻함보다 무거움과 강한 대비가 먼저 느껴질 수 있습니다.
  • 피부과 미백 시술 랜딩 페이지 — 피부과 미백 시술, 톤업 관리, 레이저 클리닉 랜딩 페이지는 깨끗함, 투명함, 밝은 피부 이미지를 강조해야 합니다. 이 팔레트는 어두운 차콜과 번트 오렌지가 강해 맑고 산뜻한 의료 뷰티 이미지를 만들기 어렵고, 피부 개선 전후 사진의 밝기와 신뢰감을 약하게 만들 수 있습니다.
  • 요가 명상 앱 온보딩 화면 — 요가 명상 앱은 호흡, 휴식, 수면, 마음 안정 같은 키워드와 연결되는 부드러운 색감이 효과적입니다. 이 조합은 대비가 강하고 야간 바 같은 밀도가 있어 명상 앱 온보딩 화면에서는 긴장을 낮추기보다 시각적 압박감을 줄 수 있습니다. 웰니스 UX에는 다소 무겁습니다.
  • 웨딩 드레스 쇼룸 브로슈어 — 웨딩 드레스 쇼룸 브로슈어는 순백, 섬세한 레이스, 로맨틱한 조명, 고급 예식 이미지를 보여 주는 밝은 색이 중요합니다. 이 팔레트는 블랙과 브라운 레드가 강해 드레스의 투명한 질감과 화사함을 살리기 어렵고, 웨딩 촬영 상담 자료에는 지나치게 어둡게 보일 수 있습니다.
  • 어린이 비타민 젤리 패키지 — 어린이 비타민 젤리 패키지는 과일맛, 건강 간식, 키즈 영양제 이미지를 위해 밝고 귀여운 컬러가 필요합니다. 이 색상은 스파이스나 다크 초콜릿처럼 성숙한 맛을 떠올리게 하므로 딸기맛, 오렌지맛, 멀티비타민 젤리의 친근하고 안전한 인상을 약하게 만들 수 있습니다.

팔레트가 주는 느낌

  • 번트 오렌지와 딥 블랙이 강한 대비를 만들고, 브라운 레드와 차콜 그레이가 묵직한 밀도를 더하는 팔레트입니다. 여기에 버터 옐로가 조명처럼 들어와 어두운 화면이나 패키지에 따뜻한 초점을 만듭니다. 전체적으로 야간 바, 로스터리 카페, 스파이스, 가죽, 불빛이 떠오르는 분위기입니다. 고급스럽지만 부드럽기보다는 선명하고 진한 인상이 강하며, 빈티지한 무게감과 도시적인 긴장감을 함께 전달합니다.

WCAG Contrast

팔레트 색상 간 대비

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

Color 1

#BD542E와 다른 색상의 대비

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

#BD542E

Color 1 on Color 2

대비 샘플 텍스트

Text #BD542EonBG #111217
AA Large
3.98:1큰 텍스트 AA 기준만 충족합니다.

Color 1 on Color 3

대비 샘플 텍스트

Text #BD542EonBG #663630
Fail
2.09:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 4

대비 샘플 텍스트

Text #BD542EonBG #353742
Fail
2.52:1텍스트 대비 기준에 미달합니다.

Color 1 on Color 5

대비 샘플 텍스트

Text #BD542EonBG #F7D683
AA Large
3.33:1큰 텍스트 AA 기준만 충족합니다.

Color 2

#111217와 다른 색상의 대비

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

#111217

Color 2 on Color 1

대비 샘플 텍스트

Text #111217onBG #BD542E
AA Large
3.98:1큰 텍스트 AA 기준만 충족합니다.

Color 2 on Color 3

대비 샘플 텍스트

Text #111217onBG #663630
Fail
1.90:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 4

대비 샘플 텍스트

Text #111217onBG #353742
Fail
1.58:1텍스트 대비 기준에 미달합니다.

Color 2 on Color 5

대비 샘플 텍스트

Text #111217onBG #F7D683
AAA
13.27:1일반 텍스트 AAA 기준을 충족합니다.

Color 3

#663630와 다른 색상의 대비

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

#663630

Color 3 on Color 1

대비 샘플 텍스트

Text #663630onBG #BD542E
Fail
2.09:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 2

대비 샘플 텍스트

Text #663630onBG #111217
Fail
1.90:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 4

대비 샘플 텍스트

Text #663630onBG #353742
Fail
1.20:1텍스트 대비 기준에 미달합니다.

Color 3 on Color 5

대비 샘플 텍스트

Text #663630onBG #F7D683
AA
6.98:1일반 텍스트 AA 기준을 충족합니다.

Color 4

#353742와 다른 색상의 대비

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

#353742

Color 4 on Color 1

대비 샘플 텍스트

Text #353742onBG #BD542E
Fail
2.52:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 2

대비 샘플 텍스트

Text #353742onBG #111217
Fail
1.58:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 3

대비 샘플 텍스트

Text #353742onBG #663630
Fail
1.20:1텍스트 대비 기준에 미달합니다.

Color 4 on Color 5

대비 샘플 텍스트

Text #353742onBG #F7D683
AAA
8.39:1일반 텍스트 AAA 기준을 충족합니다.

Color 5

#F7D683와 다른 색상의 대비

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

#F7D683

Color 5 on Color 1

대비 샘플 텍스트

Text #F7D683onBG #BD542E
AA Large
3.33:1큰 텍스트 AA 기준만 충족합니다.

Color 5 on Color 2

대비 샘플 텍스트

Text #F7D683onBG #111217
AAA
13.27:1일반 텍스트 AAA 기준을 충족합니다.

Color 5 on Color 3

대비 샘플 텍스트

Text #F7D683onBG #663630
AA
6.98:1일반 텍스트 AA 기준을 충족합니다.

Color 5 on Color 4

대비 샘플 텍스트

Text #F7D683onBG #353742
AAA
8.39:1일반 텍스트 AAA 기준을 충족합니다.

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

#BD542E와 다른 색상의 대비

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

#BD542E

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

인지 대비 샘플

Text #BD542EonBG #111217
Low Lc
-45 LcWCAG 3.98:1

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

인지 대비 샘플

Text #BD542EonBG #663630
Low Lc
-25 LcWCAG 2.09:1

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

인지 대비 샘플

Text #BD542EonBG #353742
Low Lc
-30 LcWCAG 2.52:1

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

인지 대비 샘플

Text #BD542EonBG #F7D683
Lc 60+
+72 LcWCAG 3.33:1

Color 2

#111217와 다른 색상의 대비

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

#111217

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

인지 대비 샘플

Text #111217onBG #BD542E
Lc 45+
+52 LcWCAG 3.98:1

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

인지 대비 샘플

Text #111217onBG #663630
Low Lc
+24 LcWCAG 1.90:1

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

인지 대비 샘플

Text #111217onBG #353742
Low Lc
+17 LcWCAG 1.58:1

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

인지 대비 샘플

Text #111217onBG #F7D683
Lc 90+
+123 LcWCAG 13.27:1

Color 3

#663630와 다른 색상의 대비

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

#663630

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

인지 대비 샘플

Text #663630onBG #BD542E
Low Lc
+29 LcWCAG 2.09:1

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

인지 대비 샘플

Text #663630onBG #111217
Low Lc
-18 LcWCAG 1.90:1

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

인지 대비 샘플

Text #663630onBG #353742
Low Lc
-3 LcWCAG 1.20:1

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

인지 대비 샘플

Text #663630onBG #F7D683
Lc 90+
+100 LcWCAG 6.98:1

Color 4

#353742와 다른 색상의 대비

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

#353742

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

인지 대비 샘플

Text #353742onBG #BD542E
Low Lc
+35 LcWCAG 2.52:1

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

인지 대비 샘플

Text #353742onBG #111217
Low Lc
-13 LcWCAG 1.58:1

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

인지 대비 샘플

Text #353742onBG #663630
Low Lc
+7 LcWCAG 1.20:1

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

인지 대비 샘플

Text #353742onBG #F7D683
Lc 90+
+107 LcWCAG 8.39:1

Color 5

#F7D683와 다른 색상의 대비

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

#F7D683

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

인지 대비 샘플

Text #F7D683onBG #BD542E
Lc 60+
-73 LcWCAG 3.33:1

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

인지 대비 샘플

Text #F7D683onBG #111217
Lc 90+
-121 LcWCAG 13.27:1

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

인지 대비 샘플

Text #F7D683onBG #663630
Lc 90+
-100 LcWCAG 6.98:1

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

인지 대비 샘플

Text #F7D683onBG #353742
Lc 90+
-106 LcWCAG 8.39:1

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

색상 코드 상세

css

tailwind

More Palettes

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

모든 팔레트 보기 →

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

Steel Window

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

Purple Line

5 colors
  • #BD6FE8
  • #040407
  • #5E199E
  • #2B0C59
  • #F2D7F8

Berry Chocolate Mousse

5 colors
  • #FA9B9B
  • #2E1414
  • #CA1418
  • #F6F6F5
  • #884C44

The Glow Forest

5 colors
  • #4AB7A5
  • #BBC2A0
  • #091817
  • #366C5C
  • #4376A2