Color 1 on Color 2
대비 샘플 텍스트
Text #D99048onBG #352C2E
AA5.18:1일반 텍스트 AA 기준을 충족합니다.
팔레트 정보
Dusty Rosewood
추천 분야와 이유
- 수제 세라믹 머그컵 패키지 — 흙빛 브라운과 회색 베이지가 도자기 특유의 자연스러운 질감을 잘 살려 줍니다. 여기에 탁한 보라 계열이 더해져 단순한 생활용품보다 공예품처럼 보이는 인상을 줍니다. 따뜻하고 차분한 색감 덕분에 선물용 패키지로도 안정감 있게 보입니다.
- 프리미엄 가죽 다이어리 커버 — 붉은 브라운과 짙은 차콜이 가죽의 묵직한 질감과 잘 맞습니다. 전체적으로 채도가 낮아 오래 사용할수록 멋이 쌓이는 제품 이미지를 만들기 좋습니다. 라일락 톤은 딱딱함을 줄여 주어 사무용품이지만 감도 있는 문구 제품처럼 보이게 합니다.
- 빈티지 카페 원두 봉투 — 브라운과 회색빛 색상 조합이 로스팅한 원두, 나무 선반, 오래된 벽돌 같은 이미지를 자연스럽게 떠올리게 합니다. 너무 밝거나 산뜻하지 않아 깊은 향과 묵직한 맛을 강조하기 좋습니다. 소규모 로스터리의 정성스러운 분위기와 잘 어울립니다.
- 우드 향초 라벨 디자인 — 따뜻한 갈색과 탁한 중간색들이 나무, 연기, 흙, 건조한 꽃잎 같은 이미지를 만들어 향초의 감각적인 분위기를 높여 줍니다. 강한 컬러 대비가 없어서 휴식용 제품에 필요한 안정감을 줍니다. 침실이나 서재에 어울리는 향 제품으로 보이게 합니다.
- 호텔 룸키 카드 — 짙은 색과 부드러운 중간 톤이 함께 있어 조용하고 성숙한 숙박 경험을 암시합니다. 과하게 화려하지 않으면서도 보라빛 포인트가 있어 일반 비즈니스 호텔보다 감각적인 인상을 줍니다. 오래된 건물이나 목재 인테리어를 가진 호텔과 잘 맞습니다.
비추천 분야와 이유
- 어린이용 물놀이 장난감 — 전체 색감이 낮고 무게감이 있어 어린이 장난감에 필요한 밝고 활기찬 인상을 주기 어렵습니다. 물놀이 제품은 시원함, 안전함, 즉각적인 즐거움이 중요하지만 이 조합은 건조하고 차분한 느낌이 강합니다. 매대에서 눈에 띄는 힘도 약할 수 있습니다.
- 스포츠 에너지 드링크 캔 — 빠른 움직임, 강한 자극, 즉각적인 활력을 표현하기에는 색상이 전반적으로 차분합니다. 붉은 브라운과 회색 계열은 에너지보다 안정감과 무게감을 먼저 전달합니다. 운동 전후의 상쾌함이나 폭발적인 퍼포먼스를 강조하는 제품에는 다소 답답하게 보입니다.
- 신생아 목욕용품 패키지 — 신생아 용품은 깨끗함, 부드러움, 위생적인 이미지를 즉시 전달해야 합니다. 이 색 조합은 따뜻하지만 탁한 톤이 많아 목욕용품의 산뜻함을 약하게 만들 수 있습니다. 특히 짙은 차콜과 붉은 브라운은 아기 제품보다 성인 취향의 생활용품처럼 보일 수 있습니다.
- 여름 해변 슬리퍼 — 해변용 슬리퍼는 가벼움, 시원함, 햇빛 아래의 밝은 분위기가 중요합니다. 이 조합은 건조한 흙빛과 실내적인 차분함이 강해 여름 바다의 청량함을 표현하기 어렵습니다. 모래사장이나 수영복 매장에서는 계절감이 약하게 느껴질 수 있습니다.
- 할인마트 전단지 — 할인 전단지는 가격 혜택을 빠르게 알리기 위해 선명한 대비와 즉각적인 주목성이 필요합니다. 이 색들은 고급스럽고 차분한 대신 강한 시각적 압박감이 부족합니다. 대량 할인, 한정 특가, 긴급 구매를 유도하는 디자인에는 전달력이 약해질 수 있습니다.
팔레트가 주는 느낌
- 붉은 브라운, 차분한 차콜, 탁한 라일락, 회색빛 베이지가 함께 보여 따뜻하지만 가볍지 않은 인상을 줍니다. 빈티지한 흙빛과 보랏빛이 섞여 성숙하고 안정적인 분위기를 만들며, 손때 묻은 가죽, 도자기, 오래된 벽돌처럼 깊이 있는 질감이 잘 어울립니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#D99048와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #D99048onBG #8B6855
Fail1.91:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #D99048onBG #947FB1
Fail1.35:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #D99048onBG #A29D9B
Fail1.03:1텍스트 대비 기준에 미달합니다.
Color 2
#352C2E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #352C2EonBG #D99048
AA5.18:1일반 텍스트 AA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #352C2EonBG #8B6855
Fail2.71:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #352C2EonBG #947FB1
AA Large3.82:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #352C2EonBG #A29D9B
AA5.05:1일반 텍스트 AA 기준을 충족합니다.
Color 3
#8B6855와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #8B6855onBG #D99048
Fail1.91:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #8B6855onBG #352C2E
Fail2.71:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #8B6855onBG #947FB1
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #8B6855onBG #A29D9B
Fail1.86:1텍스트 대비 기준에 미달합니다.
Color 4
#947FB1와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #947FB1onBG #D99048
Fail1.35:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #947FB1onBG #352C2E
AA Large3.82:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #947FB1onBG #8B6855
Fail1.41:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #947FB1onBG #A29D9B
Fail1.32:1텍스트 대비 기준에 미달합니다.
Color 5
#A29D9B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #A29D9BonBG #D99048
Fail1.03:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #A29D9BonBG #352C2E
AA5.05:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #A29D9BonBG #8B6855
Fail1.86:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #A29D9BonBG #947FB1
Fail1.32: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
#D99048와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D99048onBG #352C2E
|Lc| 45+-46 LcWCAG 5.18:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D99048onBG #8B6855
|Lc| < 30-23 LcWCAG 1.91:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D99048onBG #947FB1
|Lc| < 30-12 LcWCAG 1.35:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #D99048onBG #A29D9B
|Lc| < 30+0 LcWCAG 1.03:1
Color 2
#352C2E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #352C2EonBG #D99048
|Lc| 45++47 LcWCAG 5.18:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #352C2EonBG #8B6855
|Lc| < 30+24 LcWCAG 2.71:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #352C2EonBG #947FB1
|Lc| 30++35 LcWCAG 3.82:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #352C2EonBG #A29D9B
|Lc| 45++46 LcWCAG 5.05:1
Color 3
#8B6855와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8B6855onBG #D99048
|Lc| < 30+22 LcWCAG 1.91:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8B6855onBG #352C2E
|Lc| < 30-23 LcWCAG 2.71:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8B6855onBG #947FB1
|Lc| < 30+10 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8B6855onBG #A29D9B
|Lc| < 30+20 LcWCAG 1.86:1
Color 4
#947FB1와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #947FB1onBG #D99048
|Lc| < 30+10 LcWCAG 1.35:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #947FB1onBG #352C2E
|Lc| 30+-34 LcWCAG 3.82:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #947FB1onBG #8B6855
|Lc| < 30-11 LcWCAG 1.41:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #947FB1onBG #A29D9B
|Lc| < 30+9 LcWCAG 1.32:1
Color 5
#A29D9B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #A29D9BonBG #D99048
|Lc| < 30+0 LcWCAG 1.03:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #A29D9BonBG #352C2E
|Lc| 45+-45 LcWCAG 5.05:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #A29D9BonBG #8B6855
|Lc| < 30-22 LcWCAG 1.86:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #A29D9BonBG #947FB1
|Lc| < 30-10 LcWCAG 1.32:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.