Google の Material Design 良いですよね。特にカラーパレットがいいなと思いました。
これを使いたい！と思うんですが、16 進数のカラーコードをコピペするのも面倒だし、コピペ先では何の色だったかわからなくなってしまいます。
そこで CSS, Sass, Scss, Less, Stylus で簡単に使えるように、ライブラリ（？）を作ってみました。
使い方
dist ディレクトリから直接ダウンロードしてもいいですし、Bower を利用しているなら bower install material-colors でインストールできます。
Sass, Scss, Less, Stylus の変数
一番わかりやすい使い方は、Sass, Scss, Less, Stylus の変数。colors.sass, colors.scss, colors.less に $md-red-500, $md-blue-a100 のような名前の変数が用意されているので、好きに使ってください。頭につくのは Less では $ じゃなくて @, Stylus では何もなしです。
CSS 用クラス
CSS には変数がないので、colors.css に color, background-color, border-color に SVG の fill, stroke 用にそれぞれクラスを用意しています。プロトタイピングには使えるかも。
<p class="color-blue-700 bg-green-100 border-yellow-300">Hello, World!</p>
<svg>
<circle cx="100" cy="100" r="40" class="fill-purple-200 stroke-red-600" />
</svg>
裏側
ちょうど Grunt を勉強していたところだったので、ファイルの生成を Grunt を使って行うようにしています。Material Design のサイトから色を抜き出して JSON を作るタスクと JSON からテンプレートを使って各フォーマットを出力するタスクを作りました。
Grunt のテンプレート機能は強力ですし、同期的な API は Node っぽくないですが使いやすいですね。
おわり
正直なところ CSS のは文字の色や背景色毎にクラスを設定しないといけないので微妙ではありますが、Sass, Scss, Less に関しては結構便利なんじゃないかと思います。
ぜひ使ってみてください！