![](https://beeyanblog.com/wp-content/uploads/2019/10/desk-3139127_1280-1024x659.jpg)
どうも、べ〜やんです。
今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介します。
![](http://image.moshimo.com/af-img/0833/000000023611.png)
目次
ColorToolとは
![](https://beeyanblog.com/wp-content/uploads/2019/11/998d3b3817e49e5a575aa95ae28e4217-1024x556.png)
MaterialDesignのColorToolは好みのインターフェイスとカラーコードを確認してコードしてくれる便利なサービスです。
使い方
カラーパネルからメインカラーを選択すると自動で明るい色、暗い色を組み合わせてくれます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/31c64a58b499e5e6edae8250ce32ec39-1024x554.png)
インターフェイスが数種類用意されているのでイメージがしやすいです。
![](https://beeyanblog.com/wp-content/uploads/2019/11/5bc98e433f3cda6b5845c8ce3bfe6877-1024x553.png)
セカンダリーやテキストのカラーを選択して組み合わせを確認できます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/0bc0cca49014eb14c273007d953e6330-1024x557.png)
EXPORTからCodePenを選択してコード化ができます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/2604f0145b6d404193d9d6c22a67bb2b-1024x476.png)
おわりに
今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介しました。
全体のイメージを作るのに使用しています。
![](http://image.moshimo.com/af-img/0833/000000023611.png)