Color 1 on Color 2
대비 샘플 텍스트
Text #202830onBG #C5BFBC
AAA8.21:1일반 텍스트 AAA 기준을 충족합니다.
팔레트 정보
Rainwashed Stone Pier
추천 분야와 이유
- 남성 프리미엄 레인코트 브랜드 상세페이지 — 차콜, 스톤 베이지, 블루 그레이 조합이 방수 아우터의 기능성, 도시적 스타일, 프리미엄 패션 이미지를 자연스럽게 강조합니다. 온라인 쇼핑몰 상세페이지에서 레인코트 소재감, 방수 원단, 미니멀 남성복 키워드와 잘 맞아 구매 전환에 유리합니다.
- 건축 설계사무소 포트폴리오 웹사이트 — 무채색 기반에 절제된 블루 톤이 더해져 콘크리트, 석재, 금속, 유리 소재를 다루는 건축 포트폴리오와 잘 어울립니다. 고급 주택 설계, 상업 공간 디자인, 모던 건축 브랜딩 키워드를 안정적으로 전달하며 전문성과 신뢰감을 높입니다.
- 호텔 욕실 어메니티 패키지 — 차분한 회갈색과 블루 그레이가 스파, 샤워젤, 바디로션, 호텔 어메니티 패키지에 청결하고 고요한 인상을 줍니다. 향이 강한 제품보다 우디 머스크, 미네랄, 아쿠아 계열 향과 잘 맞으며 객실 내 고급 편의용품 이미지를 강화합니다.
- 프리미엄 노트북 파우치 상품 디자인 — 저채도 블랙과 그레이 베이지가 전자기기 액세서리의 실용성, 내구성, 비즈니스 감각을 잘 표현합니다. 노트북 파우치, 태블릿 케이스, 재택근무 용품, 오피스 액세서리 키워드와 연결되며 남녀 모두 사용하기 좋은 세련된 상품 이미지를 만듭니다.
- 고급 커피 드립백 패키지 — 딥 차콜과 모카 그레이가 원두의 로스팅 깊이, 스페셜티 커피, 드립백 선물세트 이미지를 효과적으로 보여줍니다. 푸른 회색 포인트는 산미와 깔끔한 후미를 시각적으로 보완해 온라인 커피 브랜드 패키지에서 차분한 프리미엄 감성을 줍니다.
비추천 분야와 이유
- 유아용 생일파티 풍선 세트 — 전체 색감이 어둡고 저채도라 유아 생일파티, 키즈 이벤트, 풍선 장식 상품에 필요한 밝고 경쾌한 이미지를 만들기 어렵습니다. 핑크, 옐로, 민트처럼 시선을 끄는 컬러가 부족해 어린이 파티용품 검색 환경에서 주목도가 낮아질 수 있습니다.
- 여름 과일 주스 브랜드 패키지 — 과일 주스 패키지는 오렌지, 딸기, 망고, 청포도처럼 신선함과 당도를 즉시 떠올리게 하는 고채도 색상이 중요합니다. 이 조합은 차갑고 흐린 인상이 강해 착즙주스, 과일음료, 비타민 음료 키워드의 상큼한 구매 욕구를 약하게 만들 수 있습니다.
- 게임 스트리밍 썸네일 템플릿 — 실시간 게임 방송 썸네일은 강한 대비, 네온 컬러, 빠른 시선 집중이 중요합니다. 이 팔레트는 차분하고 정적인 분위기가 강해 e스포츠 하이라이트, 게임 스트리밍, 유튜브 썸네일 디자인에서 클릭률을 높이는 긴장감과 에너지를 만들기 어렵습니다.
- K-POP 아이돌 데뷔 앨범 굿즈 — 아이돌 데뷔 앨범 굿즈는 팬덤 색상, 포토카드, 응원봉, 앨범 패키지에서 선명한 콘셉트와 즉각적인 감정 반응이 중요합니다. 이 컬러 조합은 성숙하고 차분한 인상이 강해 신인 그룹의 밝은 존재감과 팬덤 확장성을 표현하기에는 약합니다.
- 패스트푸드 치킨버거 신메뉴 포스터 — 치킨버거 포스터는 바삭함, 따뜻한 온도감, 식욕을 자극하는 레드, 옐로, 오렌지 계열이 핵심입니다. 이 조합은 석재와 금속 같은 차가운 인상이 강해 패스트푸드 신메뉴, 치킨버거 광고, 배달앱 프로모션에서 즉각적인 식욕 자극이 부족합니다.
팔레트가 주는 느낌
- 짙은 차콜 블랙과 바랜 모카 그레이, 차분한 스톤 베이지가 안정적인 기반을 만들고, 흐린 블루와 페일 블루 그레이가 시원한 공기를 더합니다. 전체적으로 비 온 뒤 항구의 젖은 석재, 오래된 목재 데크, 흐린 하늘이 떠오르는 분위기입니다. 고급스럽지만 과장되지 않고, 차분한 신뢰감과 실용적인 세련미를 주는 저채도 컬러 팔레트입니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#202830와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #202830onBG #827570
AA Large3.36:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #202830onBG #6E91B0
AA4.50:1일반 텍스트 AA 기준을 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #202830onBG #8EA8B9
AA6.00:1일반 텍스트 AA 기준을 충족합니다.
Color 2
#C5BFBC와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #C5BFBConBG #202830
AAA8.21:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #C5BFBConBG #827570
Fail2.44:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #C5BFBConBG #6E91B0
Fail1.82:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #C5BFBConBG #8EA8B9
Fail1.37:1텍스트 대비 기준에 미달합니다.
Color 3
#827570와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #827570onBG #202830
AA Large3.36:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #827570onBG #C5BFBC
Fail2.44:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #827570onBG #6E91B0
Fail1.34:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #827570onBG #8EA8B9
Fail1.79:1텍스트 대비 기준에 미달합니다.
Color 4
#6E91B0와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #6E91B0onBG #202830
AA4.50:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #6E91B0onBG #C5BFBC
Fail1.82:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #6E91B0onBG #827570
Fail1.34:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #6E91B0onBG #8EA8B9
Fail1.33:1텍스트 대비 기준에 미달합니다.
Color 5
#8EA8B9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #8EA8B9onBG #202830
AA6.00:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #8EA8B9onBG #C5BFBC
Fail1.37:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #8EA8B9onBG #827570
Fail1.79:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #8EA8B9onBG #6E91B0
Fail1.33: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
#202830와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #202830onBG #C5BFBC
|Lc| 60++66 LcWCAG 8.21:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #202830onBG #827570
|Lc| < 30+29 LcWCAG 3.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #202830onBG #6E91B0
|Lc| 30++39 LcWCAG 4.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #202830onBG #8EA8B9
|Lc| 45++51 LcWCAG 6.00:1
Color 2
#C5BFBC와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C5BFBConBG #202830
|Lc| 60+-65 LcWCAG 8.21:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C5BFBConBG #827570
|Lc| 30+-37 LcWCAG 2.44:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C5BFBConBG #6E91B0
|Lc| < 30-27 LcWCAG 1.82:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C5BFBConBG #8EA8B9
|Lc| < 30-15 LcWCAG 1.37:1
Color 3
#827570와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #827570onBG #202830
|Lc| < 30-28 LcWCAG 3.36:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #827570onBG #C5BFBC
|Lc| 30++35 LcWCAG 2.44:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #827570onBG #6E91B0
|Lc| < 30+8 LcWCAG 1.34:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #827570onBG #8EA8B9
|Lc| < 30+20 LcWCAG 1.79:1
Color 4
#6E91B0와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #6E91B0onBG #202830
|Lc| 30+-38 LcWCAG 4.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #6E91B0onBG #C5BFBC
|Lc| < 30+24 LcWCAG 1.82:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #6E91B0onBG #827570
|Lc| < 30-10 LcWCAG 1.34:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #6E91B0onBG #8EA8B9
|Lc| < 30+10 LcWCAG 1.33:1
Color 5
#8EA8B9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8EA8B9onBG #202830
|Lc| 45+-50 LcWCAG 6.00:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8EA8B9onBG #C5BFBC
|Lc| < 30+13 LcWCAG 1.37:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8EA8B9onBG #827570
|Lc| < 30-22 LcWCAG 1.79:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8EA8B9onBG #6E91B0
|Lc| < 30-11 LcWCAG 1.33:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.