Color 1 on Color 2
대비 샘플 텍스트
Text #25252BonBG #8F0D27
Fail1.64:1텍스트 대비 기준에 미달합니다.
팔레트 정보
Red Gallery
추천 분야와 이유
- 프리미엄 와인바 메뉴판 — 버건디 레드와 차콜 그레이는 와인바 메뉴판, 코스 메뉴, 페어링 리스트 디자인에 적합합니다. 깊은 레드 톤은 레드 와인, 숙성 치즈, 다이닝 무드를 직관적으로 떠올리게 하며, 라이트 그레이와 크림 톤은 메뉴 가독성을 안정적으로 보완합니다. 고급 레스토랑 브랜딩, 와인바 인테리어, 파인 다이닝 메뉴판 키워드와 잘 연결됩니다.
- 여성 울 블레이저 상세페이지 — 버건디 포인트와 슬레이트 그레이 계열은 여성 울 블레이저, 겨울 재킷, 오피스룩 상세페이지에 잘 어울립니다. 차분한 블루 그레이는 직장인 패션의 신뢰감을 만들고, 버건디는 고급스러운 포인트 컬러로 상품의 계절감과 세련된 실루엣을 강조합니다. 여성 오피스룩, 겨울 하객룩, 클래식 재킷 키워드에 적합합니다.
- 부티크 호텔 객실 키카드 — 차콜, 버건디, 페일 블루 조합은 부티크 호텔 객실 키카드, 룸 슬리브, 체크인 카드 디자인에 추천합니다. 어두운 배경은 프리미엄 숙박 브랜드의 안정감을 주고, 밝은 크림 톤은 객실 번호와 로고 정보를 명확하게 보여줍니다. 호텔 브랜딩, 럭셔리 객실 디자인, 컨시어지 카드 키워드와 어울립니다.
- 법률 사무소 웹사이트 메인 화면 — 딥 그레이와 쿨 뉴트럴 톤은 법률 사무소 웹사이트 메인 화면에 적합합니다. 차콜 계열은 전문성과 신뢰감을 만들고, 버건디는 지나치게 딱딱한 이미지를 완화하면서 권위 있는 포인트를 제공합니다. 라이트 그레이 배경은 상담 신청 버튼과 서비스 설명의 가독성을 높입니다. 변호사 홈페이지, 법률 상담, 전문직 브랜딩 키워드에 유리합니다.
- 프리미엄 노트북 파우치 — 차분한 그레이와 버건디 포인트는 프리미엄 노트북 파우치, 태블릿 슬리브, 비즈니스 가방 제품에 잘 맞습니다. 무채색 기반은 전자기기 액세서리의 실용성과 깔끔함을 강조하고, 버건디는 차별화된 고급 포인트로 작용합니다. 직장인 선물, 노트북 가방, 미니멀 오피스 아이템 키워드와 연결하기 좋습니다.
비추천 분야와 이유
- 유아용 목욕 장난감 패키지 — 유아용 목욕 장난감, 물놀이 완구, 아기 욕실용품 패키지에는 적합하지 않습니다. 이 조합은 차콜과 버건디의 무게감이 강해 어린이 제품에 필요한 밝음, 귀여움, 안전한 첫인상을 약하게 만들 수 있습니다. 유아 장난감 패키지는 파스텔 옐로우, 민트, 스카이 블루처럼 부드럽고 친근한 색상이 구매 전환에 더 유리합니다.
- 비타민 젤리 온라인 상세페이지 — 비타민 젤리, 어린이 영양 젤리, 과일맛 건강 간식 상세페이지에는 비추천합니다. 버건디와 차콜 중심의 톤은 신선한 과일, 상큼한 맛, 활기찬 건강 이미지를 충분히 전달하기 어렵습니다. 비타민 제품은 오렌지, 레몬, 베리, 그린 계열처럼 원료와 맛을 즉각적으로 보여주는 컬러가 검색 썸네일과 모바일 상세페이지에서 더 효과적입니다.
- 해변 리조트 수영복 배너 — 해변 리조트 수영복, 비키니, 래시가드 프로모션 배너에는 적합도가 낮습니다. 이 색상 조합은 도시적이고 겨울감 있는 분위기가 강해 여름 휴가, 바다, 햇빛, 청량한 물놀이 이미지를 약하게 만듭니다. 수영복 쇼핑몰 배너는 터콰이즈 블루, 코랄, 화이트, 선명한 옐로우처럼 리조트룩과 비치웨어 감성을 직접 전달하는 색상이 더 알맞습니다.
- 초등학생 게임형 학습 앱 — 초등학생 게임형 학습 앱, 키즈 영어 앱, 어린이 수학 앱 UI에는 비추천합니다. 차콜과 버건디는 전문적이고 성숙한 인상을 주지만, 어린이 대상 서비스에 필요한 재미, 보상감, 클릭 유도성을 충분히 만들기 어렵습니다. 키즈 교육 앱은 밝은 버튼 컬러, 명확한 단계 표시, 캐릭터 중심 UI가 중요하므로 이 조합은 학습 동기와 화면 몰입감을 낮출 수 있습니다.
- 저가형 탄산음료 캔 디자인 — 저가형 탄산음료, 과일 탄산수, 편의점 음료 캔 디자인에는 주의가 필요합니다. 이 조합은 고급스럽지만 차분하고 무거운 인상이 강해 청량감, 탄산감, 즉각적인 갈증 해소 이미지를 표현하기 어렵습니다. 탄산음료 패키지는 강한 채도, 시원한 블루, 라임 그린, 오렌지 같은 색상이 매대 주목도와 맛 인지에 더 효과적입니다.
팔레트가 주는 느낌
- 차콜 블랙에 가까운 딥 그레이와 버건디 레드가 중심을 잡고, 블루 그레이와 라이트 크림 톤이 차가운 여백을 만들어 세련되고 절제된 분위기를 줍니다. 전체적으로 도시적인 호텔 라운지, 겨울 패션 화보, 프리미엄 오피스 인테리어처럼 차분하지만 강한 인상을 남깁니다. 밝고 귀여운 느낌보다는 성숙함, 신뢰감, 정돈된 고급감이 두드러지며, 온라인 브랜딩과 오프라인 공간 모두에서 전문적이고 모던한 이미지를 만들기 좋습니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#25252B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #25252BonBG #A99D93
AA5.75:1일반 텍스트 AA 기준을 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #25252BonBG #B1C0D6
AAA8.26:1일반 텍스트 AAA 기준을 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #25252BonBG #F3F3F8
AAA13.78:1일반 텍스트 AAA 기준을 충족합니다.
Color 2
#8F0D27와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #8F0D27onBG #25252B
Fail1.64:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #8F0D27onBG #A99D93
AA Large3.52:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #8F0D27onBG #B1C0D6
AA5.05:1일반 텍스트 AA 기준을 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #8F0D27onBG #F3F3F8
AAA8.42:1일반 텍스트 AAA 기준을 충족합니다.
Color 3
#A99D93와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #A99D93onBG #25252B
AA5.75:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #A99D93onBG #8F0D27
AA Large3.52:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #A99D93onBG #B1C0D6
Fail1.43:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #A99D93onBG #F3F3F8
Fail2.39:1텍스트 대비 기준에 미달합니다.
Color 4
#B1C0D6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #B1C0D6onBG #25252B
AAA8.26:1일반 텍스트 AAA 기준을 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #B1C0D6onBG #8F0D27
AA5.05:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #B1C0D6onBG #A99D93
Fail1.43:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #B1C0D6onBG #F3F3F8
Fail1.67:1텍스트 대비 기준에 미달합니다.
Color 5
#F3F3F8와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #F3F3F8onBG #25252B
AAA13.78:1일반 텍스트 AAA 기준을 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #F3F3F8onBG #8F0D27
AAA8.42:1일반 텍스트 AAA 기준을 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #F3F3F8onBG #A99D93
Fail2.39:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #F3F3F8onBG #B1C0D6
Fail1.67: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
#25252B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #25252BonBG #8F0D27
|Lc| < 30+10 LcWCAG 1.64:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #25252BonBG #A99D93
|Lc| 45++49 LcWCAG 5.75:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #25252BonBG #B1C0D6
|Lc| 60++65 LcWCAG 8.26:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #25252BonBG #F3F3F8
|Lc| 90++95 LcWCAG 13.78:1
Color 2
#8F0D27와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #8F0D27onBG #25252B
|Lc| < 30-10 LcWCAG 1.64:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8F0D27onBG #A99D93
|Lc| 30++36 LcWCAG 3.52:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8F0D27onBG #B1C0D6
|Lc| 45++53 LcWCAG 5.05:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #8F0D27onBG #F3F3F8
|Lc| 75++83 LcWCAG 8.42:1
Color 3
#A99D93와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #A99D93onBG #25252B
|Lc| 45+-47 LcWCAG 5.75:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #A99D93onBG #8F0D27
|Lc| 30+-37 LcWCAG 3.52:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #A99D93onBG #B1C0D6
|Lc| < 30+15 LcWCAG 1.43:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #A99D93onBG #F3F3F8
|Lc| 30++45 LcWCAG 2.39:1
Color 4
#B1C0D6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #B1C0D6onBG #25252B
|Lc| 60+-65 LcWCAG 8.26:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #B1C0D6onBG #8F0D27
|Lc| 45+-54 LcWCAG 5.05:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #B1C0D6onBG #A99D93
|Lc| < 30-17 LcWCAG 1.43:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #B1C0D6onBG #F3F3F8
|Lc| < 30+28 LcWCAG 1.67:1
Color 5
#F3F3F8와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F3F3F8onBG #25252B
|Lc| 90+-97 LcWCAG 13.78:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F3F3F8onBG #8F0D27
|Lc| 75+-86 LcWCAG 8.42:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F3F3F8onBG #A99D93
|Lc| 45+-49 LcWCAG 2.39:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F3F3F8onBG #B1C0D6
|Lc| 30+-31 LcWCAG 1.67:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.