와플앱 도구 안내

머티리얼 색상 팔레트

  • 머티리얼 색상 팔레트는 색상이나 CSS 디자인 값을 만들고 미리보는 도구입니다.
  • 색상, 크기, 그림자, 테두리, 그라데이션 같은 옵션을 입력해 시각 결과를 생성합니다.
  • 미리보기와 코드 값을 확인해 웹 디자인이나 콘텐츠 제작에 활용할 수 있습니다.
관련 도구 그라데이션 생성기 그림자 생성기 색상 팔레트 명도대비 검사 랜덤 색상 생성 색상 혼합기

머티리얼 색상 팔레트

기준색을 바탕으로 50부터 900까지 단계별 색상 팔레트를 만들고, UI에 바로 넣기 좋은 CSS 변수 형태로 정리합니다.

색상 적용 미리보기 500 단계는 주 색상, 700 단계는 강조색, 50 단계는 부드러운 배경으로 쓰기 좋습니다.
카드 배경연한 단계와 진한 단계의 조합을 빠르게 확인합니다.
Action 

    
색 단계는 브라우저에서 계산됩니다. 실제 프로젝트에서는 500을 기본 버튼색, 600~700을 hover/active 색으로 쓰면 안정적입니다.