Material Design LiteのカラーclassがCustomizeのどれに当たるかわかるようにした

2015/08/05 HTML5  このエントリーをはてなブックマークに追加


先日の記事「Material Design Liteの文字色・背景色変更用class名と色の見本帳」でclassをまとめたところ、「ついでに公式Customizeページの色がどれに当たるかを教えろ」と言ってきた身内がいたので、まとめたやつをブログでも共有しておきます。

わかりやすいのは上の図。
以下先日同様、表形式でまとめ。


テキスト色変更class 背景色変更class 16進数
.mdl-color-text--deep-orange.mdl-color--deep-orange #ff5722
.mdl-color-text--red.mdl-color--red #f44336
.mdl-color-text--pink-A200.mdl-color--pink-A200 #ff4081
.mdl-color-text--purple.mdl-color--purple #9c27b0
.mdl-color-text--deep-purple.mdl-color--deep-purple #673ab7
.mdl-color-text--indigo.mdl-color--indigo #3f51b5
.mdl-color-text--blue.mdl-color--blue #2196f3
.mdl-color-text--light-blue.mdl-color--light-blue #03a9f4
.mdl-color-text--cyan.mdl-color--cyan #00bcd4
.mdl-color-text--teal.mdl-color--teal #009688
.mdl-color-text--green.mdl-color--green #4caf50
.mdl-color-text--light-green.mdl-color--light-green #8bc34a
.mdl-color-text--lime.mdl-color--lime #cddc39
.mdl-color-text--yellow.mdl-color--yellow #ffeb3b
.mdl-color-text--amber.mdl-color--amber #ffc107
.mdl-color-text--orange.mdl-color--orange #ff9800
.mdl-color-text--brown.mdl-color--brown #795548
.mdl-color-text--blue-grey.mdl-color--blue-grey #607d8b
.mdl-color-text--grey.mdl-color--grey #9e9e9e


【備考】
・ソース内のclassは「.mdl-color--red」の色から始まっていますが、そのままだと並びが微妙なので、「.mdl-color--deep-orange」を先頭に持ってきています。
・同じくソース内で「.mdl-color--blue-grey」は「.mdl-color--grey」より後に出てきますが、円形の図に合わせるためにここも表では順序を入れ替えています。
・前回も言いましたが、この微妙な並び……何故ですかGoogleさん。統一して下さい、マジで(´・ω・`)

コメント

*
*

<< Material Design Liteの文字色・背景色変更用class名と色の見本帳 | CKEditorのサーバブラウザ機能で選択した画像URLをカスタマイズする >>