カラー

このテーマでは、 Material Design の Color palette を使用しています。
参照：https://material.io/design/color/#color-usage-palettes

• red
  • color：class="color-red-50"
    background-color：class="bgColor-red-50"
  • color：class="color-red-100"
    background-color：class="bgColor-red-100"
  • color：class="color-red-200"
    background-color：class="bgColor-red-200"
  • color：class="color-red-300"
    background-color：class="bgColor-red-300"
  • color：class="color-red-400"
    background-color：class="bgColor-red-400"
  • color：class="color-red-500"
    background-color：class="bgColor-red-500"
  • color：class="color-red-600"
    background-color：class="bgColor-red-600"
  • color：class="color-red-700"
    background-color：class="bgColor-red-700"
  • color：class="color-red-800"
    background-color：class="bgColor-red-800"
  • color：class="color-red-900"
    background-color：class="bgColor-red-900"
  • color：class="color-red-a100"
    background-color：class="bgColor-red-a100"
  • color：class="color-red-a200"
    background-color：class="bgColor-red-a200"
  • color：class="color-red-a400"
    background-color：class="bgColor-red-a400"
  • color：class="color-red-a700"
    background-color：class="bgColor-red-a700"
• pink
  • color：class="color-pink-50"
    background-color：class="bgColor-pink-50"
  • color：class="color-pink-100"
    background-color：class="bgColor-pink-100"
  • color：class="color-pink-200"
    background-color：class="bgColor-pink-200"
  • color：class="color-pink-300"
    background-color：class="bgColor-pink-300"
  • color：class="color-pink-400"
    background-color：class="bgColor-pink-400"
  • color：class="color-pink-500"
    background-color：class="bgColor-pink-500"
  • color：class="color-pink-600"
    background-color：class="bgColor-pink-600"
  • color：class="color-pink-700"
    background-color：class="bgColor-pink-700"
  • color：class="color-pink-800"
    background-color：class="bgColor-pink-800"
  • color：class="color-pink-900"
    background-color：class="bgColor-pink-900"
  • color：class="color-pink-a100"
    background-color：class="bgColor-pink-a100"
  • color：class="color-pink-a200"
    background-color：class="bgColor-pink-a200"
  • color：class="color-pink-a400"
    background-color：class="bgColor-pink-a400"
  • color：class="color-pink-a700"
    background-color：class="bgColor-pink-a700"
• purple
  • color：class="color-purple-50"
    background-color：class="bgColor-purple-50"
  • color：class="color-purple-100"
    background-color：class="bgColor-purple-100"
  • color：class="color-purple-200"
    background-color：class="bgColor-purple-200"
  • color：class="color-purple-300"
    background-color：class="bgColor-purple-300"
  • color：class="color-purple-400"
    background-color：class="bgColor-purple-400"
  • color：class="color-purple-500"
    background-color：class="bgColor-purple-500"
  • color：class="color-purple-600"
    background-color：class="bgColor-purple-600"
  • color：class="color-purple-700"
    background-color：class="bgColor-purple-700"
  • color：class="color-purple-800"
    background-color：class="bgColor-purple-800"
  • color：class="color-purple-900"
    background-color：class="bgColor-purple-900"
  • color：class="color-purple-a100"
    background-color：class="bgColor-purple-a100"
  • color：class="color-purple-a200"
    background-color：class="bgColor-purple-a200"
  • color：class="color-purple-a400"
    background-color：class="bgColor-purple-a400"
  • color：class="color-purple-a700"
    background-color：class="bgColor-purple-a700"
• deep-purple
  • color：class="color-deep-purple-50"
    background-color：class="bgColor-deep-purple-50"
  • color：class="color-deep-purple-100"
    background-color：class="bgColor-deep-purple-100"
  • color：class="color-deep-purple-200"
    background-color：class="bgColor-deep-purple-200"
  • color：class="color-deep-purple-300"
    background-color：class="bgColor-deep-purple-300"
  • color：class="color-deep-purple-400"
    background-color：class="bgColor-deep-purple-400"
  • color：class="color-deep-purple-500"
    background-color：class="bgColor-deep-purple-500"
  • color：class="color-deep-purple-600"
    background-color：class="bgColor-deep-purple-600"
  • color：class="color-deep-purple-700"
    background-color：class="bgColor-deep-purple-700"
  • color：class="color-deep-purple-800"
    background-color：class="bgColor-deep-purple-800"
  • color：class="color-deep-purple-900"
    background-color：class="bgColor-deep-purple-900"
  • color：class="color-deep-purple-a100"
    background-color：class="bgColor-deep-purple-a100"
  • color：class="color-deep-purple-a200"
    background-color：class="bgColor-deep-purple-a200"
  • color：class="color-deep-purple-a400"
    background-color：class="bgColor-deep-purple-a400"
  • color：class="color-deep-purple-a700"
    background-color：class="bgColor-deep-purple-a700"
• indigo
  • color：class="color-indigo-50"
    background-color：class="bgColor-indigo-50"
  • color：class="color-indigo-100"
    background-color：class="bgColor-indigo-100"
  • color：class="color-indigo-200"
    background-color：class="bgColor-indigo-200"
  • color：class="color-indigo-300"
    background-color：class="bgColor-indigo-300"
  • color：class="color-indigo-400"
    background-color：class="bgColor-indigo-400"
  • color：class="color-indigo-500"
    background-color：class="bgColor-indigo-500"
  • color：class="color-indigo-600"
    background-color：class="bgColor-indigo-600"
  • color：class="color-indigo-700"
    background-color：class="bgColor-indigo-700"
  • color：class="color-indigo-800"
    background-color：class="bgColor-indigo-800"
  • color：class="color-indigo-900"
    background-color：class="bgColor-indigo-900"
  • color：class="color-indigo-a100"
    background-color：class="bgColor-indigo-a100"
  • color：class="color-indigo-a200"
    background-color：class="bgColor-indigo-a200"
  • color：class="color-indigo-a400"
    background-color：class="bgColor-indigo-a400"
  • color：class="color-indigo-a700"
    background-color：class="bgColor-indigo-a700"
• blue
  • color：class="color-blue-50"
    background-color：class="bgColor-blue-50"
  • color：class="color-blue-100"
    background-color：class="bgColor-blue-100"
  • color：class="color-blue-200"
    background-color：class="bgColor-blue-200"
  • color：class="color-blue-300"
    background-color：class="bgColor-blue-300"
  • color：class="color-blue-400"
    background-color：class="bgColor-blue-400"
  • color：class="color-blue-500"
    background-color：class="bgColor-blue-500"
  • color：class="color-blue-600"
    background-color：class="bgColor-blue-600"
  • color：class="color-blue-700"
    background-color：class="bgColor-blue-700"
  • color：class="color-blue-800"
    background-color：class="bgColor-blue-800"
  • color：class="color-blue-900"
    background-color：class="bgColor-blue-900"
  • color：class="color-blue-a100"
    background-color：class="bgColor-blue-a100"
  • color：class="color-blue-a200"
    background-color：class="bgColor-blue-a200"
  • color：class="color-blue-a400"
    background-color：class="bgColor-blue-a400"
  • color：class="color-blue-a700"
    background-color：class="bgColor-blue-a700"
• light-blue
  • color：class="color-light-blue-50"
    background-color：class="bgColor-light-blue-50"
  • color：class="color-light-blue-100"
    background-color：class="bgColor-light-blue-100"
  • color：class="color-light-blue-200"
    background-color：class="bgColor-light-blue-200"
  • color：class="color-light-blue-300"
    background-color：class="bgColor-light-blue-300"
  • color：class="color-light-blue-400"
    background-color：class="bgColor-light-blue-400"
  • color：class="color-light-blue-500"
    background-color：class="bgColor-light-blue-500"
  • color：class="color-light-blue-600"
    background-color：class="bgColor-light-blue-600"
  • color：class="color-light-blue-700"
    background-color：class="bgColor-light-blue-700"
  • color：class="color-light-blue-800"
    background-color：class="bgColor-light-blue-800"
  • color：class="color-light-blue-900"
    background-color：class="bgColor-light-blue-900"
  • color：class="color-light-blue-a100"
    background-color：class="bgColor-light-blue-a100"
  • color：class="color-light-blue-a200"
    background-color：class="bgColor-light-blue-a200"
  • color：class="color-light-blue-a400"
    background-color：class="bgColor-light-blue-a400"
  • color：class="color-light-blue-a700"
    background-color：class="bgColor-light-blue-a700"
• cyan
  • color：class="color-cyan-50"
    background-color：class="bgColor-cyan-50"
  • color：class="color-cyan-100"
    background-color：class="bgColor-cyan-100"
  • color：class="color-cyan-200"
    background-color：class="bgColor-cyan-200"
  • color：class="color-cyan-300"
    background-color：class="bgColor-cyan-300"
  • color：class="color-cyan-400"
    background-color：class="bgColor-cyan-400"
  • color：class="color-cyan-500"
    background-color：class="bgColor-cyan-500"
  • color：class="color-cyan-600"
    background-color：class="bgColor-cyan-600"
  • color：class="color-cyan-700"
    background-color：class="bgColor-cyan-700"
  • color：class="color-cyan-800"
    background-color：class="bgColor-cyan-800"
  • color：class="color-cyan-900"
    background-color：class="bgColor-cyan-900"
  • color：class="color-cyan-a100"
    background-color：class="bgColor-cyan-a100"
  • color：class="color-cyan-a200"
    background-color：class="bgColor-cyan-a200"
  • color：class="color-cyan-a400"
    background-color：class="bgColor-cyan-a400"
  • color：class="color-cyan-a700"
    background-color：class="bgColor-cyan-a700"
• teal
  • color：class="color-teal-50"
    background-color：class="bgColor-teal-50"
  • color：class="color-teal-100"
    background-color：class="bgColor-teal-100"
  • color：class="color-teal-200"
    background-color：class="bgColor-teal-200"
  • color：class="color-teal-300"
    background-color：class="bgColor-teal-300"
  • color：class="color-teal-400"
    background-color：class="bgColor-teal-400"
  • color：class="color-teal-500"
    background-color：class="bgColor-teal-500"
  • color：class="color-teal-600"
    background-color：class="bgColor-teal-600"
  • color：class="color-teal-700"
    background-color：class="bgColor-teal-700"
  • color：class="color-teal-800"
    background-color：class="bgColor-teal-800"
  • color：class="color-teal-900"
    background-color：class="bgColor-teal-900"
  • color：class="color-teal-a100"
    background-color：class="bgColor-teal-a100"
  • color：class="color-teal-a200"
    background-color：class="bgColor-teal-a200"
  • color：class="color-teal-a400"
    background-color：class="bgColor-teal-a400"
  • color：class="color-teal-a700"
    background-color：class="bgColor-teal-a700"
• green
  • color：class="color-green-50"
    background-color：class="bgColor-green-50"
  • color：class="color-green-100"
    background-color：class="bgColor-green-100"
  • color：class="color-green-200"
    background-color：class="bgColor-green-200"
  • color：class="color-green-300"
    background-color：class="bgColor-green-300"
  • color：class="color-green-400"
    background-color：class="bgColor-green-400"
  • color：class="color-green-500"
    background-color：class="bgColor-green-500"
  • color：class="color-green-600"
    background-color：class="bgColor-green-600"
  • color：class="color-green-700"
    background-color：class="bgColor-green-700"
  • color：class="color-green-800"
    background-color：class="bgColor-green-800"
  • color：class="color-green-900"
    background-color：class="bgColor-green-900"
  • color：class="color-green-a100"
    background-color：class="bgColor-green-a100"
  • color：class="color-green-a200"
    background-color：class="bgColor-green-a200"
  • color：class="color-green-a400"
    background-color：class="bgColor-green-a400"
  • color：class="color-green-a700"
    background-color：class="bgColor-green-a700"
• light-green
  • color：class="color-light-green-50"
    background-color：class="bgColor-light-green-50"
  • color：class="color-light-green-100"
    background-color：class="bgColor-light-green-100"
  • color：class="color-light-green-200"
    background-color：class="bgColor-light-green-200"
  • color：class="color-light-green-300"
    background-color：class="bgColor-light-green-300"
  • color：class="color-light-green-400"
    background-color：class="bgColor-light-green-400"
  • color：class="color-light-green-500"
    background-color：class="bgColor-light-green-500"
  • color：class="color-light-green-600"
    background-color：class="bgColor-light-green-600"
  • color：class="color-light-green-700"
    background-color：class="bgColor-light-green-700"
  • color：class="color-light-green-800"
    background-color：class="bgColor-light-green-800"
  • color：class="color-light-green-900"
    background-color：class="bgColor-light-green-900"
  • color：class="color-light-green-a100"
    background-color：class="bgColor-light-green-a100"
  • color：class="color-light-green-a200"
    background-color：class="bgColor-light-green-a200"
  • color：class="color-light-green-a400"
    background-color：class="bgColor-light-green-a400"
  • color：class="color-light-green-a700"
    background-color：class="bgColor-light-green-a700"
• lime
  • color：class="color-lime-50"
    background-color：class="bgColor-lime-50"
  • color：class="color-lime-100"
    background-color：class="bgColor-lime-100"
  • color：class="color-lime-200"
    background-color：class="bgColor-lime-200"
  • color：class="color-lime-300"
    background-color：class="bgColor-lime-300"
  • color：class="color-lime-400"
    background-color：class="bgColor-lime-400"
  • color：class="color-lime-500"
    background-color：class="bgColor-lime-500"
  • color：class="color-lime-600"
    background-color：class="bgColor-lime-600"
  • color：class="color-lime-700"
    background-color：class="bgColor-lime-700"
  • color：class="color-lime-800"
    background-color：class="bgColor-lime-800"
  • color：class="color-lime-900"
    background-color：class="bgColor-lime-900"
  • color：class="color-lime-a100"
    background-color：class="bgColor-lime-a100"
  • color：class="color-lime-a200"
    background-color：class="bgColor-lime-a200"
  • color：class="color-lime-a400"
    background-color：class="bgColor-lime-a400"
  • color：class="color-lime-a700"
    background-color：class="bgColor-lime-a700"
• yellow
  • color：class="color-yellow-50"
    background-color：class="bgColor-yellow-50"
  • color：class="color-yellow-100"
    background-color：class="bgColor-yellow-100"
  • color：class="color-yellow-200"
    background-color：class="bgColor-yellow-200"
  • color：class="color-yellow-300"
    background-color：class="bgColor-yellow-300"
  • color：class="color-yellow-400"
    background-color：class="bgColor-yellow-400"
  • color：class="color-yellow-500"
    background-color：class="bgColor-yellow-500"
  • color：class="color-yellow-600"
    background-color：class="bgColor-yellow-600"
  • color：class="color-yellow-700"
    background-color：class="bgColor-yellow-700"
  • color：class="color-yellow-800"
    background-color：class="bgColor-yellow-800"
  • color：class="color-yellow-900"
    background-color：class="bgColor-yellow-900"
  • color：class="color-yellow-a100"
    background-color：class="bgColor-yellow-a100"
  • color：class="color-yellow-a200"
    background-color：class="bgColor-yellow-a200"
  • color：class="color-yellow-a400"
    background-color：class="bgColor-yellow-a400"
  • color：class="color-yellow-a700"
    background-color：class="bgColor-yellow-a700"
• amber
  • color：class="color-amber-50"
    background-color：class="bgColor-amber-50"
  • color：class="color-amber-100"
    background-color：class="bgColor-amber-100"
  • color：class="color-amber-200"
    background-color：class="bgColor-amber-200"
  • color：class="color-amber-300"
    background-color：class="bgColor-amber-300"
  • color：class="color-amber-400"
    background-color：class="bgColor-amber-400"
  • color：class="color-amber-500"
    background-color：class="bgColor-amber-500"
  • color：class="color-amber-600"
    background-color：class="bgColor-amber-600"
  • color：class="color-amber-700"
    background-color：class="bgColor-amber-700"
  • color：class="color-amber-800"
    background-color：class="bgColor-amber-800"
  • color：class="color-amber-900"
    background-color：class="bgColor-amber-900"
  • color：class="color-amber-a100"
    background-color：class="bgColor-amber-a100"
  • color：class="color-amber-a200"
    background-color：class="bgColor-amber-a200"
  • color：class="color-amber-a400"
    background-color：class="bgColor-amber-a400"
  • color：class="color-amber-a700"
    background-color：class="bgColor-amber-a700"
• orange
  • color：class="color-orange-50"
    background-color：class="bgColor-orange-50"
  • color：class="color-orange-100"
    background-color：class="bgColor-orange-100"
  • color：class="color-orange-200"
    background-color：class="bgColor-orange-200"
  • color：class="color-orange-300"
    background-color：class="bgColor-orange-300"
  • color：class="color-orange-400"
    background-color：class="bgColor-orange-400"
  • color：class="color-orange-500"
    background-color：class="bgColor-orange-500"
  • color：class="color-orange-600"
    background-color：class="bgColor-orange-600"
  • color：class="color-orange-700"
    background-color：class="bgColor-orange-700"
  • color：class="color-orange-800"
    background-color：class="bgColor-orange-800"
  • color：class="color-orange-900"
    background-color：class="bgColor-orange-900"
  • color：class="color-orange-a100"
    background-color：class="bgColor-orange-a100"
  • color：class="color-orange-a200"
    background-color：class="bgColor-orange-a200"
  • color：class="color-orange-a400"
    background-color：class="bgColor-orange-a400"
  • color：class="color-orange-a700"
    background-color：class="bgColor-orange-a700"
• deep-orange
  • color：class="color-deep-orange-50"
    background-color：class="bgColor-deep-orange-50"
  • color：class="color-deep-orange-100"
    background-color：class="bgColor-deep-orange-100"
  • color：class="color-deep-orange-200"
    background-color：class="bgColor-deep-orange-200"
  • color：class="color-deep-orange-300"
    background-color：class="bgColor-deep-orange-300"
  • color：class="color-deep-orange-400"
    background-color：class="bgColor-deep-orange-400"
  • color：class="color-deep-orange-500"
    background-color：class="bgColor-deep-orange-500"
  • color：class="color-deep-orange-600"
    background-color：class="bgColor-deep-orange-600"
  • color：class="color-deep-orange-700"
    background-color：class="bgColor-deep-orange-700"
  • color：class="color-deep-orange-800"
    background-color：class="bgColor-deep-orange-800"
  • color：class="color-deep-orange-900"
    background-color：class="bgColor-deep-orange-900"
  • color：class="color-deep-orange-a100"
    background-color：class="bgColor-deep-orange-a100"
  • color：class="color-deep-orange-a200"
    background-color：class="bgColor-deep-orange-a200"
  • color：class="color-deep-orange-a400"
    background-color：class="bgColor-deep-orange-a400"
  • color：class="color-deep-orange-a700"
    background-color：class="bgColor-deep-orange-a700"
• brown
  • color：class="color-brown-50"
    background-color：class="bgColor-brown-50"
  • color：class="color-brown-100"
    background-color：class="bgColor-brown-100"
  • color：class="color-brown-200"
    background-color：class="bgColor-brown-200"
  • color：class="color-brown-300"
    background-color：class="bgColor-brown-300"
  • color：class="color-brown-400"
    background-color：class="bgColor-brown-400"
  • color：class="color-brown-500"
    background-color：class="bgColor-brown-500"
  • color：class="color-brown-600"
    background-color：class="bgColor-brown-600"
  • color：class="color-brown-700"
    background-color：class="bgColor-brown-700"
  • color：class="color-brown-800"
    background-color：class="bgColor-brown-800"
  • color：class="color-brown-900"
    background-color：class="bgColor-brown-900"
• grey
  • color：class="color-grey-50"
    background-color：class="bgColor-grey-50"
  • color：class="color-grey-100"
    background-color：class="bgColor-grey-100"
  • color：class="color-grey-200"
    background-color：class="bgColor-grey-200"
  • color：class="color-grey-300"
    background-color：class="bgColor-grey-300"
  • color：class="color-grey-400"
    background-color：class="bgColor-grey-400"
  • color：class="color-grey-500"
    background-color：class="bgColor-grey-500"
  • color：class="color-grey-600"
    background-color：class="bgColor-grey-600"
  • color：class="color-grey-700"
    background-color：class="bgColor-grey-700"
  • color：class="color-grey-800"
    background-color：class="bgColor-grey-800"
  • color：class="color-grey-900"
    background-color：class="bgColor-grey-900"
• blue-grey
  • color：class="color-blue-grey-50"
    background-color：class="bgColor-blue-grey-50"
  • color：class="color-blue-grey-100"
    background-color：class="bgColor-blue-grey-100"
  • color：class="color-blue-grey-200"
    background-color：class="bgColor-blue-grey-200"
  • color：class="color-blue-grey-300"
    background-color：class="bgColor-blue-grey-300"
  • color：class="color-blue-grey-400"
    background-color：class="bgColor-blue-grey-400"
  • color：class="color-blue-grey-500"
    background-color：class="bgColor-blue-grey-500"
  • color：class="color-blue-grey-600"
    background-color：class="bgColor-blue-grey-600"
  • color：class="color-blue-grey-700"
    background-color：class="bgColor-blue-grey-700"
  • color：class="color-blue-grey-800"
    background-color：class="bgColor-blue-grey-800"
  • color：class="color-blue-grey-900"
    background-color：class="bgColor-blue-grey-900"
• white & black
  • color：class="color-white"
    background-color：class="bgColor-white"
  • color：class="color-black"
    background-color：class="bgColor-black"