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

関連記事

フォントを簡単に調べられる!Chromeの拡張機能WhatFont

どうも、べ〜やんです。 今回は、webサイトで使われているフォントを簡単に調べられるChromeの拡張機能『WhatFont』を紹介します。 WhatFontとは 『WhatFont』はwebサイトで …

大きさを測定!Google Chromeの拡張機能Page Ruler Redux

どうも、べ〜やんです。 今回は、画面上のさまざまなサイズを簡単に測定できるGoogle Chromeの拡張機能Page Ruler Reduxを紹介します。 Page Ruler Reduxとは Pa …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

日本語フリーフォントを試せる!ためしがき

どうも、べ〜やんです。 今回は、好きな文章で複数の日本語フリーフォントを一度に確認できるサービス『ためしがき』を紹介します。 ためしがきとは 引用元:ためしがき 『ためしがき』は商用利用可能な日本語の …

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

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