Color 1 on Color 2
대비 샘플 텍스트
Text #6FBCBEonBG #D5DDDD
Fail1.58:1텍스트 대비 기준에 미달합니다.
팔레트 정보
Aqua Slate Harbor
추천 분야와 이유
- 수분 크림 온라인 상세 페이지 — 아쿠아 블루와 연한 그레이는 수분 크림, 젤 크림, 민감성 피부 보습 제품의 촉촉하고 깨끗한 이미지를 직관적으로 보여 줍니다. 딥 차콜은 제품명과 성분 정보를 선명하게 받쳐 주며, 틸 계열은 피부 진정, 쿨링 케어, 데일리 스킨케어 키워드와 잘 연결됩니다.
- 해양 플라스틱 재활용 텀블러 — 블루 그린과 차콜 조합은 해양 플라스틱 재활용, 친환경 텀블러, 지속가능한 생활용품의 메시지를 설득력 있게 전달합니다. 밝은 아쿠아는 바다와 물의 이미지를 만들고, 어두운 그레이는 재활용 소재의 견고함을 강조합니다. 에코 굿즈, 제로웨이스트 선물 키워드에 적합합니다.
- 스마트 공기청정기 앱 UI — 아쿠아와 그레이 톤은 스마트 공기청정기, 실내 공기질 모니터링, IoT 가전 앱에서 청정함과 기술적 신뢰감을 동시에 줍니다. 어두운 차콜은 수치, 그래프, 상태 표시의 가독성을 높이고, 틸 포인트는 필터 상태와 공기질 개선 알림을 차분하게 강조하기 좋습니다.
- 치과 스케일링 예약 페이지 — 밝은 아쿠아와 실버 그레이는 치과 스케일링, 구강 검진, 치아 관리 예약 페이지에서 위생적이고 전문적인 이미지를 만듭니다. 짙은 차콜은 의료 정보와 가격 안내를 안정적으로 보여 주며, 블루 그린 계열은 청결, 상쾌함, 예방 진료 키워드를 자연스럽게 강화합니다.
- 방수 블루투스 스피커 패키지 — 아쿠아와 딥 틸은 방수 블루투스 스피커, 샤워 스피커, 아웃도어 음향기기의 물과 연결된 기능을 잘 보여 줍니다. 차콜 그레이는 전자제품 패키지의 견고하고 세련된 인상을 더하고, 밝은 포인트 컬러는 휴대용 스피커, 캠핑 음악, 생활방수 키워드를 돋보이게 합니다.
비추천 분야와 이유
- 전통 한과 선물세트 패키지 — 전통 한과 선물세트는 꿀, 곡물, 유과, 약과처럼 따뜻한 재료감과 명절 선물 이미지를 강조해야 합니다. 이 색 조합은 차갑고 금속적인 인상이 강해 한식 디저트, 설 선물세트, 프리미엄 한과 키워드에 필요한 고소함과 정겨운 분위기를 충분히 전달하기 어렵습니다.
- 가을 니트 원피스 쇼핑몰 배너 — 가을 니트 원피스 배너는 포근한 촉감, 브라운 계열 스타일링, 따뜻한 계절감을 보여 주는 색이 효과적입니다. 아쿠아와 차콜 중심의 팔레트는 시원하고 습도 낮은 인상을 주어 여성 니트 원피스, 가을 데일리룩, 데이트룩 키워드의 부드러운 온기를 약하게 만들 수 있습니다.
- 매운 닭발 배달 앱 썸네일 — 매운 닭발 배달 앱 썸네일은 빨강, 주황, 검정처럼 매운맛과 불맛을 즉각적으로 전달하는 색이 중요합니다. 이 팔레트는 물과 공기, 클린 테크 이미지를 먼저 떠올리게 하므로 야식 추천, 매운 닭발, 배달 음식 프로모션에서 식욕과 자극적인 맛 표현이 약해집니다.
- 키즈 놀이방 벽지 디자인 — 키즈 놀이방 벽지는 밝은 원색, 부드러운 파스텔, 귀여운 패턴으로 어린이의 흥미와 안정감을 함께 만들어야 합니다. 차콜과 딥 틸의 비중이 높으면 공간이 차갑고 어른스러워 보일 수 있습니다. 유아 놀이방, 어린이 인테리어, 키즈룸 꾸미기에는 즐거움이 부족합니다.
- 로맨틱 웨딩 부케 홍보 카드 — 웨딩 부케 홍보 카드는 생화의 화사함, 순백 드레스, 로맨틱한 예식 분위기를 밝고 부드럽게 보여 주어야 합니다. 이 색상은 시원하고 도시적인 인상이 강해 장미 부케, 작약 부케, 웨딩 플라워 상담 카드에서 필요한 따뜻한 설렘과 꽃의 생동감을 약하게 만들 수 있습니다.
팔레트가 주는 느낌
- 밝은 아쿠아 블루가 깨끗하고 시원한 첫인상을 만들고, 딥 차콜과 어두운 틸 그린이 전체 분위기를 단단하게 잡아 주는 팔레트입니다. 연한 그레이는 여백과 가독성을 확보하고, 블루 그린 계열은 물, 유리, 금속, 디지털 화면을 떠올리게 합니다. 전체적으로 차갑고 정돈된 인상이 강하지만, 완전히 기계적이기보다는 해안 도시의 건물, 클린 테크 사무실, 수분감 있는 스킨케어 제품처럼 신뢰감과 청결함을 함께 전달합니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#6FBCBE와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #6FBCBEonBG #24292C
AA6.73:1일반 텍스트 AA 기준을 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #6FBCBEonBG #336C70
Fail2.73:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #6FBCBEonBG #454F50
AA Large3.86:1큰 텍스트 AA 기준만 충족합니다.
Color 2
#D5DDDD와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #D5DDDDonBG #6FBCBE
Fail1.58:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #D5DDDDonBG #24292C
AAA10.65:1일반 텍스트 AAA 기준을 충족합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #D5DDDDonBG #336C70
AA Large4.32:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #D5DDDDonBG #454F50
AA6.12:1일반 텍스트 AA 기준을 충족합니다.
Color 3
#24292C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #24292ConBG #6FBCBE
AA6.73:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #24292ConBG #D5DDDD
AAA10.65:1일반 텍스트 AAA 기준을 충족합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #24292ConBG #336C70
Fail2.46:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #24292ConBG #454F50
Fail1.74:1텍스트 대비 기준에 미달합니다.
Color 4
#336C70와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #336C70onBG #6FBCBE
Fail2.73:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #336C70onBG #D5DDDD
AA Large4.32:1큰 텍스트 AA 기준만 충족합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #336C70onBG #24292C
Fail2.46:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #336C70onBG #454F50
Fail1.42:1텍스트 대비 기준에 미달합니다.
Color 5
#454F50와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #454F50onBG #6FBCBE
AA Large3.86:1큰 텍스트 AA 기준만 충족합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #454F50onBG #D5DDDD
AA6.12:1일반 텍스트 AA 기준을 충족합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #454F50onBG #24292C
Fail1.74:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #454F50onBG #336C70
Fail1.42: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
#6FBCBE와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #6FBCBEonBG #D5DDDD
|Lc| < 30+22 LcWCAG 1.58:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #6FBCBEonBG #24292C
|Lc| 45+-56 LcWCAG 6.73:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #6FBCBEonBG #336C70
|Lc| 30+-36 LcWCAG 2.73:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #6FBCBEonBG #454F50
|Lc| 45+-45 LcWCAG 3.86:1
Color 2
#D5DDDD와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D5DDDDonBG #6FBCBE
|Lc| < 30-25 LcWCAG 1.58:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D5DDDDonBG #24292C
|Lc| 75+-81 LcWCAG 10.65:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D5DDDDonBG #336C70
|Lc| 60+-62 LcWCAG 4.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #D5DDDDonBG #454F50
|Lc| 60+-71 LcWCAG 6.12:1
Color 3
#24292C와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #24292ConBG #6FBCBE
|Lc| 45++57 LcWCAG 6.73:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #24292ConBG #D5DDDD
|Lc| 75++81 LcWCAG 10.65:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #24292ConBG #336C70
|Lc| < 30+20 LcWCAG 2.46:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #24292ConBG #454F50
|Lc| < 30+10 LcWCAG 1.74:1
Color 4
#336C70와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #336C70onBG #6FBCBE
|Lc| 30++35 LcWCAG 2.73:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #336C70onBG #D5DDDD
|Lc| 45++59 LcWCAG 4.32:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #336C70onBG #24292C
|Lc| < 30-19 LcWCAG 2.46:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #336C70onBG #454F50
|Lc| < 30-8 LcWCAG 1.42:1
Color 5
#454F50와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #454F50onBG #6FBCBE
|Lc| 30++44 LcWCAG 3.86:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #454F50onBG #D5DDDD
|Lc| 60++68 LcWCAG 6.12:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #454F50onBG #24292C
|Lc| < 30-10 LcWCAG 1.74:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #454F50onBG #336C70
|Lc| < 30+7 LcWCAG 1.42:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.