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

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

Your material palette just with a click! #RandomMaterialPalette

② Material Design Colors

material-design-colors

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

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

Material Design Colors

Out of color ideas? Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material D

③ Colors – Material-UI

colors-material-ui

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

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

Colors – Material-UI

React components for faster and easier web development. Build your own design system, or start with Material Design.

④ Material Mixer

material-mixer

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

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

Material Mixer

Material mixer tool, allows you to mix match primary and secondary color of material design color palette.

⑤ 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選まとめでした。

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

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

スポンサーリンク

シェアする