こんにちは。ブログ管理人の井上です。今回は色選びが苦手な方におすすめするWEBカラー選択補助ツール「Material UI Colors」をご紹介します。実はNCBLOGのロゴのグラデーションのカラーもこのサービスを利用して作られているのです。操作もクリックするだけでかんたんなので、ぜひチェックしてください。
Material UI Colorsとは
「Material UI Colors」はWEBカラー選択補助ツールです。色選びに迷ったときに頼れるサービスです。マテリアルデザインカラーを元に配色されており、好みの色を選ぶだけでかんたんにトレンドカラーを利用できます。
マテリアルデザインとは？
2014年に発表されたGoogleのマテリアルデザインは、今もなおホームページデザインやアプリデザインのスタンダードとして定着しています。またそのGoogleのマテリアルデザインにはカラーに関するガイドラインも記されており、そのマテリアルカラーを扱いやすくしたサービスが「Material UI Colors」です。
マテリアルデザインについての元情報はこちら：
https://material.io/design/color/#
Material UI Colorsの利用方法
ではさっそくMaterial UI Colorsを利用してみましょう。
こちらがMaterial UI Colorsの画面です。19種類のカラーパレッドで構成されています。扱い方はとてもかんたんです。気になる色を「クリック」するだけです。
試しに「LIME 500」をクリックすると、上の画像のように「Got It!」「Copied!」などの表示があります。これですべて完了しました。クリップボードにカラーコードがコピーされているはずです。試しにテキストエディタなどで「ペースト」（mac:cmd + v / windows:ctrl + v）をしてみましょう。
「#000000」という「#」と「６桁の数字」が貼り付けられるはずです。今回試した「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]の場合（レベルを上げると濃くなる）
このように、トーンを調整して、お好みのカラーをピックアップしてください。
コードの変更
実はさきほどご紹介した「カラーコード」の種類はひとつだけではありません。#と６桁の数値は「Hex」と呼ばれるカラーコードですが、他にも「RGB」「RGBA」「CMYK」「HSV」など、様々なカラーコードがありますので必要に応じて使い分けてください。抽出するコードを変更するには上部にある「HEX-#1234EF」をクリックし、該当するカラーコードの種類を選んでください。
まとめ
いかがだったでしょうか？かんたんにトレンドカラーを利用することができます。このツールを使えばもう色選びに迷わずに済みますので、色選びが苦手な方はぜひお試しください！
