マテリアルデザインのカラーパレットを使いたいなら material-colors が便利

週末の自由工作でマテリアルデザインのカラーパレットを使いたいんだけど、さすがにこれを自分で CSS ファイルに書くのはダルイなぁと。

Color - Style - Google design guidelines

material-colors

だけど、同じことは他にも考えている人がいるはずで、誰かがつくってくれてるんじゃない？と思ったら、あった。（ありがとうございます）

• shuhei/material-colors

使い方

CSS, Sass, SCSS, Less, Stylus, JSON, JavaScript 等いろんな言語から使えるようになっている。例えば SCSS からは $md-red-100 とか定義された変数を使う感じ。

中身は dist 配下を見れば分かる。

• https://github.com/shuhei/material-colors/tree/master/dist

僕の場合は SCSS だけで事足りたので、それだけ使うようにしている。

bower install material-colors --save

// bower.json
{
  ...
  "dependencies": {
    "material-colors": "~1.0.0"
  },
  "overrides": {
    "material-colors": {
      "main": [
        "dist/colors.scss"
      ]
    }
  }
}

その他

同じ用途で下記も見つけた。どちらか好きな方を選べば良いと思う。

• danlevan/google-material-color