マテリアルデザイン系カラーツールまとめ

※ アフィリエイト広告を利用しています。
graphic-color

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

この記事では、マテリアルデザイン系
無料カラーツールをまとめています。

スポンサーリンク

マテリアルデザイン系カラーツール

「マテリアルデザイン系カラーツール」

 ジャンル  カラーツール名
 マテリアルデザイン系
 ① 〜 ⑤
 Random Material
Palette Generator
 Material Design Colors
 Colors – Material-UI
 Material Mixer
 Material Design Palette

Googleのマテリアルデザインで
採用されている配色を用いたツール。

ランダムに色を表示してくれたり、
UIデザイン等で利用しやすい色も
すぐに分かったりと何かと便利です。

それにHEX値をコピー&ペーストで、
簡単にマテリアルカラーを利用可能。

スポンサーリンク

① Random Material Palette Generator

random material palette generator - マテリアルデザイン系カラーツールまとめ

Random Material Palette Generatorは、
クリックするだけでマテリアル(素材)から
自動でカラーを選んでくれるツール。

 特徴 ・3色の配色パターン見本サイト
・ランダムでカラーを決めれる。
・ワンクリックする度に下に配色を保存。
・5つのテンプレートに切り替え可能。
 その他 ・5つのテンプレート
「Text template」「Card template」
「Vertical template」「Circular template」
「Logo Threebu template」

Random Material Palette Generator

② Material Design Colors

material design colors - マテリアルデザイン系カラーツールまとめ

Material Design Colorsは、
Googleデザインガイドの
「マテリアルデザイン」の色をまとめて
閲覧できるカラーパレットサイトの1つ。

 特徴 ・マテリアルデザインのカラー参考サイト
・メインカラーとアクセントを一度に
 確認できるのでデザイン作成にも便利。
 その他  

Material Design Colors

③ Colors – Material-UI

colors material ui - マテリアルデザイン系カラーツールまとめ

Colors – Material-UIも、
Googleデザインガイドの
「マテリアルデザイン」の色一覧を
見ることができるサイトになります。

 特徴 ・マテリアルデザインのカラー参考サイト
・「Material Design Colors」と似ている。
・カラー名とカラーコードを一緒に見れる。
 その他  

Colors – Material-UI

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

④ Material Mixer

material mixer - マテリアルデザイン系カラーツールまとめ

Material Mixerは、
Googleのマテリアルデザインの配色を基に
自動で類似色の配色を示してくれるツール。

 特徴 ・マテリアルデザインの配色見本サイト
・「Colors – Material-UI 」と
 合わせて覚えておきたいツール。
 その他  

Material Mixer

⑤ Material Design Palette

material design palette - マテリアルデザイン系カラーツールまとめ

Material Design Paletteは、
その名の通りマテリアルデザインに
特化しているカラーパレットの1つ。

 特徴 ・マテリアルデザインの配色見本サイト
・2色選択するとそれに合った6色が表示され
 8色の調和したカラーパレットができる。
・カラーパレットとは別に多くの
 SVGアイコンをダウンロードが可能。 
 その他  

Material Design Palette

Choose your favorite colors and get your Material Design palette generated and downloadable.

まとめ

以上が、マテリアルデザイン系
カラーツール5選まとめでした。

なお、その他の無料カラーツールは
下の記事に一通りまとめています。

また、配色に関わる書籍・本は 
次の記事を参考にしてみてください。

スポンサーリンク

シェアする