カテゴリ一覧

PARTSパーツ

TEXT & BOX文字・囲み

LAYOUTレイアウト

MOTION動き

COLOR色

COLOR PALETTE

おすすめ配色パターン
2色・3色・4色・5色の組み合わせ

ホームページやチラシにそのまま使える色の組み合わせです。それぞれ、小さなページの見本で「背景・見出し・ボタン」に塗ったときの見え方を確かめられます。色をクリックするとカラーコードを、「CSS変数でコピー」で全色をまとめてコピーできます。

88パターン

コピーの形式

色の役割の目安：ベース＝背景など一番広い面、サブ＝枠や区切りの面、メイン＝見出しやヘッダーなどサイトの顔、アクセント＝ボタンや目立たせたい所（全体の1割くらい）、文字＝本文の文字。

2色の配色 24パターン ／ 並び：ベース・メイン

2色-01生成りと墨

  • シンプル
  • 上品

2色-02白と紺

  • 信頼感
  • 会社

2色-03クリームとテラコッタ

  • ナチュラル
  • 飲食

2色-04薄桜と深緑

  • 和風
  • 春

2色-05白と朱

  • 元気
  • ポップ

2色-06淡い水色と群青

  • 爽やか
  • 夏

2色-07黒と黄

  • クール
  • 車・整備

2色-08ベージュとオリーブ

  • ナチュラル
  • 秋

2色-09グレージュとくすみピンク

  • 美容
  • かわいい

2色-10白とミント

  • 清潔
  • 医療

2色-11紺と金

  • 高級感
  • 上品

2色-12薄紫とプラム

  • 上品
  • 美容

2色-13若草と墨緑

  • ナチュラル
  • 春

2色-14からし色と濃紺

  • レトロ
  • ポップ

2色-15白と赤茶

  • 落ち着き
  • 飲食

2色-16淡いグレーと青

  • クール
  • 信頼感

2色-17アイボリーと抹茶

  • 和風
  • ナチュラル

2色-18ピンクと赤

  • かわいい
  • ポップ

2色-19黒と白

  • モノトーン
  • クール

2色-20砂色とこげ茶

  • 落ち着き
  • カフェ

2色-21水色と黄

  • 元気
  • 子ども

2色-22深い青緑と白

  • クール
  • 清潔

2色-23ラベンダーとグレー

  • 落ち着き
  • 上品

2色-24オレンジと紺

  • 元気
  • スポーツ

3色の配色 24パターン ／ 並び：ベース・メイン・アクセント

3色-01ネイビーとオレンジ

  • 信頼感
  • 元気
  • 会社

3色-02森と陽だまり

  • ナチュラル
  • 爽やか

3色-03カフェラテ

  • カフェ
  • 秋
  • 落ち着き

3色-04クリニック

  • 清潔
  • 医療
  • 信頼感

3色-05ピーチ

  • かわいい
  • 美容

3色-06夜の街

  • クール
  • モダン

3色-07えんじと金

  • 高級感
  • 和風

3色-08畑と夕日

  • ナチュラル
  • 飲食

3色-09ポップな紫

  • ポップ
  • 元気

3色-10モノトーンとベージュ

  • 上品
  • シンプル

3色-11青空と黄色

  • 元気
  • 信頼感
  • 車・整備

3色-12苔と煉瓦

  • 和風
  • 落ち着き

3色-13夏のソーダ

  • ポップ
  • 夏

3色-14スレートと山吹

  • 落ち着き
  • 会社

3色-15テック

  • クール
  • IT

3色-16秋の焚き火

  • 元気
  • 秋

3色-17木とハーブ

  • ナチュラル

3色-18森の小屋

  • ナチュラル
  • 落ち着き

3色-19レトロな喫茶

  • レトロ
  • 飲食

3色-20夜会

  • 高級感
  • 上品

3色-21海辺

  • 爽やか
  • 夏

3色-22赤いワイン

  • 上品
  • 飲食

3色-23白黒と赤

  • モノトーン
  • クール

3色-24実りの秋

  • 秋
  • ナチュラル

4色の配色 20パターン ／ 並び：ベース・サブ・メイン・アクセント

4色-01コーポレート

  • 信頼感
  • 会社

4色-02グリーンの庭

  • ナチュラル
  • 爽やか

4色-03焼き菓子

  • カフェ
  • 飲食

4色-04医療・介護

  • 清潔
  • 医療

4色-05ローズガーデン

  • 美容
  • かわいい

4色-06ダークモード

  • クール
  • IT

4色-07老舗

  • 和風
  • 高級感

4色-08にぎやか

  • ポップ
  • 元気

4色-09ギャラリー

  • 上品
  • シンプル

4色-10ブルースカイ

  • 爽やか
  • 車・整備

4色-11みかん畑

  • 元気
  • 秋

4色-12山小屋

  • ナチュラル
  • 落ち着き

4色-13純喫茶

  • レトロ
  • 飲食

4色-14ホテル

  • 高級感
  • 上品

4色-15サンゴ礁

  • 爽やか
  • 夏

4色-16ストリート

  • クール
  • モノトーン

4色-17港町

  • 落ち着き
  • 会社

4色-18深い森

  • ナチュラル

4色-19キャンディ

  • ポップ
  • かわいい

4色-20北欧の部屋

  • 落ち着き
  • ナチュラル

5色の配色 20パターン ／ 並び：ベース・サブ・メイン・アクセント・文字

5色-01しっかり会社

  • 信頼感
  • 会社

5色-02パン屋さん

  • 飲食
  • ナチュラル

5色-03クリニック

  • 清潔
  • 医療

5色-04サロン

  • 美容
  • かわいい

5色-05夜のショールーム

  • クール
  • 車・整備

5色-06和菓子屋

  • 和風
  • 高級感

5色-07農園

  • ナチュラル
  • 元気

5色-08イベント

  • ポップ
  • 元気

5色-09ブティック

  • 上品
  • シンプル

5色-10整備工場

  • 信頼感
  • 車・整備

5色-11キッチンカー

  • 元気
  • 飲食

5色-12旅館

  • 和風
  • 落ち着き

5色-13レトロポップ

  • レトロ
  • ポップ

5色-14ラウンジ

  • 高級感
  • 上品

5色-15マリン

  • 爽やか
  • 夏

5色-16スタートアップ

  • クール
  • IT

5色-17アウトドア

  • ナチュラル
  • 秋

5色-18おやつ

  • かわいい
  • ポップ

5色-19事務所

  • 落ち着き
  • 会社

5色-20ベーシック

  • シンプル
  • クール

カラーコード一覧も見る →