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

関連記事

簡単にQRコードを自動生成する

どうも、べ〜やんです。 今回は、簡単にQRコードを自動生成してくれるサイトを紹介します。 しかも無料です。 QRコードとは ご存知だとは思いますが、QRコードとはこれです↓ beeyanblog QR …

アニメーション背景を作成!Animated CSS Background Generator

どうも、べ〜やんです。 今回は、アニメーション背景を作成してくれる『Animated CSS Background Generator』を紹介します。 Animated CSS Background …

Googleアドセンス審査通過

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

便利!Boostnoteの使い方

どうも、べ〜やんです。 今回は、プログラマ向けのメモ帳アプリBoostnoteを紹介します。 Boostnoteとは Boostnoteとは、日本製のプログラマ向けのメモ帳アプリです。 Boostno …

背景素材を生成!Cool Backgrounds

どうも、べ〜やんです。 今回は、背景素材を生成してくれるCool Backgroundsを紹介します。 Cool Backgroundsとは 引用元:Cool Backgrounds Cool Bac …