머티리얼 디자인 색상 팔레트 모든 음영과 강조색을 포함한 완전한 머티리얼 디자인 컬러 팔레트를 탐색하세요.

🎨

머티리얼 디자인 색상

모든 음영과 강조색을 포함한 완전한 머티리얼 디자인 컬러 팔레트를 탐색하세요.

색상 패밀리 선택

빨강, 파랑, 또는 청록과 같은 색상 패밀리를 선택하세요.

그라데이션 보기

50(가장 밝은 색)에서 900(가장 어두운 색)까지의 모든 그라데이션 및 강조 변형을 확인할 수 있습니다.

색상 복사

한 번의 클릭으로 HEX 코드를 복사할 수 있습니다.

Loading tool...

What Is 머티리얼 디자인 색상?

Material Design Colors는 Google의 Material Design 색상 시스템에 대한 완전한 참조로, 50에서 900까지의 음영과 강조 변형(A100-A700)을 갖춘 19개의 색상 패밀리를 특징으로 합니다. Material Design 팔레트는 사용자 인터페이스 디자인을 위한 균형 잡힌 포괄적인 색상 세트를 제공하기 위해 Google에서 신중하게 제작되었습니다. 각 색상 패밀리는 매우 밝은(50)부터 매우 어두운(900)까지의 범위를 제공하며, 강조 음영은 강조 요소에 대한 생생한 채도 변형을 제공합니다. 팔레트는 접근성을 고려하여 인접한 음영 사이에 명확한 대비를 갖추고 있습니다. Android 앱 개발, Material UI(React), Angular Material, Flutter 및 Material Design 지침을 따르는 웹 애플리케이션에서 널리 사용됩니다. 이 도구를 사용하면 패밀리로 브라우징할 수 있으며 모든 음영을 시각적 스트립으로 볼 수 있고任意 색상의 HEX 코드를 복사할 수 있습니다.

Why Use 머티리얼 디자인 색상?

모든 19개의 색상 패밀리가 포함된 완전한 Material Design 팔레트
50-900 및 강조 변형(A100-A700)까지의 그라데이션 제공
시각적인 색상 선택기와 빠른 탐색 기능
한 눈에 모든 변형을 볼 수 있는 그라데이션 스트립
모든 색상의 HEX 코드를 한 번의 클릭으로 복사

Common Use Cases

안드로이드 개발

구글의 디자인 가이드라인에 따라 안드로이드 앱을 위한 Material Design 색상을 선택하세요.

Material UI (React)

MUI 테마를 사용자 지정하기 위한 정확한 색상 값을 찾으세요.

플러터 개발

신뢰할 수 있는 Material Design 색상을 플러터 앱에 적용하세요.

웹 디자인

공식적인 Material Design 팔레트를 사용하여 Material Design을 기반으로 하는 웹사이트를 구축하세요.

Technical Guide

Material Design 색상 시스템은 구조화된 명명 규칙을 사용합니다: 패밀리 이름 + 음영 번호. 각 패밀리는 10개의 표준 음영(50, 100, 200...900)과 최대 4개의 강조 음영(A100, A200, A400, A700)을 갖습니다. 표준 음영은 매우 밝은(50, 배경에 적합)부터 매우 어두운(900, 텍스트에 적합)까지 진행됩니다. 강조 음영은 플로팅 액션 버튼, 상호 작용 요소 및 강조를 위한 고도로 채도 있는 변형으로 설계되었습니다. 모든 패밀리가 강조 변형을 갖는 것은 아닙니다 - 브라운, 그레이 및 블루 그레이에는 중립 색상이므로 강조 변형이 없습니다. 색상은 Material Design 3(Material You)의 HCT(색조, 채도, 톤) 색상 공간에서 설계되었으며, 이는 HSL보다 더 인식적으로 균일한 색상 램프를 제공합니다. 팔레트는 500 음영과 흰 텍스트 사이 및 밝은 음영과 어두운 텍스트 사이에 WCAG AA 대비를 보장합니다.

Tips & Best Practices

1
500번 그라데이션은 각 색상 패밀리의 '기본' 색상입니다. 이를 기본값으로 사용하세요
2
50-200번 그라데이션은 배경 및 표면에 적합합니다
3
600-900번 그라데이션은 밝은 배경의 텍스트에 적합합니다
4
강조색(A100-A700)은 FAB 및 링크와 같은 강조 요소에 사용됩니다
5
Material Design 3에서는 사용자 壁紙에서 동적 색상을 생성하는 기능을 도입했습니다. Material You를 확인하세요

Related Tools

HEX를 RGB로 변환기

라이브 미리보기 스와치와 함께 즉시 HEX 색상 코드를 RGB 값으로 변환합니다.

🎨 Color Tools

색상 선택기

HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

🎨 Color Tools

브랜드 색상 팔레트

50개 이상의 인기 브랜드와 기술 회사에서 공식적으로 제공하는 색상 팔레트를 탐색하세요.

🎨 Color Tools

테일윈드 색상 찾기

任意의 HEX 코드에 가장 가까운 테일윈드 CSS 색상 클래스를 찾아보세요.

🎨 Color Tools

iOS & 안드로이드 시스템 색상

iOS 휴먼 인터페이스와 안드로이드 머터리얼 디자인의 시스템 색상을 살펴보세요.

🎨 Color Tools

Frequently Asked Questions

Q 이것은 최신 Material Design 팔레트인가요?

이것은 Material Design 2 팔레트입니다. Material Design 3(Material You)은 사용자 壁紙에서 동적 색상을 생성하는 기능을 도입했지만, 클래식 팔레트는 여전히 표준 참조로 남아 있습니다.

Q 브라운, 그레이, 블루그레이에는 강조색이 없는데 이유가 무엇인가요?

이들은 중립적인 색상 패밀리입니다. 강조색은 매우 채도가 높고 생동감 있게 설계되어 있는데, 이는 중립적인 색상의 본질과 모순됩니다.

Q 기본 버튼에 어떤 그라데이션을 사용해야 하나요?

밝은 모드에서는 500번 또는 600번 그라데이션이 일반적으로 기본 버튼에 사용됩니다. 어두운 모드에서는 어두운 표면에서 200번 또는 300번 그라데이션을 사용하세요. 항상 대조 비율을 확인하세요.

About This Tool

머티리얼 디자인 색상 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.