Color 1 on Color 2
대비 샘플 텍스트
Text #040404onBG #C3D586
AAA12.87:1일반 텍스트 AAA 기준을 충족합니다.
팔레트 정보
Mossy Slate
추천 분야와 이유
- 아웃도어 캠핑용 조립식 화로대 — 야외 캠핑 감성에 완벽하게 부합합니다. 차콜과 그레이는 화로대의 단단한 금속 재질감과 그을린 숯을 연상시키며, 올리브와 라임색은 산뜻한 캠핑 장비의 포인트를 살려줍니다. 자연 속에서 때가 타도 티가 나지 않으면서도 밀리터리와 아웃도어 트렌드를 동시에 잡을 수 있는 실용적인 색상 조합입니다.
- 플랜테리어 가드닝 모종삽 및 원예 도구 키트 — 도심 속 홈 가드닝과 반려식물 인테리어를 즐기는 이들을 위한 프리미엄 도구에 적합합니다. 흙과 돌을 연상시키는 무채색 베이스에 올리브와 라임 연두색이 조화를 이루어, 원예 활동의 전문적인 느낌과 식물의 싱그러움을 동시에 시각화합니다. 감성적인 브랜딩을 추구하는 가드닝 브랜드의 시그니처 상품으로 매력적입니다.
- 친환경 업사이클링 캔버스 백팩 — 버려지는 폐기물을 재활용한 지속 가능한 패션 아이템에 훌륭한 시각적 서사를 부여합니다. 가공되지 않은 캔버스 천의 느낌을 주는 톤다운된 그린과 그레이가 친환경적인 가치를 직관적으로 전달하며, 라임색 포인트가 자칫 지루해질 수 있는 리사이클 제품에 트렌디한 스트리트 패션 감성을 더해 젊은 소비층을 공략하기 좋습니다.
- 식물 케어 및 가드닝 정보 공유 모바일 앱 — 반려식물 초보자를 위한 모바일 애플리케이션 화면 UI/UX 디자인에 유용합니다. 차콜과 그레이를 메인 및 배경색으로 사용하면 텍스트 가독성이 높아지고 화면 피로도가 줄어듭니다. 핵심 버튼이나 식물 알림 기능에 선명한 라임 연두색을 하이라이트로 배치하면 시인성을 극대화하여 사용자 경험을 크게 개선할 수 있습니다.
- 내추럴 빈티지 스타일의 세라믹 머그잔 — 거친 흙의 질감을 살린 도자기류 리빙 소품에 이상적입니다. 컵의 외면은 투박한 회색빛 석재 느낌으로 마감하고, 안쪽이나 손잡이에 올리브와 라임색 유약을 입히면 현대적이면서도 자연스러운 반전 매력을 줍니다. 홈카페 감성 인테리어를 연출하고 싶어 하는 세련된 소비자의 소장 욕구를 자극하는 디자인이 완성됩니다.
비추천 분야와 이유
- 영유아용 친환경 원목 교구 및 장난감 — 어린아이들의 시각 발달과 정서적 안정에는 원색 위주의 밝고 따뜻한 파스텔톤이 적합합니다. 이 색조가 가진 짙은 차콜과 어두운 올리브 그린은 아이들에게 다소 무겁고 칙칙하거나 무서운 인상을 줄 수 있습니다. 시각적 흥미를 유발해야 하는 유아용품 시장에서는 소비자들의 선택을 받기 어려운 어두운 구성입니다.
- 여성용 로맨틱 웨딩 메이크업 섀도우 팔레트 — 결혼식이나 화사한 데일리 메이크업을 원하는 여성들을 위한 뷰티 제품에는 치명적입니다. 회색조와 톤다운된 그린은 피부를 칙칙하고 생기 없어 보이게 만들며, 눈가에 올렸을 때 멍이 든 것처럼 보일 위험이 큽니다. 사랑스럽고 맑은 피부 톤을 연출해야 하는 색조 화장품의 목적과 정반대의 효과를 냅니다.
- 영양가 높은 이유식 및 유기농 아기 간식 온라인 쇼핑몰 — 신선함과 위생, 그리고 입맛을 돋우는 식욕 촉진이 생명인 식품 커머스 플랫폼에는 어울리지 않습니다. 차콜과 딥 그린, 그레이 계열은 시각적으로 음식의 신선도를 떨어뜨려 보이게 하거나 부패한 듯한 느낌을 줄 우려가 있습니다. 아기 먹거리에 필요한 따뜻하고 깨끗한 신뢰감을 주기에는 전체적인 톤이 너무 어둡고 차갑습니다.
- 스마트 헬스케어 기반의 시니어 요양 시설 가구 — 노인 환자들의 심리적 안정과 치유를 목적으로 하는 공간 및 가구 디자인에는 적절하지 않습니다. 가뜩이나 가라앉기 쉬운 요양 시설의 분위기에 차가운 그레이와 차콜이 더해지면 고립감이나 우울감을 유발할 수 있습니다. 활동성을 강조하는 라임색 역시 시니어층에게는 눈의 피로도를 높이는 요소가 될 수 있어 피하는 것이 좋습니다.
- 로맨틱 코미디 웹소설 표지 디자인 및 연재 플랫폼 — 대중적인 모바일 콘텐츠 시장에서 독자의 시선을 빠르게 사로잡아야 하는 장르물 표지에는 부적합합니다. 설렘과 달콤함을 전달해야 하는 로맨스 장르의 특성과 달리, 이 조합은 지나치게 무겁고 스릴러나 디스토피아 SF물 같은 어두운 분위기를 풍깁니다. 장르의 정체성을 왜곡하여 타깃 독자층의 유입을 방해하는 결과를 초래합니다.
팔레트가 주는 느낌
- 짙은 차콜(#040404)과 무채색의 그레이 톤(#686A69, #7C7B77)이 중심을 단단하게 잡아줍니다. 여기에 채도가 낮은 올리브 그린(#505C3D)과 시선을 사로잡는 라임 연두빛(#C3D586)이 포인트로 더해졌습니다. 전체적인 무드는 도시적인 차가움과 자연의 가공되지 않은 날것의 감성이 공존하는 느낌을 줍니다. 세련되면서도 어딘가 묵직하고 가라앉은 진중함이 느껴지며, 동시에 연두색이 주는 약간의 생동감과 트렌디함이 더해져 감각적이고 유니크한 분위기를 자아냅니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#040404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #040404onBG #505C3D
Fail2.87:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #040404onBG #686A69
AA Large3.76:1큰 텍스트 AA 기준만 충족합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #040404onBG #7C7B77
AA4.84:1일반 텍스트 AA 기준을 충족합니다.
Color 2
#C3D586와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #C3D586onBG #040404
AAA12.87:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #C3D586onBG #505C3D
AA Large4.48:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #C3D586onBG #686A69
AA Large3.42:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #C3D586onBG #7C7B77
Fail2.66:1텍스트 대비 기준에 미달합니다.
Color 3
#505C3D와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #505C3DonBG #040404
Fail2.87:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #505C3DonBG #C3D586
AA Large4.48:1큰 텍스트 AA 기준만 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #505C3DonBG #686A69
Fail1.31:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #505C3DonBG #7C7B77
Fail1.69:1텍스트 대비 기준에 미달합니다.
Color 4
#686A69와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #686A69onBG #040404
AA Large3.76:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #686A69onBG #C3D586
AA Large3.42:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #686A69onBG #505C3D
Fail1.31:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #686A69onBG #7C7B77
Fail1.29:1텍스트 대비 기준에 미달합니다.
Color 5
#7C7B77와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #7C7B77onBG #040404
AA4.84:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #7C7B77onBG #C3D586
Fail2.66:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #7C7B77onBG #505C3D
Fail1.69:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #7C7B77onBG #686A69
Fail1.29: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
#040404와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040404onBG #C3D586
|Lc| 75++77 LcWCAG 12.87:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040404onBG #505C3D
|Lc| < 30+19 LcWCAG 2.87:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040404onBG #686A69
|Lc| < 30+27 LcWCAG 3.76:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #040404onBG #7C7B77
|Lc| 30++35 LcWCAG 4.84:1
Color 2
#C3D586와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C3D586onBG #040404
|Lc| 75+-76 LcWCAG 12.87:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C3D586onBG #505C3D
|Lc| 45+-58 LcWCAG 4.48:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C3D586onBG #686A69
|Lc| 45+-51 LcWCAG 3.42:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #C3D586onBG #7C7B77
|Lc| 30+-43 LcWCAG 2.66:1
Color 3
#505C3D와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #505C3DonBG #040404
|Lc| < 30-17 LcWCAG 2.87:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #505C3DonBG #C3D586
|Lc| 45++56 LcWCAG 4.48:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #505C3DonBG #686A69
|Lc| < 30+0 LcWCAG 1.31:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #505C3DonBG #7C7B77
|Lc| < 30+14 LcWCAG 1.69:1
Color 4
#686A69와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #686A69onBG #040404
|Lc| < 30-25 LcWCAG 3.76:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #686A69onBG #C3D586
|Lc| 45++48 LcWCAG 3.42:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #686A69onBG #505C3D
|Lc| < 30+0 LcWCAG 1.31:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #686A69onBG #7C7B77
|Lc| < 30+0 LcWCAG 1.29:1
Color 5
#7C7B77와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #7C7B77onBG #040404
|Lc| 30+-32 LcWCAG 4.84:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #7C7B77onBG #C3D586
|Lc| 30++40 LcWCAG 2.66:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #7C7B77onBG #505C3D
|Lc| < 30-14 LcWCAG 1.69:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #7C7B77onBG #686A69
|Lc| < 30+0 LcWCAG 1.29:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.