Color 1 on Color 2
대비 샘플 텍스트
Text #C28315onBG #5C3E2E
AA Large3.00:1큰 텍스트 AA 기준만 충족합니다.
팔레트 정보
Cozy Autumn
추천 분야와 이유
- F&B(식음료) 브랜드 및 카페 인테리어 — 커피와 디저트를 연상시키는 깊은 브라운과 부드러운 크림색이 식욕과 아늑함을 자극합니다. 여기에 화사한 옐로우가 포인트로 더해져 트렌디하고 감각적인 브랜드 이미지를 구축하기에 완벽합니다.
- 가을/겨울 시즌 패션 및 뷰티 패키지 — 묵직한 대지(흙)의 색감과 따스한 햇살 같은 노란빛의 조화가 고급스러우면서도 포근한 계절감을 전합니다. 가을·겨울 컬렉션의 룩북이나 웰빙, 오가닉 콘셉트의 뷰티 브랜드에 잘 어울립니다.
- 빈티지 가구 및 라이프스타일 굿즈 — 고급스러운 고가구 느낌의 짙은 우드 톤과 클래식한 황동 조명을 닮은 옐로우의 매칭이 세련된 레트로 감성을 자아냅니다. 아늑한 분위기를 지향하는 소품이나 독립 서점 등의 굿즈 디자인에 추천합니다.
- 독립출판물 디자인 및 에세이 표지 — 차분하고 깊이 있는 브라운과 크림색이 텍스트에 대한 몰입도를 높이고 마음을 진정시키는 효과를 줍니다. 선명한 옐로우를 타이포그래피나 띠지에 포인트로 사용하면, 감성적이면서도 시선을 사로잡는 흡입력 있는 표지가 완성됩니다.
- 가죽 공방 및 아날로그 가젯 브랜드 BI — 시간이 흐를수록 멋이 우러나는 천연 가죽과 에이징된 황동 부자재를 직관적으로 연상시키는 컬러 조합입니다. 클래식한 장인 정신과 수공예적 가치를 진정성 있게 전달하고 싶을 때 시각적 신뢰감을 극대화해 줍니다.
비추천 분야와 이유
- 첨단 IT / AI 및 테크 기업 BI — 브라운과 크림색이 주는 따뜻함과 아날로그적인 감성은 최첨단, 신속성, 디지털 혁신을 강조해야 하는 테크 기업이나 SaaS(서비스형 소프트웨어) 랜딩페이지에는 자칫 고리타분하거나 속도가 느리다는 인상을 줄 수 있으므로 비추천합니다.
- 스포츠 및 아웃도어 액티비티 브랜드 — 시각적인 편안함과 묵직한 안정감이 중심인 배색이기 때문에, 폭발적인 에너지와 역동적인 생동감을 전달해야 하는 스포츠 웨어, 익스트림 스포츠 플랫폼 등에는 타겟의 아드레날린을 자극하기 부족합니다.
- 의료, 제약 및 위생 용품 웹사이트 — 브라운 계열의 색상은 오가닉한 느낌을 주지만, 의료 서비스에서 가장 중요한 '무결점의 청결함'이나 '차가울 정도의 위생적인 신뢰감'을 표현하기에는 부적절할 수 있습니다. 깨끗한 화이트와 블루 계열을 대체재로 추천합니다.
팔레트가 주는 느낌
- 묵직한 브라운 톤들이 전체적인 중심을 잡아주어 깊이감과 신뢰감을 선사하고, 부드러운 크림색(#F4F2E9)이 그 사이를 유연하게 채워주며 시각적인 편안함을 매끄럽게 유도합니다. 자칫 무겁고 진지하게만 흘러갈 수 있는 분위기를 톡 쏘는 레몬 옐로우(#FAD10C)가 위트 있게 깨뜨리며 신선하고 생동감 넘치는 활력을 더해줍니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#C28315와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #C28315onBG #F4F2E9
Fail2.86:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #C28315onBG #FAD10C
Fail2.17:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #C28315onBG #864914
Fail2.20:1텍스트 대비 기준에 미달합니다.
Color 2
#5C3E2E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #5C3E2EonBG #C28315
AA Large3.00:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #5C3E2EonBG #F4F2E9
AAA8.58:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #5C3E2EonBG #FAD10C
AA6.50:1일반 텍스트 AA 기준을 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #5C3E2EonBG #864914
Fail1.36:1텍스트 대비 기준에 미달합니다.
Color 3
#F4F2E9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #F4F2E9onBG #C28315
Fail2.86:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #F4F2E9onBG #5C3E2E
AAA8.58:1일반 텍스트 AAA 기준을 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #F4F2E9onBG #FAD10C
Fail1.32:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #F4F2E9onBG #864914
AA6.29:1일반 텍스트 AA 기준을 충족합니다.
Color 4
#FAD10C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #FAD10ConBG #C28315
Fail2.17:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #FAD10ConBG #5C3E2E
AA6.50:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #FAD10ConBG #F4F2E9
Fail1.32:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #FAD10ConBG #864914
AA4.77:1일반 텍스트 AA 기준을 충족합니다.
Color 5
#864914와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #864914onBG #C28315
Fail2.20:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #864914onBG #5C3E2E
Fail1.36:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #864914onBG #F4F2E9
AA6.29:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #864914onBG #FAD10C
AA4.77:1일반 텍스트 AA 기준을 충족합니다.
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
#C28315와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C28315onBG #5C3E2E
|Lc| 30+-31 LcWCAG 3.00:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #C28315onBG #F4F2E9
|Lc| 45++51 LcWCAG 2.86:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #C28315onBG #FAD10C
|Lc| 30++34 LcWCAG 2.17:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C28315onBG #864914
|Lc| < 30-24 LcWCAG 2.20:1
Color 2
#5C3E2E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5C3E2EonBG #C28315
|Lc| 30++31 LcWCAG 3.00:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5C3E2EonBG #F4F2E9
|Lc| 75++84 LcWCAG 8.58:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5C3E2EonBG #FAD10C
|Lc| 60++67 LcWCAG 6.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #5C3E2EonBG #864914
|Lc| < 30+0 LcWCAG 1.36:1
Color 3
#F4F2E9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F4F2E9onBG #C28315
|Lc| 45+-56 LcWCAG 2.86:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F4F2E9onBG #5C3E2E
|Lc| 75+-88 LcWCAG 8.58:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F4F2E9onBG #FAD10C
|Lc| < 30-17 LcWCAG 1.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F4F2E9onBG #864914
|Lc| 75+-80 LcWCAG 6.29:1
Color 4
#FAD10C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAD10ConBG #C28315
|Lc| 30+-37 LcWCAG 2.17:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAD10ConBG #5C3E2E
|Lc| 60+-69 LcWCAG 6.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #FAD10ConBG #F4F2E9
|Lc| < 30+15 LcWCAG 1.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAD10ConBG #864914
|Lc| 60+-62 LcWCAG 4.77:1
Color 5
#864914와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #864914onBG #C28315
|Lc| < 30+23 LcWCAG 2.20:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #864914onBG #5C3E2E
|Lc| < 30+0 LcWCAG 1.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #864914onBG #F4F2E9
|Lc| 75++76 LcWCAG 6.29:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #864914onBG #FAD10C
|Lc| 45++59 LcWCAG 4.77:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.