Material Design 색상 선택기
Material Design 팔레트는 19개 색상 계열, 빨강, 분홍, 보라부터 회색, 청회색까지, 을 정의하며, 각각 음영 50(옅음)부터 900(거의 검정)까지의 램프와 선택적 강조 음영 A100–A700을 가집니다. 이 선택기는 모든 스와치를 격자로 배치하고, 어떤 값이든 Tailwind, CSS 변수, iOS UIColor, Android 색상 리소스용으로 HEX, RGB, HSL, Material 토큰 이름으로 복사할 수 있게 합니다.
팔레트 사용 방법
-
1
격자 살펴보기
계열은 왼쪽에 세로로, 음영은 위쪽에 50부터 900까지 가로로 펼쳐집니다.
-
2
스와치 탭
HEX, RGB, HSL, 표준 Material 토큰 이름(예: Indigo 500)을 봅니다.
-
3
필요한 형식 복사
한 번 클릭으로 정확한 문자열을 복사합니다: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.
-
4
대비 확인
패널이 흰색과 검정에 대한 WCAG 대비비를 보여줘 접근 가능한 텍스트 색을 고를 수 있습니다.
음영 사다리
| 음영 | 용도 |
|---|---|
| 50 | 호버 배경, 옅은 표면 |
| 100 | 칩 배경, 낮은 강조 채움 |
| 200 | 비활성 상태, 보조 표면 |
| 300 | 테두리, 구분선 |
| 400 | 밝은 배경의 보조 텍스트 |
| 500 | 기본 / 주요 색, 기준선 |
| 600 | 인터랙티브 상태(호버, 누름) |
| 700 | 헤더, 강한 강조 |
| 800 | 밝은 배경의 어두운 텍스트 |
| 900 | 최고 대비 요소(거의 검정) |
| A100 | 밝은 액센트 |
| A200 | 기본보다 밝은 액센트 |
| A400 | 액센트(흔히 “밝은” 브랜드 하이라이트) |
| A700 | 진한 액센트 |
Material 팔레트의 계열
빨강, 분홍, 보라, 진보라, 인디고, 파랑, 연파랑, 시안, 틸, 초록, 연초록, 라임, 노랑, 앰버, 주황, 진주황, 갈색, 회색, 청회색.
갈색, 회색, 청회색은 강조 음영이 없습니다, 중립 계열입니다.
주요 색 고르기
스펙은 주요 색으로 500, 어두운 변형(Android 상태 표시줄에 사용)으로 700, 보조 액션용 액센트로 A200이나 A400을 제안합니다. 이는 규칙이 아니라 관례입니다, 최신 Material 3(다이내믹 컬러)는 고정 램프에서 고르지 않고 단일 시드 색에서 팔레트를 도출합니다.
접근성 체크포인트
- 본문 텍스트: 배경 대비비 ≥ 4.5:1 (WCAG AA).
- 큰 텍스트(18 pt+ 굵게 또는 24 pt+ 보통): ≥ 3:1.
- UI 컴포넌트와 그래픽 객체: ≥ 3:1.
팔레트는 기본적으로 대비 안전하지 않습니다. 흰색 위 노랑 500은 WCAG를 크게 실패합니다. 조합을 배포하기 전에 항상 비율을 확인하세요, 선택기가 인라인으로 보여줍니다.
지원 형식
- HEX:
#3F51B5(Indigo 500). - RGB:
rgb(63 81 181)(최신 구문) 또는rgb(63, 81, 181)(레거시). - HSL:
hsl(231 48% 48%). - Material 토큰:
Indigo 500, 디자인 문서와 Figma에 편리. - Tailwind:
indigo-500, Tailwind 테마가 Material 스케일을 쓰면 class 속성에 바로. - Android color XML:
<color name="indigo_500">#FF3F51B5</color>, ARGB 형식. - iOS UIColor:
UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).
자주 묻는 질문
이 도구는 Google이 2014년에 공개하고 이후 Material Design 2 사이트에 문서화한 고정 팔레트를 재현합니다. 기준 색상에서 Material 3 톤 팔레트를 생성하지는 않습니다. 기존 번호 색상과 강조 색상을 확인할 때 사용하세요.
갈색, 회색, 청회색은 중립색이며 강조 색 조합에 참여하지 않습니다. 스펙이 이들에 대해 A100–A700을 단순히 생략합니다.
Tailwind의 기본 팔레트는 Material에서 영감을 받았지만 동일하지 않습니다. 정확한 Material 색을 원하면 theme.extend.colors를 Material 값으로 확장하고 class 이름에서 material-indigo-500으로 참조하세요.
관례상으로는 그렇지만, 700이나 액센트를 주요 색으로 쓰는 것을 막는 것은 없습니다. 500 관례는 양방향으로 8단계 변형이 있는 믿을 만한 기준 음영을 갖는 것에 관한 것입니다.
관련 도구
PNG를 SVG로 벡터화
브라우저에서 PNG 래스터 이미지를 SVG 패스로 변환합니다. 로고, 아이콘, 선화에 적합하며 임계값, 색상 수, 스무딩을 조절할 수 있습니다.
티어 리스트 만들기
텍스트와 기기 내 이미지로 비공개 티어 리스트를 만드세요. 행을 꾸미고 드래그나 키보드로 순위를 정한 뒤 JSON, PNG 또는 SVG로 내보낼 수 있습니다.
QR 코드 생성기
텍스트 또는 URL로 브라우저 안에서 QR 코드를 만들고 PNG로 다운로드하세요.
GIF 제작기
이미지 시퀀스나 짧은 영상을 애니메이션 GIF로 변환합니다. 내보내기 전에 프레임률, 반복 횟수, 크기를 조정하세요.
그래피티 글자 생성기
태그, 버블, 블록, 스텐실, 네온, 와일드 효과로 글자를 꾸미세요. 색상을 조절하고 브라우저에서 PNG 또는 SVG로 내보낼 수 있습니다.
대량 이미지 리사이저
여러 이미지를 끌어다 놓고 목표 크기에 맞추거나 늘린 뒤 JPG, PNG, WebP 파일을 하나의 ZIP으로 내보냅니다. 처리는 브라우저 안에서 끝납니다.