色選びが苦手な方必見!WEBのスタンダードカラーを利用できる「Material UI Colors」のご紹介

色選びが苦手な方必見!WEBのスタンダードカラーを利用できる「Material UI Colors」のご紹介

こんにちは。ブログ管理人のカントクです。今回は色選びが苦手な方におすすめするWEBカラー選択補助ツール「Material UI Colors」をご紹介します。実はNCBLOGのロゴのグラデーションのカラーもこのサービスを利用して作られているのです。操作もクリックするだけでかんたんなので、ぜひチェックしてください。

Material UI Colorsとは

Material UI Colors   Color Palette for Material Design (1).png

http://materialuicolors.co/

「Material UI Colors」はWEBカラー選択補助ツールです。色選びに迷ったときに頼れるサービスです。マテリアルデザインカラーを元に配色されており、好みの色を選ぶだけでかんたんにトレンドカラーを利用できます。

マテリアルデザインとは?

2014年に発表されたGoogleのマテリアルデザインは、今もなおホームページデザインやアプリデザインのスタンダードとして定着しています。またそのGoogleのマテリアルデザインにはカラーに関するガイドラインも記されており、そのマテリアルカラーを扱いやすくしたサービスが「Material UI Colors」です。

マテリアルデザインについての元情報はこちら: https://material.io/design/color/#

Material UI Colorsの利用方法

ではさっそくMaterial UI Colorsを利用してみましょう。

http://materialuicolors.co/

Material UI Colors   Color Palette for Material Design (1).png

こちらがMaterial UI Colorsの画面です。19種類のカラーパレッドで構成されています。扱い方はとてもかんたんです。気になる色を「クリック」するだけです。

Material UI Colors   Color Palette for Material Design (2).png

試しに「LIME 500」をクリックすると、上の画像のように「Got It!」「Copied!」などの表示があります。これですべて完了しました。クリップボードにカラーコードがコピーされているはずです。試しにテキストエディタなどで「ペースト」(mac:cmd + v / windows:ctrl + v)をしてみましょう。

「#000000」という「#」と「6桁の数字」が貼り付けられるはずです。今回試した「LIME 500」の場合は、「#CDDC39」でした。これが「カラーコード」と呼ばれるものです。

カラーコードとは?

カラーコードとは、Webページ上で表現される色を指定するための制御コードのことである。 カラーコードはシャープ(#)に続く6桁の16進数で表記される。2桁ごとに赤・青・緑の濃淡が表され、16進数(0~F)の0が最も薄く、Fに近づくほど濃い色となる。例えば白は「#FFFFFF」、黒は「#000000」、オリーブ色は「#808000」である。 / weblio辞書引用

つまりカラーコードとは「色をコード化した値」ということです。WEBなどのデジタル情報内で色を指定する際に必ず必要になります。

トーンを変える

各カラーパレッドの右下にある「MORE」というボタンをクリックすると、同色で異なるトーンを選ぶことができます。

Material UI Colors   トーンの変更

このパレットでも、はじめのパレットと同じように、クリックするだけで色を選択できます。とてもかんたんです。

※はじめのパレッドに戻るには左上の「materialuicolors」をクリックします。

続きまして、はじめのパレットの状態でトーンを変更したい場合は、左上の「Level:[500]」と書かれたバーをスライドさせます。左へスライドすると「薄く」、右へスライドすると「濃く」なります。

Material UI Colors   level 300

Level:[300]の場合 (レベルを下げると薄くなる)

Material UI Colors   level 700

Level:[700]の場合(レベルを上げると濃くなる)

このように、トーンを調整して、お好みのカラーをピックアップしてください。

コードの変更

実はさきほどご紹介した「カラーコード」の種類はひとつだけではありません。#と6桁の数値は「Hex」と呼ばれるカラーコードですが、他にも「RGB」「RGBA」「CMYK」「HSV」など、様々なカラーコードがありますので必要に応じて使い分けてください。抽出するコードを変更するには上部にある「HEX-#1234EF」をクリックし、該当するカラーコードの種類を選んでください。

Material UI Colors カラーコード

まとめ

いかがだったでしょうか?かんたんにトレンドカラーを利用することができます。このツールを使えばもう色選びに迷わずに済みますので、色選びが苦手な方はぜひお試しください!

http://materialuicolors.co/

15分でストーリー動画が作成できる!PR動画作成アプリ「Adobe Spark Video」 のご紹介!

15分でストーリー動画が作成できる!PR動画作成アプリ「Adobe Spark Video」 のご紹介!

無料デザインツールCanvaとは?3分で自分好みのおしゃれなバナーが作成できる

無料デザインツールCanvaとは?3分で自分好みのおしゃれなバナーが作成できる