Color 1 on Color 2
대비 샘플 텍스트
Text #120A09onBG #D0A585
AAA8.76:1일반 텍스트 AAA 기준을 충족합니다.
팔레트 정보
Cedar Clay Kitchen
추천 분야와 이유
- 수제 도자기 머그컵 — 흙빛 베이지와 적갈색이 도자기의 손맛, 유약의 농담, 표면의 불규칙한 질감을 잘 살려 줍니다. 올리브 그린과 회보라는 제품을 단순한 생활용품보다 취향이 담긴 공예품처럼 보이게 합니다. 따뜻한 음료, 홈카페, 선물용 상세 페이지에 잘 어울립니다.
- 빈티지 원목 책상 — 짙은 브라운과 적갈색은 원목의 무게감과 사용감 있는 표면을 설득력 있게 보여 줍니다. 베이지는 제품의 부피감을 부드럽게 정리하고, 올리브 그린은 서재나 작업실 분위기를 자연스럽게 연결합니다. 오래 쓰는 가구라는 인상을 주기에 적합합니다.
- 가죽 노트 커버 — 깊은 갈색과 벽돌빛 색상이 가죽의 두께, 스크래치, 시간이 지나며 생기는 광택과 잘 맞습니다. 회보라와 올리브 그린은 문구 제품에 차분한 개성을 더해 줍니다. 기록, 독서, 업무용 액세서리처럼 집중과 보관의 이미지가 중요한 품목에 잘 어울립니다.
- 허브 블렌딩 티 패키지 — 올리브 그린은 허브 원료의 자연스러움을 직접적으로 전달하고, 베이지와 적갈색은 건조된 잎과 뿌리 재료의 따뜻한 느낌을 보완합니다. 전체적으로 자극적이지 않고 깊은 향을 기대하게 합니다. 루이보스, 시나몬, 세이지 계열의 차 포장에 적합합니다.
- 레스토랑 메뉴판 — 짙은 갈색과 테라코타 계열은 구운 채소, 와인 소스, 장작불 조리처럼 농도 있는 음식을 떠올리게 합니다. 베이지는 글자를 읽기 편하게 받쳐 주고, 회보라는 과하게 전통적으로 보이는 느낌을 줄여 줍니다. 작은 비스트로나 내추럴 와인 바에 잘 맞습니다.
비추천 분야와 이유
- 어린이용 숫자 학습 앱 — 차분하고 묵직한 인상이 강해 어린이가 즉각적으로 반응하기에는 밝기와 경쾌함이 부족합니다. 숫자, 퀴즈, 보상 화면처럼 빠른 주목과 즐거운 자극이 필요한 인터페이스에서는 학습 동기가 낮아 보일 수 있습니다.
- 러닝화 랜딩 페이지 — 스포츠 러닝화는 속도감, 반발력, 가벼움, 에너지 전달이 중요합니다. 이 팔레트는 흙, 목재, 가죽처럼 정적인 소재감을 먼저 떠올리게 하므로 기능성 운동화의 탄력과 신기술 이미지를 약하게 만들 수 있습니다. 기록 단축용 제품에는 덜 적합합니다.
- 탄산음료 캔 디자인 — 탄산음료는 청량감, 차가움, 즉각적인 갈증 해소가 핵심인데, 이 색상들은 따뜻하고 건조한 질감에 가깝습니다. 특히 짙은 갈색과 적갈색은 무게감 있는 맛을 연상시켜 상쾌한 탄산감이 덜 드러납니다. 과일 소다나 제로 음료에는 맞지 않습니다.
- 스마트폰 보안 인증 화면 — 보안 인증 화면은 신뢰와 명확성이 중요하지만 동시에 즉각적인 상태 구분이 필요합니다. 이 조합은 색 간 분위기는 좋지만 성공, 오류, 경고, 진행 상태를 빠르게 구별하기에는 대비 체계가 복잡해질 수 있습니다. 기능 중심 화면에는 효율이 떨어집니다.
- 웨딩 주얼리 온라인 배너 — 웨딩 주얼리는 투명함, 광채, 깨끗한 흰색, 섬세한 반짝임이 중요합니다. 이 팔레트는 고풍스럽고 흙빛이 강해 다이아몬드나 플래티넘의 맑은 빛을 충분히 돋보이게 하기 어렵습니다. 화사하고 순백의 예식 이미지를 원하는 배너에는 덜 어울립니다.
팔레트가 주는 느낌
- 짙은 적갈색과 점토빛 베이지가 중심을 잡고, 올리브 그린과 회보라가 차분한 깊이를 더하는 팔레트입니다. 오래된 목재 가구, 흙벽, 말린 허브, 빈티지 타일이 함께 놓인 공간처럼 묵직하고 따뜻한 인상을 줍니다. 화려함보다 질감, 안정감, 숙성된 분위기가 강하게 느껴집니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#120A09와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #120A09onBG #9A301C
Fail2.62:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #120A09onBG #73638B
AA Large3.62:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #120A09onBG #70904E
AA5.39:1일반 텍스트 AA 기준을 충족합니다.
Color 2
#D0A585와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #D0A585onBG #120A09
AAA8.76:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #D0A585onBG #9A301C
AA Large3.34:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #D0A585onBG #73638B
Fail2.42:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #D0A585onBG #70904E
Fail1.62:1텍스트 대비 기준에 미달합니다.
Color 3
#9A301C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #9A301ConBG #120A09
Fail2.62:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #9A301ConBG #D0A585
AA Large3.34:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #9A301ConBG #73638B
Fail1.38:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #9A301ConBG #70904E
Fail2.06:1텍스트 대비 기준에 미달합니다.
Color 4
#73638B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #73638BonBG #120A09
AA Large3.62:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #73638BonBG #D0A585
Fail2.42:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #73638BonBG #9A301C
Fail1.38:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #73638BonBG #70904E
Fail1.49:1텍스트 대비 기준에 미달합니다.
Color 5
#70904E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #70904EonBG #120A09
AA5.39:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #70904EonBG #D0A585
Fail1.62:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #70904EonBG #9A301C
Fail2.06:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #70904EonBG #73638B
Fail1.49: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
#120A09와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #120A09onBG #D0A585
|Lc| 45++60 LcWCAG 8.76:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #120A09onBG #9A301C
|Lc| < 30+19 LcWCAG 2.62:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #120A09onBG #73638B
|Lc| < 30+27 LcWCAG 3.62:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #120A09onBG #70904E
|Lc| 30++40 LcWCAG 5.39:1
Color 2
#D0A585와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D0A585onBG #120A09
|Lc| 45+-58 LcWCAG 8.76:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D0A585onBG #9A301C
|Lc| 30+-40 LcWCAG 3.34:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D0A585onBG #73638B
|Lc| 30+-33 LcWCAG 2.42:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D0A585onBG #70904E
|Lc| < 30-20 LcWCAG 1.62:1
Color 3
#9A301C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #9A301ConBG #120A09
|Lc| < 30-17 LcWCAG 2.62:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9A301ConBG #D0A585
|Lc| 30++39 LcWCAG 3.34:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9A301ConBG #73638B
|Lc| < 30+0 LcWCAG 1.38:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #9A301ConBG #70904E
|Lc| < 30+19 LcWCAG 2.06:1
Color 4
#73638B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #73638BonBG #120A09
|Lc| < 30-25 LcWCAG 3.62:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #73638BonBG #D0A585
|Lc| 30++31 LcWCAG 2.42:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #73638BonBG #9A301C
|Lc| < 30+0 LcWCAG 1.38:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #73638BonBG #70904E
|Lc| < 30+11 LcWCAG 1.49:1
Color 5
#70904E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #70904EonBG #120A09
|Lc| 30+-38 LcWCAG 5.39:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #70904EonBG #D0A585
|Lc| < 30+18 LcWCAG 1.62:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #70904EonBG #9A301C
|Lc| < 30-20 LcWCAG 2.06:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #70904EonBG #73638B
|Lc| < 30-12 LcWCAG 1.49:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.