カラーコード・色見本付き！おしゃれな配色・色の組み合わせ100選

カラーコードとは、Webサイトやデザインツールなどで色を指定するために使われる数値や記号のことです。同じ「赤」や「青」でもさまざまな色合いがあるため、カラーコードを使うことで、使いたい色を正確に指定できます。代表的な色の表し方には「HEX（16進数カラーコード）」と「RGB」があります。

WebデザインやCanvaなどでカラーコードを入力して色を指定したい場合は、短く入力しやすいHEXが便利です。一方、赤・緑・青それぞれの数値を確認しながら色を調整したい場合は、RGBを使うと色の構成を把握しやすくなります。

HEXとRGBの違いを知っておくと、WebサイトやSNS投稿、プレゼン資料などでお気に入りの色をより正確に再現できます。

デザインに使いたい色を探すときは、カラーコードと色見本を見比べながら選ぶと便利です。赤や青、緑といった基本カラーはもちろん、パステルカラーやくすみカラー、ベージュ、ブラウン、グレーなど、同じ色系統でも明るさや鮮やかさによって印象は大きく変わります。

まずは下の色見本一覧から好みの色を見つけ、表示されているカラーコードを参考にしてみましょう。

配色を自然にまとめたいときは、同系色を組み合わせる方法がおすすめです。同系色とは、青と水色、緑と黄緑、ピンクと赤のように、色相が近い色の組み合わせを指します。

似た色同士はなじみやすいため、複数の色を使ってもデザインに統一感を出しやすいのが特徴です。たとえば、濃いブルーに明るい水色を合わせたり、ベージュにブラウンを組み合わせたりすると、落ち着いた配色を作れます。

ただし、似た色だけでは全体が単調に見えることもあります。その場合は、明るさや鮮やかさに差をつけると、同系色でもメリハリのあるおしゃれなデザインに仕上がります。

デザインにインパクトを加えたい場合は、補色を取り入れてみましょう。補色とは、色相環で向かい合う位置にある色の組み合わせです。赤と緑、青とオレンジ、黄色と紫などが代表的な例です。

補色は色同士の違いがはっきりしているため、組み合わせることで強いコントラストが生まれます。ボタンや見出し、強調したい文字など、ユーザーの目を引きたい部分にアクセントカラーとして使うのにも向いています。

複数の色を使うときは、それぞれの役割を決めると色の組み合わせを考えやすくなります。基本となるのは「ベースカラー」「メインカラー」「アクセントカラー」の3つです。

1. ベースカラー：背景など広い面積に使用し、デザイン全体の土台となる色。
2. メインカラー：デザインの印象を決める中心的な色。ブランドカラーや伝えたいイメージに合った色を選ぶとよい。
3. アクセントカラー：全体の中で特に目立たせたい部分に使用する色。

おしゃれな配色を作るときは、色そのものだけでなく「どの色を、どこに、どれくらい使うか」も意識することがポイントです。

お気に入りの配色が見つかったら、Canvaでデザインを始めましょう！⁠（新しいタブまたはウィンドウで開く）

お気に入りの配色が見つかったら、Canvaでデザインを始めましょう！⁠（新しいタブまたはウィンドウで開く）

お気に入りの配色が見つかったら、Canvaでデザインを始めましょう！⁠（新しいタブまたはウィンドウで開く）

お気に入りの配色が見つかったら、Canvaでデザインを始めましょう！⁠（新しいタブまたはウィンドウで開く）

すべての印刷機で使われているこのインクの色（CMYKと省略される、シアン・マジェンタ・イエロー・ブラック）は大都会の夜に輝くネオンサインに似た、魅力的な配色になります。

お気に入りのカラーコードが見つかったら、Canvaのデザインに取り入れてみましょう。CanvaではHEXカラーコードを入力して色を指定できるため、Webサイトやブランドで使っている色、写真から見つけた色などをデザインに再現できます。

使い方は簡単です。Canvaでデザインを開き、文字や図形、背景など、色を変更したい部分を選択します。カラーパネルを開いてHEXコードの入力欄に「#」から始まるカラーコードを入力すると、指定した色をデザインに反映できます。

ブランドカラーやよく使う配色が決まっている場合にも、カラーコードを基準に色を選ぶことで、一貫性のあるデザインを作りやすくなります。

「画像の色のカラーコードを調べたい」というときは、Canvaのカラーピッカー⁠（新しいタブまたはウィンドウで開く）を活用できます。Canvaのカラーピッカーを使えば、色を調べたい写真や画像をアップロードし、スポイトで好きな部分を選択するだけでカラーコードを取得できます。

たとえば、海や空の写真からブルー系の色を選んだり、植物の写真からグリーンやベージュを取り入れたりすることで、自然なまとまりのある色の組み合わせを作れます。料理やインテリア、風景写真など、好きな写真を配色の参考にするのもおすすめです。

よくある質問

カラーコードとは何ですか？

カラーコードとは、Webサイトやデザインツールなどで色を指定するために使われる数値や記号です。代表的なものにHEXやRGBがあり、HEXでは「#FF0000」のように「#」と6桁の英数字を組み合わせて色を表します。カラーコードを使えば、同じ色を別のデザインでも正確に再現できます。

カラーコードはどこで確認できますか？

カラーコードは、色見本やカラーピッカー⁠（新しいタブまたはウィンドウで開く）を使って確認できます。写真や画像の中に使いたい色がある場合は、カラーピッカーでその部分を選択すると、対応するHEXカラーコードを調べることができます。

HEXとRGBの違いは何ですか？

HEXとRGBは、どちらも主に赤・緑・青の組み合わせをもとに色を表す方法ですが、表記方法が異なります。HEXは「#FF0000」のように16進数で表し、RGBは「rgb(255, 0, 0)」のように赤・緑・青をそれぞれ数値で指定します。Webデザインやデザインツールでは、HEXカラーコードがよく使われます。

おしゃれな色の組み合わせを作るコツはありますか？

まずは使う色を3色程度に絞り、デザインの中心になる色を決めると配色を考えやすくなります。同系色を組み合わせると統一感を出しやすく、補色をアクセントとして取り入れるとメリハリをつけられます。また、ベースカラー・メインカラー・アクセントカラーの役割を決めて使うのもおすすめです。

何色くらい使うとデザインがまとまりやすいですか？

配色に迷った場合は、まず3色程度から始めるとデザインをまとめやすくなります。背景などに使うベースカラー、印象を決めるメインカラー、目立たせたい場所に使うアクセントカラーというように役割を分けると、色数が少なくてもバランスのよいデザインを作れます。

写真からカラーコードを調べることはできますか？

はい。Canvaのカラーピッカーを使えば、写真や画像に含まれている色を選び、その色のカラーコードを確認できます。空や植物、インテリアなど、好きな写真から色を取り出して配色の参考にするのもおすすめです。

Canvaでカラーコードを使えますか？

Canvaでは、HEXカラーコードを使ってデザインの色を指定できます。文字や背景、図形などの色を設定するときにカラーコードを入力することで、色見本で見つけたカラーや、ほかのデザインで使っている色を再現できます。

関連ページ

グラフィックデザインとは？デザイナーの仕事・必要なスキル・作品例・体験談を解説⁠（新しいタブまたはウィンドウで開く）

塗り絵デザイン作成！無料テンプレートでおしゃれなデザインが簡単に作れる！⁠（新しいタブまたはウィンドウで開く）