色見本のコード「#○○○○○○」と同じ色をクリスタで出す方法

投稿日：2019.01.17　更新日：2019.01.17

※当ページはアフィリエイトプログラムによる収益を得ています。

メインの色を選ぶだけで配色論に基づいた様々な色の組み合わせのサンプルが見れる「Color Supply」や、マンガの表紙で使われている色が一覧で見れる「配色サンプル-マンガ配色検索」などの色見本サイト。せっかく気に入った色があってもクリスタで同じ色を作るのは面倒だと思っていませんか?実は色の下に表示されているカラーコード「#○○○○○○」を入力すれば一発で色が出せるんですよ。

そもそもカラーコードって何?

HTMLやCSSをいじった事のある人は見た事ある人も多いでしょう。「#○○○○○○」といった具合に、♯と6桁の英数字で構成されたコードの事です。Webページ上での色を指定するためのもので、2ケタごとに赤、緑、青の濃淡が16進数で表されています。

0123456789ABCDEFの順に、0に近いほど色や光が消え黒くなり、Fに近いほど色や光が濃くなります。例えば黒は「#000000」、白は「#FFFFFF」、赤なら「#FF0000」といった具合です。

多くの色見本サイトはカラーコードも表示される

配色で迷ったときや新しい色合いを発見したいときに役立つ色見本サイト。メインにしたい色を選ぶだけで配色論に基づいた色の組み合わせのパターンをたくさん表示してくれたり、季節や感情などのイメージにピッタリな配色のサンプルを表示してくれたり、憧れのあのマンガの表紙に使われている全ての色を表示してくれたり、見ているだけで勉強になります。

さまざまな色見本サイトがありますが、多くの色見本サイトはWebデザインで使われる事も多いためカラーコードも一緒に表示されています。このカラーコード、Webデザインのときにしか使えないと思っていませんか?実はペイントソフトでもカラーコードで同じ色を使う事ができるんですよ。

カラーコードをクリスタで使ってみよう

普通にカラーピッカーやパレットから色を選んでいると気付きにくいですが、「色の設定」という、選択中の色の詳細を設定出来るダイアログでカラーコードを入力できるようになっています。

クリスタの描画色をダブルクリック(iPad版の場合ダブルタップ)すると「色の設定」ダイアログが表示されます。ここの右下に注目してください。6ケタの英数字が並んでいるところがありますね?

ここに色見本サイトで見つけた色のカラーコード、♯を抜いた6ケタの英数字を入力してみてください。

「OK」ボタンを押せば設定完了。簡単に色見本サイトで表示されている色と同じ色を選択する事ができました。

パレットに色を追加すると便利

選択した色はパレットに追加しておくといつでも使えて便利になります。

追加したい色が選択されている状態で、「カラーセット」を開いて追加ボタンをクリックしましょう。これだけで選択中の色が「カラーセット」に保存されました。これで次にクリスタを開いたときも、新しいイラストを描くときも、いつでもこの色を使う事ができますね。

削除したいときは色を選択してゴミ箱ボタンを押すだけ。管理も簡単なので気に入った色はどんどん「カラーセット」に追加しちゃいましょう。

まとめ

せっかく色見本サイトで見つけた素敵な色や配色。カラーコードを使ってお絵描きでもバンバン使っちゃいましょう。いつもと違った色使いに挑戦して、新しい発見があるかもしれませんね。