Google色彩サービス Material UI Colors でWebデザインはもっと鮮やかになる

色はWebサービスやロゴの印象を大きく左右します。興奮や刺激のある印象を与える赤は飲食の広告に使われることが多く、落ち着きがあり知的なイメージをもたらす青は企業サイトによく取り入れられます。

最適な色選びをしたければ、Googleが新しく定めたUX体系「マテリアルデザイン」で指定されている色を選んでみてはいかがでしょうか?

Material UI Colors」のカラーパレットを使えばたったワンクリックでカラーコードをコピーできます。”なんとなくイイ感じ”の抽象的な色選びはもう終わりにしませんか?

1.好みの色をコピーする

カラフルな色鉛筆

(出典) pexels.com

サイトを開くとカラーパレットが表示されます。ここにある色すべてはマテリアルデザインの指定カラー。好みの色を見つけたらカーソルを合わせてクリックします。

画面下からフワーっと選んだ色のカラーコードが表示されたらコピー完了です!なんとなくクセになる操作に他の色もポチポチ押してしまいます。

サイトの右上に表示されているHEX、#HEX、RGB、RGBAをクリックしてから色を選べば、形式に合わせたカラーコードに切り替えてくれるのが嬉しいですね。

2. 特定の色を指定する

4色の紙

(出典) pexels.com

特定のカラーパレットのみを表示させるには、URLに指定したい色を追記します。例えば赤系統の色のみ表示させたいときは、URLの最後に「colors/red」を付け加えます。サイト最上部のカラー名(Red、Pink、Purple…Grey、Blue Grey)から選びましょう。

おわりに

Material UI Colorsを使うと、サイトデザインの効率が飛躍的に向上します。1色ずつコードを調べる煩わしさがなくなるだけではなく、illustratorとPhotoshopに対応しているスウォッチもダウンロードできます。

「こんな色ほしかった!」は見つかりましたか?Material UI Colorsであなたのサービスをもっと鮮やかにする運命の一色に出会えますように。