Color 1 on Color 2
대비 샘플 텍스트
Text #C71A2BonBG #630407
Fail2.33:1텍스트 대비 기준에 미달합니다.
팔레트 정보
Red Line
추천 분야와 이유
- 버건디 립스틱 상세 페이지 — 크림슨 레드와 딥 버건디는 버건디 립스틱, 매트 립, 고발색 립 제품의 선명한 컬러감을 강하게 보여 줍니다. 블랙 계열 배경은 제품 컷과 발색 컷을 고급스럽게 받쳐 주고, 살몬 핑크는 피부 톤과 데일리 메이크업 이미지를 부드럽게 연결합니다. 가을 립스틱, 레드립 추천, 벨벳 립 키워드에 적합합니다.
- 레드 와인 바 예약 페이지 — 딥 레드와 버건디 블랙 조합은 레드 와인 바, 내추럴 와인, 데이트 코스 예약 페이지에서 어두운 조명과 성숙한 분위기를 효과적으로 만듭니다. 크림슨 포인트는 예약 버튼과 추천 메뉴를 돋보이게 하고, 살몬 핑크는 지나치게 무거운 화면을 완화합니다. 분위기 좋은 와인바와 커플 데이트 키워드에 잘 맞습니다.
- 다크 초콜릿 선물 박스 — 짙은 버건디와 블랙은 다크 초콜릿, 수제 초콜릿, 프리미엄 디저트 패키지의 농도 있는 맛과 고급스러운 선물 이미지를 전달합니다. 크림슨 레드는 리본과 한정판 스티커에 강한 주목도를 만들고, 살몬 핑크는 카카오의 쓴맛을 부드러운 디저트 감성으로 보완합니다. 발렌타인데이 선물세트에 적합합니다.
- 고딕 연극 포스터 — 블랙과 딥 레드 중심의 대비는 고딕 연극, 스릴러 공연, 뮤지컬 포스터에서 무대의 그림자와 극적인 긴장감을 선명하게 표현합니다. 크림슨 컬러는 제목과 공연일을 강하게 각인시키고, 살몬 핑크는 인물 실루엣이나 조명 효과에 활용하기 좋습니다. 공연 예매, 연극 포스터, 야간 공연 키워드에 적합합니다.
- 체리 향 향수 패키지 — 크림슨 레드와 살몬 핑크는 체리 향수, 플로럴 머스크 향수, 니치 향수 패키지에서 달콤하면서도 성숙한 이미지를 만듭니다. 버건디 블랙은 가볍지 않은 잔향과 프리미엄 향수 브랜드의 무게감을 더합니다. 여자 향수 추천, 체리 향 향수, 선물용 향수 키워드와 자연스럽게 연결됩니다.
비추천 분야와 이유
- 신생아 로션 패키지 — 신생아 로션 패키지는 순함, 저자극, 보습, 아기 피부 안전성을 밝고 부드러운 색으로 전달해야 합니다. 이 팔레트는 블랙과 딥 레드 비중이 높아 아기 화장품, 베이비 로션, 민감성 피부 키워드에서 필요한 깨끗하고 안심되는 이미지를 만들기 어렵습니다. 강렬한 레드는 자극적으로 보일 수 있습니다.
- 치과 교정 상담 페이지 — 치과 교정 상담 페이지는 청결함, 의료 신뢰감, 정확한 진단, 편안한 상담 분위기가 중요합니다. 딥 레드와 블랙 조합은 의료 화면에서 출혈, 통증, 경고 상태를 떠올리게 할 수 있습니다. 치아교정, 투명교정, 치과 예약 전환 키워드에는 블루나 화이트 중심의 색상이 더 적합합니다.
- 수영장 강습 홍보 배너 — 수영장 강습 홍보 배너는 물의 청량감, 위생적인 시설, 안전한 교육 이미지를 보여 주어야 합니다. 이 색 조합은 와인 바와 무대 포스터처럼 어둡고 뜨거운 인상이 강해 어린이 수영, 실내 수영장, 여름 강습 키워드와 맞지 않습니다. 시원함과 투명한 물 이미지가 부족합니다.
- 친환경 샐러드 도시락 라벨 — 친환경 샐러드 도시락 라벨은 신선한 채소, 건강식, 가벼운 식사, 클린 푸드 이미지를 그린과 화이트 계열로 전달하는 것이 효과적입니다. 이 팔레트는 와인, 초콜릿, 립스틱처럼 진하고 성숙한 맛을 떠올리게 하므로 샐러드 정기배송, 다이어트 도시락 키워드에는 무겁게 보일 수 있습니다.
- 초등학생 학습지 표지 — 초등학생 학습지 표지는 친근함, 집중력, 재미있는 문제 풀이, 안전한 교육 이미지를 함께 보여 주어야 합니다. 딥 레드와 블랙 중심 색상은 경고나 시험 압박처럼 느껴질 수 있어 초등 수학, 국어 학습지, 키즈 교육 콘텐츠에는 부담스럽습니다. 밝은 블루, 옐로, 그린 계열이 더 적합합니다.
팔레트가 주는 느낌
- 선명한 크림슨 레드와 거의 검정에 가까운 버건디 블랙이 강한 긴장감과 집중도를 만드는 팔레트입니다. 짙은 와인 레드와 블랙 계열이 깊이를 만들고, 살몬 핑크가 차가운 강렬함을 조금 부드럽게 풀어 줍니다. 전체적으로 다크 초콜릿, 레드 와인, 벨벳 커튼, 고딕 영화 포스터, 강렬한 립 메이크업이 떠오릅니다. 로맨틱하지만 가볍지 않고, 고급스럽지만 위험하고 극적인 인상이 있어 야간 이벤트, 프리미엄 뷰티, 성인 타깃 패키지에 잘 어울립니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#C71A2B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #C71A2BonBG #0B0404
AA Large3.49:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #C71A2BonBG #F9A69D
AA Large3.04:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #C71A2BonBG #360404
AA Large3.07:1큰 텍스트 AA 기준만 충족합니다.
Color 2
#630407와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #630407onBG #C71A2B
Fail2.33:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #630407onBG #0B0404
Fail1.50:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #630407onBG #F9A69D
AAA7.07:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #630407onBG #360404
Fail1.32:1텍스트 대비 기준에 미달합니다.
Color 3
#0B0404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #0B0404onBG #C71A2B
AA Large3.49:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #0B0404onBG #630407
Fail1.50:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #0B0404onBG #F9A69D
AAA10.62:1일반 텍스트 AAA 기준을 충족합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #0B0404onBG #360404
Fail1.14:1텍스트 대비 기준에 미달합니다.
Color 4
#F9A69D와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #F9A69DonBG #C71A2B
AA Large3.04:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #F9A69DonBG #630407
AAA7.07:1일반 텍스트 AAA 기준을 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #F9A69DonBG #0B0404
AAA10.62:1일반 텍스트 AAA 기준을 충족합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #F9A69DonBG #360404
AAA9.33:1일반 텍스트 AAA 기준을 충족합니다.
Color 5
#360404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #360404onBG #C71A2B
AA Large3.07:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #360404onBG #630407
Fail1.32:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #360404onBG #0B0404
Fail1.14:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #360404onBG #F9A69D
AAA9.33:1일반 텍스트 AAA 기준을 충족합니다.
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
#C71A2B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C71A2BonBG #630407
|Lc| < 30-19 LcWCAG 2.33:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C71A2BonBG #0B0404
|Lc| < 30-25 LcWCAG 3.49:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #C71A2BonBG #F9A69D
|Lc| 30++39 LcWCAG 3.04:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C71A2BonBG #360404
|Lc| < 30-23 LcWCAG 3.07:1
Color 2
#630407와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #630407onBG #C71A2B
|Lc| < 30+19 LcWCAG 2.33:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #630407onBG #0B0404
|Lc| < 30+0 LcWCAG 1.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #630407onBG #F9A69D
|Lc| 45++60 LcWCAG 7.07:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #630407onBG #360404
|Lc| < 30+0 LcWCAG 1.32:1
Color 3
#0B0404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0B0404onBG #C71A2B
|Lc| < 30+27 LcWCAG 3.49:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0B0404onBG #630407
|Lc| < 30+0 LcWCAG 1.50:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0B0404onBG #F9A69D
|Lc| 60++67 LcWCAG 10.62:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0B0404onBG #360404
|Lc| < 30+0 LcWCAG 1.14:1
Color 4
#F9A69D와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F9A69DonBG #C71A2B
|Lc| 30+-41 LcWCAG 3.04:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F9A69DonBG #630407
|Lc| 45+-60 LcWCAG 7.07:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F9A69DonBG #0B0404
|Lc| 60+-66 LcWCAG 10.62:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F9A69DonBG #360404
|Lc| 60+-64 LcWCAG 9.33:1
Color 5
#360404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #360404onBG #C71A2B
|Lc| < 30+25 LcWCAG 3.07:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #360404onBG #630407
|Lc| < 30+0 LcWCAG 1.32:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #360404onBG #0B0404
|Lc| < 30+0 LcWCAG 1.14:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #360404onBG #F9A69D
|Lc| 60++65 LcWCAG 9.33:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.