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

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

Material UI Colorsとは

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の画面です。19種類のカラーパレッドで構成されています。扱い方はとてもかんたんです。気になる色を「クリック」するだけです。

試しに「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」というボタンをクリックすると、同色で異なるトーンを選ぶことができます。

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

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

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

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

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

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

コードの変更

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

まとめ

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

http://materialuicolors.co/