
記事内に商品プロモーションが含まれる場合があります
Webページ上で色を指定するための「カラーコード」。Canvaを使うと、パソコンの画面上にある画像やデザインのカラーコードを簡単に調べられます。調べたい画像やデザインのCanvaへのアップロードは不要です。
なお、この機能は無料で利用できます。画像は2022年のパソコン版の操作例です。現在のメニューやスポイトの表示・動作は、利用環境によって異なる場合があります。
1.カラーコード識別にCanvaを使うメリット
カラーコードを調べるツールはいろいろありますが、Canvaを使うメリットは以下が挙げられます。
- 画像やデザインのデータをアップロードする手間がない
- パソコンの画面上に開ければ、どんなファイル形式でもOK
- 無料で便利なデザインツールなので、カラーコードを調べる以外にも役立ちすぎる
2.Canvaでカラーコードを調べる方法
ここからは、実際にカラーコードを調べてみましょう。練習用リンクからCanvaへ進めます。ログインが必要な場合があります。テンプレートが開けない場合は、色を変更できる図形や文字を含む任意のデザインで試してみてください。
1.Canvaを開く
まずはCanvaを開きます。

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

Canvaの編集画面が開きました。
2.カラーコードを調べたいファイルを開いておく

Canva画面の隣に、カラーコードを調べたい画像・デザインのファイルを開いておきます。
例としてイヌの画像を開いておきましたが、なんでもいいのでなにか画像ファイル等開いておいてください。
3.カラーピッカーを使用する
カラーコードの識別はカラーピッカーを使います。

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

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

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

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

マウスポインターがカラーピッカーになりました。
4.カラーコードを調べる
では、イヌの鼻のカラーコードを調べてみようと思います。

カラーピッカーになったマウスを、調べたい部分の上まで移動させ、クリックします。
拡大されてドット状態になっているので、狙った場所をクリックしやすいと思います。

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

図は当時、全ウィンドウ表示で色を調べた例です。ウィンドウの表示方法や採色できる範囲は利用環境によって異なるため、画像ファイルをCanvaの隣に並べる方法も試してください。
まとめ
今回は、Canvaを使ってカラーコードを調べる方法の紹介でした。
他にも便利なデザイン機能や、スライド作成機能、動画編集機能などがたくさんあるので、ぜひCanvaを活用してみてください!