Color 1 on Color 2
대비 샘플 텍스트
Text #FAEB08onBG #0E0908
AAA15.97:1일반 텍스트 AAA 기준을 충족합니다.
팔레트 정보
Lava Asphalt
추천 분야와 이유
- 스트리트 웨어 브랜드의 유니섹스 오버핏 후드티 — 강렬한 그래픽 디자인이 생명인 패션 아이템에 최적화된 색상입니다. 블랙 배경 위에 레드와 옐로우의 과감한 배색은 강렬한 시각적 임팩트를 주며, 카키색과 그레이로 디테일을 더하면 힙하고 반항적인 스트리트 감성을 극대화합니다. 개성과 트렌디한 스타일을 중시하는 MZ세대 소비자의 시선을 단번에 사로잡는 스트리트 패션 룩을 완성할 수 있어 판매율을 높이는 데 기여합니다.
- 클래식 바이크 운전자를 위한 풀페이스 헬멧 — 속도감과 안전성이 동시에 요구되는 가죽 자켓 및 라이딩 기어 품목에 완벽히 부합합니다. 블랙 바디에 강렬한 레드와 옐로우 라인은 역동적인 레이싱 감성을 전달할 뿐만 아니라, 도로 위에서 라이더의 존재감을 높여주는 높은 시인성을 확보해 안전사고를 예방합니다. 카키와 그레이의 매치는 빈티지하고 클래식한 오토바이 무드와 잘 어우러져 매력적인 상품성을 갖추게 합니다.
- 실외 러닝 및 크로스핏 전용 고기능성 운동화 — 한계에 도전하는 스포츠웨어 및 고기능성 트레이닝 용품에 에너지를 불어넣는 색조입니다. 레드와 옐로우의 조합은 신체 활동성을 시각적으로 자극하고, 아웃솔이나 힐컵에 적용된 블랙과 카키는 오염에 강한 실용성을 제공합니다. 기능성 운동화 시장에서 강인하고 속도감 있는 브랜드 이미지를 구축하고 열정적인 운동 매니아층의 구매 욕구를 자극하기에 유리합니다.
- 온라인 스트리밍 플랫폼의 액션 영화 카테고리 배너 — 시청자의 클릭을 유도해야 하는 모바일 앱 및 웹사이트의 이벤트 팝업 디자인에 이상적입니다. 어두운 다크 모드 UI와 잘 어울리는 블랙 베이스에 경고등처럼 강렬한 옐로우와 레드를 폰트나 테두리에 사용하면 시인성이 극대화됩니다. 스릴러, 블록버스터 등 긴장감 넘치는 콘텐츠의 특성을 직관적으로 전달하여 사용자의 체류 시간과 클릭률(CTR)을 높입니다.
- 게이밍 마우스 및 기계식 키보드 세트 — 하이엔드 테크 기기 및 게이밍 기어 제품군에서 선호하는 미래지향적이고 강력한 성능을 시각화합니다. 본체의 딥한 블랙 컬러와 세련된 그레이 섀시를 바탕으로, 키캡이나 LED 라이팅에 레드와 옐로우 포인트를 적용하면 고성능 장비의 정체성이 살아납니다. 프로게이머와 IT 장비 매니아들의 소장 가치를 높이는 고급스러운 게이밍 가젯으로 브랜딩하기 좋습니다.
비추천 분야와 이유
- 유기농 원료 기반의 프리미엄 산모용 튼살 크림 — 임산부와 태아의 안전을 최우선으로 하는 친환경 뷰티 소품 및 기초 화장품 패키지에는 부적합합니다. 노란색과 빨간색의 강한 대비는 피부 자극이나 경고의 메시지로 오인될 수 있으며, 블랙은 유기농 제품이 가진 순수하고 깨끗한 신뢰감을 저해합니다. 타깃 고객이 기대하는 순하고 부드러운 자연주의 브랜드 감성과 대치되어 거부감을 줄 수 있습니다.
- 불면증 완화를 위한 천연 아로마 디퓨저 세트 — 편안한 수면과 심신 안정을 돕는 홈 릴렉싱 리빙 아이템의 목적을 방해합니다. 뇌를 각성시키고 에너지를 촉진하는 옐로우와 레드는 신경을 자극하여 휴식을 취해야 하는 침실 공간의 인테리어 무드를 깨뜨립니다. 스트레스 해소와 힐링을 원하는 소비자에게 오히려 시각적 피로감과 불안감을 유발할 수 있어 테라피 상품군의 가치를 떨어뜨립니다.
- 프리미엄 한우 전문점의 오프라인 기프트 패키지 — 고급스럽고 위생적인 이미지가 생명인 프리미엄 전통 식품 명절 선물세트에는 어울리지 않습니다. 이 색상 조합은 캐주얼한 패스트푸드나 자극적인 떡볶이 같은 배달 음식을 연상시키기 쉬워, 고가의 신선 식품이 지녀야 할 격식과 품격을 훼손합니다. 전통적인 신뢰감과 깊은 풍미를 전달해야 하는 한우 브랜딩의 가치를 가볍게 만들 우려가 큽니다.
- 산후조리원 및 소아과 전문 병원의 내부 인테리어 — 면역력이 취약한 신생아와 산모, 어린이 환자들이 머무는 의료 공간의 가구 및 벽지 컬러로 부적합합니다. 검은색과 강렬한 붉은색의 배색은 공간을 좁고 어둡게 느끼게 만들며, 정서적 불안감이나 통증에 대한 공포심을 자극할 수 있습니다. 치유와 안정이 필요한 병원 인테리어에서 요구되는 따뜻하고 평온한 환경 조성에 부정적인 영향을 미칩니다.
- 명상 및 요가 가이드북 전자책 표지 디자인 — 마음의 평화와 정적인 집중을 유도하는 웰니스 도서 및 교육 콘텐츠 마케팅에 치명적입니다. 속도감과 날카로운 자극을 주는 색상 구성은 차분하게 내면을 들여다보는 명상의 정체성과 정반대의 에너지를 가집니다. 독자에게 정서적 긴장을 유발하여 책의 주제를 오해하게 만들고, 웰니스 장르 타깃층의 유입을 차단하는 결과를 낳습니다.
팔레트가 주는 느낌
- 고명도의 선명한 옐로우(#FAEB08)와 강렬한 레드(#F43A3B)가 시선을 단번에 사로잡는 강력한 에너지를 발산합니다. 이와 극명한 대비를 이루는 짙은 블랙(#0E0908)이 결합하여 극적인 긴장감과 역동성을 만들어냅니다. 여기에 중심을 잡아주는 밝은 그레이(#E5E3E3)와 차분한 카키 그린(#747C68)이 더해져 지나친 자극을 정돈해 줍니다. 전체적인 무드는 경고, 속도감, 힙한 스트리트 감성이 어우러진 강렬한 인상을 줍니다. 한눈에 들어오는 강한 시인성을 바탕으로 트렌디하면서도 파괴력 있는 분위기를 자아냅니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#FAEB08와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #FAEB08onBG #F43A3B
AA Large3.07:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #FAEB08onBG #E5E3E3
Fail1.03:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #FAEB08onBG #747C68
AA Large3.51:1큰 텍스트 AA 기준만 충족합니다.
Color 2
#0E0908와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #0E0908onBG #FAEB08
AAA15.97:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #0E0908onBG #F43A3B
AA5.20:1일반 텍스트 AA 기준을 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #0E0908onBG #E5E3E3
AAA15.48:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #0E0908onBG #747C68
AA4.55:1일반 텍스트 AA 기준을 충족합니다.
Color 3
#F43A3B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #F43A3BonBG #FAEB08
AA Large3.07:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #F43A3BonBG #0E0908
AA5.20:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #F43A3BonBG #E5E3E3
Fail2.98:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #F43A3BonBG #747C68
Fail1.14:1텍스트 대비 기준에 미달합니다.
Color 4
#E5E3E3와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #E5E3E3onBG #FAEB08
Fail1.03:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #E5E3E3onBG #0E0908
AAA15.48:1일반 텍스트 AAA 기준을 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #E5E3E3onBG #F43A3B
Fail2.98:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #E5E3E3onBG #747C68
AA Large3.40:1큰 텍스트 AA 기준만 충족합니다.
Color 5
#747C68와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #747C68onBG #FAEB08
AA Large3.51:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #747C68onBG #0E0908
AA4.55:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #747C68onBG #F43A3B
Fail1.14:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #747C68onBG #E5E3E3
AA Large3.40: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
#FAEB08와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAEB08onBG #0E0908
|Lc| 90+-92 LcWCAG 15.97:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAEB08onBG #F43A3B
|Lc| 45+-54 LcWCAG 3.07:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #FAEB08onBG #E5E3E3
|Lc| < 30+0 LcWCAG 1.03:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #FAEB08onBG #747C68
|Lc| 60+-60 LcWCAG 3.51:1
Color 2
#0E0908와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0E0908onBG #FAEB08
|Lc| 90++92 LcWCAG 15.97:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0E0908onBG #F43A3B
|Lc| 30++40 LcWCAG 5.20:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0E0908onBG #E5E3E3
|Lc| 75++90 LcWCAG 15.48:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0E0908onBG #747C68
|Lc| 30++34 LcWCAG 4.55:1
Color 3
#F43A3B와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #F43A3BonBG #FAEB08
|Lc| 45++50 LcWCAG 3.07:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F43A3BonBG #0E0908
|Lc| 30+-38 LcWCAG 5.20:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #F43A3BonBG #E5E3E3
|Lc| 45++48 LcWCAG 2.98:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #F43A3BonBG #747C68
|Lc| < 30+0 LcWCAG 1.14:1
Color 4
#E5E3E3와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #E5E3E3onBG #FAEB08
|Lc| < 30+0 LcWCAG 1.03:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E5E3E3onBG #0E0908
|Lc| 75+-90 LcWCAG 15.48:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E5E3E3onBG #F43A3B
|Lc| 45+-52 LcWCAG 2.98:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E5E3E3onBG #747C68
|Lc| 45+-58 LcWCAG 3.40:1
Color 5
#747C68와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #747C68onBG #FAEB08
|Lc| 45++56 LcWCAG 3.51:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #747C68onBG #0E0908
|Lc| 30+-31 LcWCAG 4.55:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #747C68onBG #F43A3B
|Lc| < 30+0 LcWCAG 1.14:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #747C68onBG #E5E3E3
|Lc| 45++54 LcWCAG 3.40:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.