Webページ上で色を指定するための「カラーコード」。Canvaを使うと、パソコンの画面上にある画像やデザインのカラーコードを簡単に調べられます。調べたい画像やデザインのCanvaへのアップロードは不要です。

なお、この機能は無料で利用できます。画像は2022年のパソコン版の操作例です。現在のメニューやスポイトの表示・動作は、利用環境によって異なる場合があります。

1.カラーコード識別にCanvaを使うメリット

カラーコードを調べるツールはいろいろありますが、Canvaを使うメリットは以下が挙げられます。

  1. 画像やデザインのデータをアップロードする手間がない
  2. パソコンの画面上に開ければ、どんなファイル形式でもOK
  3. 無料で便利なデザインツールなので、カラーコードを調べる以外にも役立ちすぎる

2.Canvaでカラーコードを調べる方法

ここからは、実際にカラーコードを調べてみましょう。練習用リンクからCanvaへ進めます。ログインが必要な場合があります。テンプレートが開けない場合は、色を変更できる図形や文字を含む任意のデザインで試してみてください。

1.Canvaを開く

まずはCanvaを開きます。

Canvaを開く

こちらからCanvaを開きます。図は当時、「テンプレートを使用する」から編集画面を開いた例です。

Canvaの編集画面が開いた

Canvaの編集画面が開きました。

2.カラーコードを調べたいファイルを開いておく

色を抽出したいデータを開いておく

Canva画面の隣に、カラーコードを調べたい画像・デザインのファイルを開いておきます。

例としてイヌの画像を開いておきましたが、なんでもいいのでなにか画像ファイル等開いておいてください。

3.カラーピッカーを使用する

カラーコードの識別はカラーピッカーを使います。

なんでもいいのでテンプレート上のパーツをクリック

まずはCanva編集画面で、色を変更できる文字・図形・背景などを選びます。色の項目が表示されない素材では色変更できないため、別の図形などを選んでください。

色をクリックして色のメニューを開く

上に表示されるメニューから現在の色をクリックし、左側に色編集のメニューを開きます。

新しい色を追加

図では色メニューの「+」マークから開いています。現在の公式ヘルプでは「新しい色を追加」(虹色のタイル)を選ぶ手順です。

カラーピッカーをクリック

スポイトのマークをクリックして、カラーピッカーを起動します。

カラーピッカーになる

マウスポインターがカラーピッカーになりました。

4.カラーコードを調べる

では、イヌの鼻のカラーコードを調べてみようと思います。

カラーコードを知りたい部分にのせる

カラーピッカーになったマウスを、調べたい部分の上まで移動させ、クリックします。

拡大されてドット状態になっているので、狙った場所をクリックしやすいと思います。

クリックするとカラーコードを調べることができる

クリックするとここにカラーコードが表示されます。これでカラーコードが判明しましたね。コピペも可能です。

全ウィンドウを表示してもカラーコードを調べることが可能

図は当時、全ウィンドウ表示で色を調べた例です。ウィンドウの表示方法や採色できる範囲は利用環境によって異なるため、画像ファイルをCanvaの隣に並べる方法も試してください。

まとめ

今回は、Canvaを使ってカラーコードを調べる方法の紹介でした。

他にも便利なデザイン機能や、スライド作成機能、動画編集機能などがたくさんあるので、ぜひCanvaを活用してみてください!