DESIGN SERVICE

インターフェイスと配色をコード化!ColorTool

投稿日:


どうも、べ〜やんです。

今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介します。





ColorToolとは

引用元:Color Tool-Material Design

MaterialDesignのColorToolは好みのインターフェイスとカラーコードを確認してコードしてくれる便利なサービスです。

Material Design-Color Tool


使い方


カラーパネルからメインカラーを選択すると自動で明るい色、暗い色を組み合わせてくれます。

引用元:Color Tool-Material Design

インターフェイスが数種類用意されているのでイメージがしやすいです。

引用元:Color Tool-Material Design

セカンダリーやテキストのカラーを選択して組み合わせを確認できます。

引用元:Color Tool-Material Design

EXPORTからCodePenを選択してコード化ができます。

自動生成されたCodePen

おわりに


今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介しました。

Material Design-Color Tool

全体のイメージを作るのに使用しています。



-DESIGN, SERVICE
-

執筆者:


comment

関連記事

Googleアドセンス審査通過

どうも、べ〜やんです。 今回は、このブログがGoogleアドセンスの審査を通過したので、審査に通過した時点のブログの状態を紹介します。 同じようにGoogleアドセンスの審査を受けようと思っている方の …

WEBデザインができるまで

どうも、べ〜やんです。 webサイトのデザインができるまでの流れを簡単にまとめたいと思います。 webデザイナーの仕事に興味があり実際にどんな流れで仕事をしているのかを知り方にオススメです。 全体の流 …

Webデザイナーになりたい人におすすめサービス5選

どうも、べ〜やんです。 今回は、Webデザイナーを目指している方におすすめな学習サービスを5つ紹介します。 Webデザインを学べるサービスの中でも、実際に私が利用したことのあるサービスに絞って5つ紹介 …

複数のレスポンシブを同時に確認!Chromeの拡張機能ResponsiveViewer

どうも、べ〜やんです。 今回は、複数のレスポンシブを同時に確認できるChromeの拡張機能『ResponsiveViewer』を紹介します。 ResponsiveViewerとは Responsive …

フリーイラスト素材サイトISOMETRIC

どうも、べ〜やんです。 今回は、おしゃれな無料フリーイラスト素材サイト『ISOMETRIC』を紹介します。 ISOMETRICとは 引用元:ISOMETRIC 『ISOMETRIC』はおしゃれなフリー …