Material Design 색상 팔레트

HEX 코드, CSS 변수, 대비 검사가 포함된 19개 색상 가족. 색상을 클릭하여 복사하세요.

CSS 다운로드

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
흰색 텍스트 {{ whiteContrast.toFixed(1) }}:1
검정 텍스트 {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Material Design 색상 시스템이란?

Google의 Material Design 색상 시스템은 19개 색상 가족을 포함하며, 각각 10개의 주요 음영(50, 100–900)과 최대 4개의 액센트 음영(A100–A700)을 가집니다.

CSS에서 Material Design 색상을 사용하는 방법

모든 변수가 포함된 CSS 파일을 다운로드하여 프로젝트에 포함하세요. 그런 다음 var(--color-md-teal-500)과 같은 CSS 커스텀 속성으로 색상을 사용할 수 있습니다.

색상 선택 팁

  • 기본 색상(예: Teal 500)과 다른 가족의 액센트 색상을 선택하세요.
  • 밝은 음영(50–200)은 배경에, 어두운 음영(700–900)은 텍스트에 사용하세요.
  • 접근성을 위해 텍스트와 배경 간에 충분한 대비(최소 4.5:1)를 확보하세요.
  • 500 음영은 각 색상 가족의 표준 표현이며 기본 색상으로 이상적입니다.