【Canva】デザイン上で同じ色を選択！色抽出の「カラーピッカー」

記事内に商品プロモーションが含まれる場合があります

Canvaでデザインを作成中、デザイン上にすでにある色や、写真の中の色を使いたい、と思ったことはありませんか？そんなときは、「カラーピッカー」を使って色を抽出しましょう。

掲載画像は旧記事で使用していた画面です。Canvaの更新により、メニュー名や配置が現在の画面と異なる場合があります。利用できる機能や回数、素材の条件はプランによって異なります。

1.Canvaで色を抽出する方法

デザイン上の色や写真の中の色を使いたいときは、「カラーピッカー」の機能を使います。

実際の画面を使って解説するので、よければテンプレートの中からどれかを開いて一緒にやってみましょう。

まずはテンプレートを使用し、編集画面を開いてください。（好きなものを開いてくださいね）

色を変更したいパーツをクリックします。今回の解説では、背景を猫ちゃんの目の色にあわせようと思います。

すると上にメニューが開くので、現在の色が表示されている四角をクリックしてください。

色のメニューが開きました。

色のメニューの中から、＋マークの「新しいカラーを追加」をクリックします。

開いたメニューから、ペンのようなマークをクリックします。これがカラーピッカーです。

するとマウスポインターが丸いモザイクのようになります。ポインターの下が拡大されて、ピクセル化している状態です。

猫の目の色を使用したいので、マウスを動かしてポインターを目の上まで移動します。「この色がいい！」というピクセル上で、クリックしてください。

背景の色が、クリックした目の色（深緑）に変更されました。

同様にして、他の背景も猫の目の別のカラーをクリックしたり、体の毛をクリックしたりして、変更しました。これで完成です。

とても簡単に、デザイン上の色を抽出してほかの部分に使用できましたね。

「カラーピッカーを起動したものの、やっぱり普通のマウスポインターに戻したい」…そんなときは、わざわざどこかをクリックする必要はありません。

カラーピッカーになっている状態で、キーボードの左上のescキー(エスケープキー)を押すだけです。

するとその場でカラーピッカーがマウスポインターに戻ります。

掲載画面では、カラーピッカーでCanvaの外の色も拾えました。利用環境によって動作が異なる場合があります。

Canvaを開いたウィンドウの隣に、茶トラ猫の写真を開きました。この例では、カラーピッカーを移動させると、写真上でも色を抽出できました。

掲載画面では、隣に並べたウィンドウからも色を選択できました。使える範囲はブラウザや端末の環境で異なる場合があります。掲載画面のように画像を開いて、そこから色を抽出してCanvaのデザインに使用する、ということができるわけです。

この例ではアップロードせずに選択できました。Canva外の画面から色を取得できない場合は、画像をCanvaへアップロードして、デザイン内で色を選んでください。

カラーコードとは、「Web上で表現される色を指定するための、シャープ（#）で始まる英数字の羅列」のことです。

ディスプレイの画面上だとどうしても見え方が異なったりするので、たとえば外注先に「この色を使ってほしい」という場合はカラーコードを指定したりします。

Canvaでは、選択中の色について、この部分にカラーコードが表示されます。コピペ可能です。

そのため、カラーピッカーを利用すれば、気になるデザインに使用されている色のカラーコードを簡単に調べることもできます。

カラーピッカーを普通のマウスポインターに戻すときは、キーボードの[esc]を押すだけです。

Canvaのカラーピッカーを使えば、テンプレート上の色や、他のデザイン・写真の色を抽出し、自作のデザインに使用することができます。

ぜひ活用してみてくださいね。