配色パターン100選!超おしゃれな色の組み合わせでwebデザインを制せよ。

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス, 配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ
Sayu
Sayu

どうも、おしゃれな配色研究員のSayuです☺

オシャレブログに欠かせないのはズバリ、【色の使い方】です。

デザインを良くするためにまずは、

どんなカラーを使用するか。を決めましょう!

Sayu
Sayu

配色を整えると、

メリットがこんなにあるの!▼

  1. とにかく見た目がおしゃれになる
  2. 色だけで、○○さんのブログだ!!と認知してもらえる
  3. 読者にブログのコンセプトを想像させることができる
  4. まとまり・統一感のある心地よいサイトになる

どうですか、色について興味が沸いてきましたか?!

でも色の組み合わせって

どうすれば良いの?💦

大丈夫!

今回は100種類の配色アイデアを紹介するよ!

当記事は、
デザイン初心者さんでもすぐにお洒落な配色に出会える「色の辞書」!!

配色に迷ったときは、是非参考にしていただければと思います☺

また、「ブログ参考デザインまとめ」で紹介しているサイトは

どれも色使いが素晴らしい!!ぜひ参考にして下さいね☺▼

【おしゃれな色の組み合わせ】当記事の使い方

本題に入る前に!!!

Sayu
Sayu

当記事の活用方法・工程をかんたんに説明するよ♪

①好みの配色を見つける

まずは記事内で、あなたがサイトで使用したい配色を探してください。

好みの色もしくはイメージに合う色が見つかればOK!!!

例えば、以下の配色に決めるとしましょう▼

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
f9eee8
#ffd28b
#c2a5b0
#61425e

配色が見つかったら、

次はどうするの???

つぎは、実際にサイトに色を当てはめていきましょう!!

 

②配色をサイトに取り入れる

配色が決まれば、サイトに色を取り入れる工程に入ります☺

特にメインとなるのは、ヘッダーやアイキャッチ画像!!

先ほどの配色でデザインしてみるとこんな感じ▼

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

Sayu
Sayu

すごい!全体が統一されていてオシャレ!!!

このように、3~4色に限定してデザインをするとまとまりがでて

お洒落なサイトが出来上がります☺

配色はコピペでそのまま使っても良しアレンジを加えてもよし

自由に使っていただけたら、と思います💛

Sayu
Sayu

参考にしてくれた場合は

Twitterで教えていただけると超~喜びます! (笑)

みんなのブログデザインを見てみたい!!!!☺

よ~し!使い方はマスターできたかな?

次に、それぞれの色のイメージを知ろう!

色のイメージ・心理効果・意味とは

全ての色には、それぞれ人に与えるイメージがあります。

Sayu
Sayu

ブログやサイトの配色は、
あなたが読者に与えたい印象を持つカラーを選ぼう!

例えば、「子ども向けのサイト」なのに白黒だと
イメージとかけ離れてしまいますよね。

コンセプトに合わせた色使いを心掛けよう!

それぞれの色がもたらす感情への効果はこんな感じ▼

色が人に与えるイメージ
興奮情熱・愛・強さ・元気・勢い・行動力
オレンジ家庭的・高揚感・健康・幸せ・陽気・自由
希望・輝き・若さ・元気・好奇心・ユーモア
平和・安らぎ・調和・安全・自然
誠実・冷静・爽やか・信頼・知的・プロフェッショナル
ピンク甘さ・恋愛・可愛らしさ・幸福・愛情・現実逃避
上品・癒し・神秘・スピリチュアル・高貴
落ち着き・誠実・大地・穏やか・温和・伝統
頑丈・力強い・威厳・重厚
清潔・真実・純粋・爽やか・シンプル・軽い

ビジネス系・ノウハウ系ブログには
誠実・知的」を連想させる「」をメインに。

料理系・主婦向けブログには
家庭的・健康」を連想させる「オレンジ」をメインに。

という風に、イメージに合った色をチョイスすると配色がうまくいきます👍

色のイメージがついたら

さっそく配色さがしに出かけよう!!

それでは配色のアイデアを、

  • 大人っぽい
  • ナチュラル
  • レトロ
  • 高級感
  • アウトドア
  • ビジネス
  • かわいい
  • シンプル
  • 韓国っぽい
  • モダン・スタイリッシュ
  • おちつき・親近感
  • 爽やか
  • 子ども向け
  • 個性的

に分けて、100種類!!!ご紹介していきます☺

大人っぽい|おしゃれな配色パターン

大人っぽいおしゃれな配色を8つご紹介します☺

1.真っ赤なドレスで誘惑して

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#383d3d
#b92125
#ffe3e5
#dad5d2

テーマ:真っ赤なドレスで誘惑して

いつもより気合いの入ったメイクでパーティーに出かける女の子をイメージ♥

深みのあるレッドがパキッと映える配色です。

例のヘッダー画像はCanvaで作成したよ♪

2.太陽が似合うおしゃれ海外ガール

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#a95320
#c48c37
#f3ebdf
#dbe0da

テーマ:太陽が似合うおしゃれ海外ガール

Sayu
Sayu

太陽の下で日焼けする海外の女の子をイメージしたよ☺

夏っぽさや日焼けを連想させる褐色と、淡いブルーを組み合わせることで

バランスの取れたとってもお洒落なカラーに♪

濃い色は、薄い色で調和してあげよう!

 

3.個性派トレンド女子

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f6ede8
#bf6159
#c5c4e8
#f1be8e

テーマ:個性派トレンド女子

暖色にあえて透明感のあるパープルを入れることで

一味ちがう、垢抜けたデザインに仕上がります☺

A子先生
A子先生

大人っぽさと現代風モダンの

欲張りカラー♥

 

4.フェミニン大人女子

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#eddfe0
#f5f5f7
#b7b7b7
#705c53

テーマ:フェミニン大人女子

たまさん(@lovetama_8)からのリクエスト▼

・透明感のあるピンクとグレーが好き

・クリア、シンプル、おしゃれ、大人可愛い感じ

彩度を抑えたピンクとグレーでフェミニンさあふれる配色に♪

このピンクなら、多用してもいやらしくならない!

 

5.こなれ女子のテラコッタ

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#faf7f0
#d8d2c2
#b17457
#4a4947

テーマ:こなれ女子のテラコッタ

テラコッタとは少しくすんだオレンジがかった茶色のことで

ワンポイント取り入れるだけで、上品かつ大人っぽさが出るんです!

ファッションに取り入れるとこなれ感も出せるから

女性に人気のカラーなの♥

おしゃれかつトレンド感を出したい方におススメ!

 

6.大人アリス

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#323232
#bdd6e9
#d7162d
#b39d74

テーマ:大人アリス

ミレイさん(@mirei_nurse)からのリクエスト▼

大人の不思議の国のアリスをイメージした配色が知りたい!

子どもっぽくならないよう、
くすみブルーとゴールドで女性の上品さ・大人っぽさを演出しました☺

Sayu
Sayu

背景は真っ白よりも、くすんだグレーが合うね!

 

7.赤レンガの家に住むあの子

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f3eeea
#e2d0b8
#a03724
#ebbb69

テーマ:赤レンガの家に住むあの子

「5.こなれ女子のテラコッタ」よりも赤レンガ感の強いテラコッタ

赤みを帯びたくすんだ黄色を合わせた配色。

 

8.色褪せないドライフラワー

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e0c8c5
#97615e
#e8d5c0

テーマ:色褪せないドライフラワー

いくこさん(@ikukon0ikuji)からのリクエスト▼

・シンプルで目に優しいくすみカラー

・ゆったりのんびりしているイメージ

ドライフラワーから抽出したようなくすみカラーは

やさしくゆったりとした、品のある印象を与えてくれますね☺

ナチュラル|おしゃれな配色パターン

自然・素朴なイメージには「」をうまく取り入れましょう。

ナチュラルな配色を7つ提案します☺

9.自然、ありのまま。

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#b6c0a8
#668863
#edefea
#b38a59

テーマ:自然、ありのまま。

その名の通り、植物そのままの自然な色でできたカラーパレット。

落ち着いたグリーンとブラウンの相性は抜群ですね!!

ゆったりと癒されるようなサイトデザインにしたい方におススメ☺

 

10.痛くないサボテン

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#2f665c
#a1bba2
#f6e5e2
#e6c2bf

テーマ:痛くないサボテン

観葉植物やサボテンを連想させるナチュラルカラー。

Sayu
Sayu

やわらかいイメージだから「痛くないサボテン」(笑)

深緑を程よく取り入れると、全体が引き締まってバランスがとれます☺

11.癒しのアロマキャンドルはいかが?

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f4f2f3
#c0a9bd
#becfd5
#c6d4c6

テーマ:癒しのアロマキャンドルはいかが?

yukkoさん(@y_u_k_k_o_4)からのリクエスト▼

シンプルで自然感ある癒しブログにしたい

癒し・スピリチュアル」なイメージを持つ

ナチュラルで優しい」くすみブルーとグリーンを合わせた
癒される配色です☺

なんだかいい香りがしてきそう!!!

 

12.天然オーガニックさん

ナチュラル ヘルシー カラーパレット デザイン  ウェブサイト 配色

コピペで使えるカラーコード
#f3eed5
#e4af9b
#d4dfbb

テーマ:天然オーガニックさん

Sayu
Sayu

「3色だけでセンスの良い色」から

お気に入りの配色を紹介するよ!

この本をマネするだけ
簡単にオシャレな配色が出来上がるので、重宝しています☺

デザイン初心者でも、素人っぽくない仕上がりになるの!

文字には、この配色に合わせたレーズンカラー(#5b424c)を使用しています☺

 

13.上品ミントでおしとやかに

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#c6c7c9
#dbd1c7
#96acaa
#043539

テーマ:上品ミントでおしとやかに

みさきさん(@mi21_fc)からのリクエスト▼

・優しい雰囲気かつ品のある感じ

・グリーンが好きだから淡いグリーンは入れたい

淡いミントグリーンが上品さを引き出しています。

包み込むようなやさしさを感じますね☺

14.ふんわり桜もちをお食べ

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fef4f5
#f7d6d5
#9e6e73
#bac4bb

テーマ:ふんわり桜もちをお食べ

さくらさん(@SakuraM_blog)からのリクエスト▼

イメージは「桜」の配色で

ピンクに合う色が知りたい!!

子どもっぽくならないような「桜もちパレット」に仕上げました☺

くすみ系ピンクでまとめると、春の優しい香りが漂うカラーに♪

 

15.夏旅はリゾートへ

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ffffff
#384d0c
#a4c594
#d8bb41

テーマ:夏旅はリゾートへ

夏に行きたいリゾート地をイメージ。

ゴールドが入ると「高級感・エレガントさ」のある洗練されたデザインに☺

レトロ|おしゃれな配色パターン

アンティークってすごくおしゃれなんです!

6つのレトロな配色をお楽しみください☺

16.ヴィンテージSTYLE

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#bacdd1
#f2ebd8
#aeb884
#f1c064

テーマ:ヴィンテージSTYLE

色褪せたようなくすみカラーを合わせた、ヴィンテージ味あふれる配色。

おちついた雰囲気に仕上がります☺

A子先生
A子先生

文字のカラーコードは「#1a1a1a」だよ👍

 

 

17.夜更けのレコードTIME

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#5a728b
#ffdd85
#c59c6c
#e2694c

テーマ:夜更けのレコードTIME

昔ながらのビニールレコードを連想させる配色。

「1日の終わりにゆっくり聴く音楽」をイメージしました☺

 

18.古着のスケーターBOY

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#dbdd94
#000000
#ccc3d5
#e0dbd7

テーマ:古着のスケーターBOY

古着のストリートファッションをイメージした配色。

黒をたま~に入れるのがレトロ感を出すポイントです👍

19.ロンドンっ子のアフタヌーンTEA

レトロ, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fdf6ee
#e05d4f
#61728f
#3b3833

テーマ:ロンドンっ子のアフタヌーンTEA

アンティークでおしゃれなロンドンのカフェを連想させる配色です。

A子先生
A子先生

レトロで大人っぽい雰囲気になるよ☺

 

20.90年代アメリカンGIRLS

レトロ, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ece4ba
#f3c95d
#d76734
#6297c1

テーマ:90年代アメリカンGIRLS

90年代アメリカの女子高生ファッションをイメージした配色。

レトロ + 可愛いサイトに仕上げたい人におススメです👍

A子先生
A子先生

90年代風ファッションは

現代の女の子たちにも大人気なの!

 

21.穴場のアンティークSHOP

レトロ, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f0e9d7
#f06f1e
#6b2625
#06bcec

テーマ:穴場のアンティークSHOP

知る人ぞ知る、お洒落レトロな雑貨やさんをイメージ。

茶色いクラフト紙のような背景色から、アンティークショップの香りがしそう!!

高級感|おしゃれな配色パターン

高級感をだすには「ゴールド」をいかにうまく入れるかがポイント👍

相性抜群のカラーパレットがこの5つ!!▼

22.高級ブランドのご褒美

高級感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#0f1626
#ab987a
#ff533d
#f5f5f5

テーマ:高級ブランドのご褒美

シックなカラーに、あえて鮮やかなオレンジを入れると

高級感かつ洒落た雰囲気を出すことができます。

A子先生
A子先生

オレンジのアクセントで

印象的なデザインに♪

 

23.上品に、エレガントに

高級感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#c0b283
#dcd0c0
#f4f4f4
#373737

テーマ:上品に、エレガントに

上品なゴールドを基調としたカラーパレット。

特に、女性向けサイトに向いているのではないでしょうか☺

文字の色はグレーがかった黒 (#373737) がよく合います👍

 

24.上質なペルシャ絨毯はお好き?

高級感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e0e0d8
#c8c2b6
#626f82
#434b56

テーマ:上質なペルシャ絨毯はお好き?

高級絨毯にありそうなシックでエレガントなカラー。

おちついた大人っぽい雰囲気に仕上がります☺

 

25.デパコスでおめかしして

高級感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#1b1110
#e7c9bd
#7d8f9f
#c3b58a

テーマ:デパコスでおめかしして

エレガントさもありつつ、可愛らしさも忘れない配色は

まさにデパートコスメって感じですね♡

Sayu
Sayu

大人っぽさ、可愛らしさ、上品さ全部兼ね揃えてる!

 

26.今夜はワインで乾杯

高級感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#601921
#d7c9aa
#ffffff

テーマ:今夜はワインで乾杯

深~いワインレッドとゴールドで高級感溢れる配色に。

例では背景に赤を使っていますが、
ホワイトの背景にポイントで赤をもってきてもおしゃれ!☺

アウトドア|おしゃれな配色パターン

クロマルさん(@kuromaru_plants)からのリクエスト▼

アウトドアな雰囲気の配色が知りたい!

5種類のアウトドアな配色をご覧ください。

27.わくわくキャンプ

アウトドア, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e88f2b
#f5e9db
#815935
#637007

テーマ:わくわくキャンプ

アウトドアと言えば「山」ということで
(私の個人的なイメージですがw)

土とコケを連想させるカラーを組み合わせました。

A子先生
A子先生

オレンジをアクセントに、わくわく感あふれる配色に♪

 

28.高山に登ろう

アウトドア, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#003058
#4c6f1b
#a6b8c2
#d9d9d7

テーマ:高山に登ろう

グレーや緑で落ち着いた雰囲気がでる、大人っぽい配色。

本来の高山をもとにした色だから、とってもナチュラル!

A子先生
A子先生

トーンが暗すぎると感じる場合は

背景を白にしてもOK!👍

 

29.鮮やかマリンビーチ

アウトドア, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#32586d
#ca3032
#b2d1d6
#f3f5f2

テーマ:鮮やかマリンビーチ

山の次は、海っ!!!ということで

王道のマリンカラー!!!

爽やかで可愛らしい雰囲気が出ます☺

 

30.たそがれビーチ

アウトドア, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fce1c3
#ffbc99
#7d8e95
#344649

テーマ:たそがれビーチ

とっきーさん(@moshiblo)からのリクエスト▼

エモい配色が知りたい!

夕暮れの日の入りを見ながら
思いふける瞬間ってまさにエモい気持ちになりますよね!

絶妙なオレンジが

心地よい配色だね♡

31.ハワイで見たサンセット

アウトドア, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#4846a5
#9f618b
#ef894d

テーマ:ハワイで見たサンセット

見渡す限りの夕暮れをイメージした配色。

まるでリゾート地に居るかのような気分にさせてくれます☺

ビジネス|おしゃれな配色パターン

ビジネスのキリっと感を表現するには、

誠実・インテリ」のイメージを持つ「」がピッタリ👍

スッキリ感を出すコツは

背景を白にして余白を多めに使うこと!!!

8つの配色を見ていきましょう!

32.できるサラリーマン

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#143268
#61c1bd
#98c9d9
#989898

テーマ:できるサラリーマン

さとるさん(@satorunooffice)からのリクエスト▼

・キリッとしたクールなイメージ

・ビジネスや仕事についての考え方にあう色

アオミネさん(@aomine_blog)からのリクエスト▼

・理系っぽさ & 知的な雰囲気の配色

・青を基調に

ブルー系の3色をバランスよく組み合わせた配色。

なんだか、バリバリ仕事をこなせそう!!!

 

33.私はキャリアウーマン

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#002849
#bfbbbb
#e1f0f4
#f0e2e0

テーマ:私はキャリアウーマン

仕事がデキるかっこいい女性のスーツ姿を連想させる配色。

清潔感のある、スタイリッシュなサイトに仕上がります👍

 

34.初心者にやさしいノウハウ先生

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#63b8a7
#529bba
#263238
#e5b9a3

テーマ:初心者にやさしいノウハウ先生

ハス山さん(@hasuyama0526)からのリクエスト▼

・記事に集中できるようなシンプルな感じ

・ノウハウ解説系のブログに合う色

ケイさん(@GqxmcfrjfzDd)からのリクエスト▼

・シンプルで誰でも包み込むような優しさ

・ビジネスのようなキリッと感もある感じ

・青は入れて欲しい

やわらかいオレンジベージュでやさしさのある雰囲気に。

穏やかな色には落ち着かせる効果があるから、記事に集中できそう!

例にあるイラストは、
ビジネス系のイラストが豊富なサイト「Storyset」からダウンロードできます。

無料 & 商用フリー画像のおススメサイトまとめはこちら▼

 

35.初心を忘れずに

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ff9933
#e1e1e1
#333366

テーマ:初心を忘れずに

「初めての社会人で緊張しながらも、ワクワクする!!」
というイメージの配色。

Sayu
Sayu

明るいオレンジは

紺とグレーで調和してあげよう☺

 

36.テクノロジーはお任せあれ

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#dfdfdf
#666666
#44d9e6
#ffffff

テーマ:テクノロジーはお任せあれ

ケビンさん(@kebinblog)からのリクエスト▼

・少し知的
・ガジェット

・シンプルなおしゃれ

蛍光色や青色はテクノロジーを連想させる効果があるので

「ネット・ビジネス・電化製品」などのテーマにおススメです。

蛍光色は多用するとダサくなりがち💦

メインではなく、ポイントで使うのがコツだよ!

37.はい!ひらめきました!

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#edce16
#3e4a77
#9eddd5
#ffffff

テーマ:はい!ひらめきました!

つるさん(@tsuru_3_1118)からのリクエスト▼

「人の悩みを解決する」をテーマにした配色

ひらめき」のイメージを持つ黄色を合わせた配色。

悩みが無くなってスッキリ!という気分にさせてくれますね!

彩度の高い色は純度100%じゃなく、

透明度を上げて透かせる

ライトで今風な仕上がりになるよ!

 

38.熱中できる仕事、みつけた!

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d9d9d9
#286181
#ff5757

テーマ:熱中できる仕事、みつけた!

赤は「やる気・熱血」を連想させる色だから

仕事がはかどりそう!!!

 

39.あなたを守ります。

ビジネス, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fffedf
#008f85
#279dd7
#184b81

テーマ:あなたを守ります。】

ケニーさん(@KennyShroffJp)からのリクエスト▼

「セキュリティ」な配色が知りたい!

緑は「安心・安全」。青は「プロフェッショナル・デジタル

といったイメージを与えてくれます。

ふんわりしたイエローのおかげで

優しく守ってくれるような印象に♥

可愛い|おしゃれな配色パターン

ポップで可愛らしい配色を14個ご紹介します♪

40.アイスクリームポップ

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#cfebdf
#fdfcea
#efcdc4
#c94216

テーマ:アイスクリームポップ

クリーミーなパステルカラーがアイスクリームみたいで可愛いっ♥

目立たせたいタイトルなどは、赤色で引き立たせましょう。

 

41.最近はやりの淡色女子

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ffffff
#efe8d9
#e4c9c0
#a68b62

テーマ:最近はやりの淡色女子

べるさん(@zuborahack)からのリクエスト▼

・30〜40代主婦向け

・可愛らしい感じ

・優しいピンク色メイン

あむさいさん(@amusai00blog)からのリクエスト▼

シンプルで優しい感じ!

ほんわかなブログ意識

淡いピンク・ブラウン・ベージュでクリーミーな配色に。

シンプル・女性らしさ・親しみやすさにピッタリのカラーです👍

 

42.ファンシーマカロン

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e6c5cf
#bdd8dd
#af9dc0

テーマ:ファンシーマカロン

3色だけで簡単にできる、可愛らしいパステルカラー!

ちなみにまた「3色だけでセンスの良い色」を参考にデザインしています▼

ふんわり女の子らしいサイトにしたい方にもってこいだね👍

 
43.絵の具でらくがきしちゃおっ

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ede0da
#6293a6
#faa55a
#edaeac

テーマ:絵の具でらくがきしちゃおっ

濃密な絵の具をイメージしました☺

彩度を落とした配色で、カラフルだけど落ち着いた印象に♪

背景がピンクがかったベージュなので、温かさや親しみやすさも生まれます。

背景が暗すぎる場合は、少しトーンを上げてみてね!

 

44.バレンタイン大作戦

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#7e6159
#8c2930
#ad6667
#fcdbd4

【テーマ:バレンタイン大作戦

かわいいいいいい~~~♡

これぞ、恋する乙女!!!な配色をイメージしました。

Sayu
Sayu

深めの赤だから子どもっぽくならない!

 

45.カップケーキでインスタ映え

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d4eae8
#ff917a
#fcc439
#ffebe4

こんなに素敵なカップケーキがあったら、絶対にインスタグラムに載せたい!

可愛らしさには、やっぱりパステルカラーが最強ですね💛

46.大きなリボンで視線をあつめて

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fff8f3
#fbe0da
#db9281
#445c66

【テーマ:大きなリボンで視線をあつめて

ガーリーな女の子らしさを演出する配色💛

A子先生
A子先生

可愛さで読者をトリコにしちゃおっ

 

47.パステルな外車で海辺ドライブ

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#edd1d0
#f7f3ed
#6fc6be
#3d3f3e

テーマ:パステルな外車で海辺ドライブ

パステルカラーの外車で、エメラルドグリーンの海辺を走り抜けるイメージ。

使い方次第で、ガーリーにもシンプルにもなる配色です☺

 

48.幸せのお届けもの

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f3d3c7
#fed67d
#b7d4be
#faf6f3

テーマ:幸せのお届けもの

ここぽさん(@cocopo_seikatu)からのリクエスト▼

・元気で可愛くて、でもうるさすぎない感じ!

・ガチャガチャしすぎないイメージ

「元気さ」を連想させる黄色

淡いグリーンとピンクで可愛らしさをプラス♥

目に優しい色だからゴチャゴチャしない!!

 

49.チョコミントな気分

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#675141
#efe6d5
#b5e8d8

テーマ:チョコミントな気分

クリーミーなベージュにエメラルドグリーンを合わせた、チョコミントカラー♥

甘くなり過ぎないけど、可愛らしさも忘れない。
そんな配色です☺

 

50.とにかくモテるおっとり女子

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f3dbcf
#e5c1cd
#fa8c72
#aac9cd

テーマ:とにかくモテるおっとり女子

きよさん(@kiyo_20210701)からのリクエスト▼

・女性の読者向け

・すっきりしつつもちょっとかわいらしく

・空とトリが好き

おとなしめで可愛らしい、まさに「モテ女子」カラー!

みんなから愛されるサイトを作りましょ💛

 

51.ふわふわマシュマロの夢

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e5f0f9
#ffffff
#e2e2e1
#f9f2ea

今にも溶けてしまいそうな、フワフワ~な配色。

なんだかジェラート〇ケを着ている女の子っぽい!!(笑)

 

52.ラベンダーカモミールの香り

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f6d8a2
#ae849c
#c8c7d7

テーマ:ラベンダーカモミールの香り

みこやまさん(@miko_writer)からのリクエスト▼

・30代女性

・女性特有の悩み

・落ち着いた感じ

・シンプルだけどかわいさも忘れない

・くすんだ紫が欲しい

くすんだ紫は「大人の女性の悩み」にピッタリのカラーですね!

おちついたイエローで可愛さもプラス♥

 

53.夢の中のディズニーランド

かわいい, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#eddbd2
#ced6d0
#909792
#cd8477

テーマ:夢の中のディズニーランド

夢の中に出てくる、テーマパークの空をイメージした配色。

ふんわり可愛らしいデザインに仕上がります☺

シンプル|おしゃれな配色パターン

シンプルで洗練された印象をだすには、「余白」をいかに活用できるかが重要👍

余白の取り入れ方はこちら▼

白によく合う4つの配色を提案します。

54.ミニマルなくらし

シンプル, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ebebeb
#363330
#afbdb0

ミニマリストというと「モノクロ」をイメージする方も多いとおもいますが

ワンポイント「色」をいれても、シンプルで洗練されたデザインになります☺

Sayu
Sayu

おちついたグリーンが映えておしゃれ!!

 

55.やさしいコットンで包み込んで

シンプル, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#979286
#cbc8c2
#efeae7
#000000

テーマ:やさしいコットンで包み込んで

Emmaさん(@EmmaDiaries24)からのリクエスト▼

白を基調に洗練された雰囲気のデザインが知りたい!

やわらかいコットンのような、繊細なカラーパレット。

ニュアンスカラー(グレーがかった曖昧な色)は、最近のトレンドなんです👍

Sayu
Sayu

流行を取り入れたい!

大人っぽいデザインが好き!という人におすすめ♡

 

56.シックなひとり暮らし

シンプル, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#222c33
#ae9e8b
#d1d9df
#939d9d

テーマ:シックなひとり暮らし

シックで落ち着いた色は、白と相性抜群!

スタイリッシュで洗練されたデザインに仕上がります。

Sayu
Sayu

こんな部屋に住んでみたい、、💛

 

57.透きとおる雪景色

シンプル, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#575653
#e8e6eb
#b4cbd3

テーマ:透きとおる雪景色

サニーさん(@sunnysan_2021)からのリクエスト▼

シンプルだけど、オシャレな配色が知りたい!

すみわたる美しい雪景色をイメージした、
すっきりお洒落なカラーパレットです☺

韓国|おしゃれな配色パターン

ヨロイさん(@yochanblog)からのリクエスト▼

韓国っぽい配色が知りたい!

4種類の韓国っぽい配色をご紹介します☺

58.韓国の雑貨屋さん

韓国, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e1ac9a
#456651
#e3c77e
#fefdfb

テーマ:韓国の雑貨屋さん

るんぱんさん(@runrunpan13571)からのリクエスト▼

・明るく楽しい感じ

・素朴っぽさも欲しい!

カーキ・からし色・くすみピンクで

カラフルで可愛らしいけど素朴っぽさもある雰囲気に☺

 

59.K-POPアイドルに恋して

韓国, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#9baad5
#c7bace
#f5c9c8

テーマ:K-POPアイドルに恋して

韓国アイドルをイメージしたパステルカラー♡

ファンシーで可愛らしい雰囲気のサイト向けです!

 

60.ようこそ、韓ドラの沼へ

韓国, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fbfcea
#c7c19b
#d7c3de
#f1bd8e

テーマ:ようこそ、韓ドラの沼へ

韓ドラって、一度ハマったら引きこもりになってしまいますよね。(今の私w)

部屋でダラダラとくつろぐような、ゆったりとした配色です☺

 

61.ソウルでカフェ巡り

韓国, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#0f57f7
#feb1c3
#f4f3ee

テーマ:ソウルでカフェ巡り

パきっとした青色でも、組み合わせ次第でおしゃれな配色に👍

韓国ポップをイメージしました。

A子先生
A子先生

濃い色は広範囲ではなく、ポイントで使うのがコツだよ!

モダン・スタイリッシュ|おしゃれな配色パターン

現代風なカラーを5つ提案します!

A子先生
A子先生

トレンド感たっぷりの配色を

使いこなそう!

62.癒しのリラックスモダン

モダン, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#293b45
#3c4a4b
#ebebeb
#a1c7c3

テーマ:癒しのリラックスモダン

やむやむさん(@yambiyori)からのリクエスト▼

おしゃれでシンプルで落ち着いてる感じだけど、

行き過ぎてなくて、親しみのあるイメージ

親しみやすさには【オレンジ】がよく合います。

目に優しいグリーンで癒しも感じる色合いに♪

 

63.和みのおしゃれモダン

モダン, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#be845f
#fee0de
#33557b
#badbed

テーマ:和みのおしゃれモダン

リッチーさん(@richy_invest)からのリクエスト▼

・落ち着いててオシャレな感じ!

・ライトブルーを入れて欲しい

暖色と寒色を組み合わせた、斬新でおしゃれなカラーパレット。

ブラウンを入れると一気に落ち着いた印象になりますね!

 

64.和×モダン

モダン, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d4504e
#3c4a4b
#f6efe7
#ffffff

テーマ:和×モダン

和 × モダン」のテイストに仕上げた現代風な配色です。

和モダンとは、

日本の伝統的な柄・イラストを使いながら
近代風なデザインにしていくというもの。

日本の美を現代風にイメージさせる、

トレンドデザインなの!!

 

65.周りと差がつくテラゾーモダン

モダン, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#23454d
#668c95
#d4acaa
#d1d2d3

テーマ:周りと差がつくテラゾーモダン

テラゾーとは人工大理石のことで、

モダンなインテリアなどで多用されている
トレンドデザインなんです!

Sayu
Sayu

テラゾーにピッタリな配色を作ってみたよ!

砕いた石をちりばめたような柄がおしゃれですよね♪

 

66.元気なカラフルモダン

モダン, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f5b488
#f1dfb4
#f4f071
#adacd4

テーマ:元気なカラフルモダン

まんもすばななさん(@manmosubanana)からのリクエスト▼

元気で今風な感じ!!

元気・陽気なイメージには【黄色】が一番あう!

蛍光色のイエローが引き立つ、クリエイティブで今風な配色です。

白い余白を多くいれると

色が映えておしゃれになるよ👍

おちついた親近感|おしゃれな配色パターン

親しみやすい、ほっこりとした配色を11個ご紹介します♪

67.甘味たっぷり秋の柿

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e4dfd6
#c7a085
#c15123
#1d454d

テーマ:甘味たっぷり秋の柿

完熟の柿を連想させるカラーパレット。

深い緑とオレンジがおちついた印象を与えてくれます☺

 

68.コーヒー豆のきもち

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#dad5d2
#d5c582
#caaa8c
#443a34

テーマ:コーヒー豆のきもち

暖色を組み合わせた、温かい配色。

コーヒー豆の「きもち」は分かりませんが(笑)、

おいしいコーヒーを飲んでホッと一息できそうなカラーですね☺

 

69.ほっこりテラコッタ

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#a65d34
#ccafab
#283d53
#f6f1eb

テーマ:ほっこりテラコッタ

ORIMOさん(@Oorimokorimo7)からのリクエスト▼

・シンプルで洗練された感じ

・手書きイラストが合う、温かみも感じられるデザイン

テラコッタ、紺色、くすみピンクが温かいイメージを引き出す配色。

重めの3色を使用していますが

背景のベージュを多めに取り入れる
シンプルで洗練されたデザインに仕上がります☺

 

70.おいしいもの大好き!

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#edd5c1
#fab879
#fe675e
#ac663e

テーマ:おいしいもの大好き!

きなこさん(@kinako_pupipu)からのリクエスト▼

・ここ行ってみよう!となるような感じ

食欲をかきたてる色

・ママさん達に親しんで貰いたい

食欲をそそる色は、赤やオレンジなどの暖色です。

また暖色は、親しみやすさを感じる色でもあるんです!

には、行動を促す効果があるから

ここに行ってみよう!と感じさせるのにピッタリなの♪

 

71.自炊で健康生活

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#49573d
#f5c330
#dd702b
#f3eee8

テーマ:自炊で健康生活

食欲がわくカラー第2弾!!

濃密でおちついた暖色は、家庭の味を連想させますね☺

72.スパイス香る抹茶ラテ

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ccdfcc
#fe675e
#004f56
#ebe4d5

テーマ:スパイス香る抹茶ラテ

モスさん(@moskun39)からのリクエスト▼

・優しくて親しみがある感じ

・緑がほしい

抹茶ラテのようなクリーミーな緑とベージュで、落ち着いた雰囲気に。

アクセントに親しみを感じるオレンジを持ってくることで

印象的なサイトに仕上げることができます☺

 

73.都会のカフェでひとやすみ

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d4dee0
#f5f1e8
#d7c9bc
#705c53

テーマ:都会のカフェでひとやすみ

sumikaさん(@sumika_diary)からのリクエスト▼

・安心感

・都会的な雰囲気+かわいらしさ

・また来たいな…と思い出してもらえるようなワンポイント

通いたい!と思うような都会のカフェのイメージ♪

落ち着いたブラウンに、淡いブルーをプラスすると

安心感 & 可愛いらしい印象になる!!

 

74.陶芸でつくる私だけの器

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f7f3f4
#e2c2b3
#697478
#403134

テーマ:陶芸でつくる私だけの器

粘土を連想させるような滑らかな配色。

陶芸のお皿ってこんな色じゃないですか、そのイメージです (笑)

人の肌に近いヌーディーカラーだから

おちついた印象に♡

 

75.くすみオリーブでほっこりと

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#b7b698
#ffac75
#dbd6d2
#4c4218

テーマ:くすみオリーブでほっこりと

fukusukeさん(@K25jTnCP3qJV2Oa)からのリクエスト▼

・シンプルかつ温かみのあるイメージ

・グレーやカーキなどくすんだ色が好き

くすんだカーキ、グレーに温かみのあるオレンジをプラス。

ほっこりと心地の良い配色です☺

Sayu
Sayu

似た配色で【女性らしい柔らかさ】プラスした

バージョンも▼

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#b7b698
#ffac75
#d3b094
#f6f2ef

ゆんさん(@daily_phn)からのリクエスト▼

優しく温かい雰囲気があって、

オレンジとか目に優しい緑のイメージ

グレーではなくベージュを使うと、また一味違う雰囲気になりますね♪

 

76.思い出ぽろぽろ

やわらかい 温かい カラーパレット デザイン パケージ ウェブサイト 配色

コピペで使えるカラーコード
#ede4db
#ecd0c3
#979e97
#9f8854

テーマ:思い出ぽろぽろ

なんだか実家の香りがしそうな、落ち着いた配色。

家庭的・ほんわか」なイメージによく合います👍

 

77.甘~いかぼちゃをじっくり煮込んで

親近感, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ede4db
#697031
#20372f
#f1b249

テーマ:甘~いかぼちゃをじっくり煮込んで

甘味たっぷりのかぼちゃの煮つけを連想させる配色です☺

A子先生
A子先生

ほくほく感が伝わってくる!!

夏っぽい爽やか|おしゃれな配色パターン

爽やかで涼しげな配色アイデアを提案します☺

78.ウキウキおまかせ海外ツアー

爽やか, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f3b868
#69cec7
#bfefec
#f5f5f5

テーマ:ウキウキおまかせ海外ツアー

penpenさん(@penpenbloger)からのリクエスト▼

旅行系でわくわくする感じ!

海・空をイメージさせる「エメラルドグリーン」で旅行っぽさ、

黄みがかった「オレンジ」でわくわく感、高揚感をあらわした配色。

A子先生
A子先生

旅行したくなってきた!!

 

79.搾りたて!フレッシュジュース

爽やか, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#efffd8
#c3eb89
#ffdb1d
#ffb001

テーマ:搾りたて!フレッシュジュース

みずみずしい果物をイメージした配色。

元気あふれる、明るい印象に仕上がります👍

 

80.新生活、はじめました。

爽やか, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fef4e5
#b3cfef
#89837c
#fecc5f

テーマ:新生活、はじめました。

ゆまるさん(@shuhuneet)からのリクエスト▼

新婚生活の爽やかさを出しつつ、くすんだ落ち着いた感じ

くすみブルーをくすみイエローで

新鮮さ・爽やかさプラス、落ち着いた雰囲気に♪

 

81.しゅわしゅわ弾けるクリームソーダ

爽やか, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f7f9ee
#dcf8cc
#7ecaae
#e24d51

テーマ:しゅわしゅわ弾けるクリームソーダ

まさにメロンソーダからそのまま抜き取ったような配色。

爽やかさと可愛さを兼ね揃えていますね。

 

82.星の数ほど恋をしよう

爽やか, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ffffff
#b6efe6
#ffe674
#b6c1c5

テーマ:星の数ほど恋をしよう

とっきーさん(@moshiblo)からのリクエスト▼

恋愛の甘酸っぱさがある爽やかな配色が知りたい!

涼しげなライトブルーで「青春の爽やかさ」を表現。

鮮やかなイエローを組み合わせると、
フレッシュな甘酸っぱさが生まれます☺

子ども向け|おしゃれな配色パターン

13種類の子ども向けサイトに合う配色をお楽しみください☺

83.ハローベイビー

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#fffbef
#fedcac
#c6dee8
#ddebc7

テーマ:ハローベイビー

赤ちゃんにぴったりな、やわらかくて優しい配色パレット。

全体がふんわりとした印象に仕上がります☺

 

84.みんなで仲良し

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ffffff
#9d968c
#fa8c72
#95cfc3

テーマ:みんなで仲良し

ちゃむマユさん(@mayutoito)からのリクエスト▼

・子どもと遊ぶ、ポップな感じ

・やさしい配色

めぇぷるさん(@maple_mama55)からのリクエスト▼

・子ども向けで可愛く

・うるさすぎない感じでシンプルな配色

奇抜な色は避けて、目に優しいカラーでまとめてみました☺

あえてグレーを使うと子どもっぽくなり過ぎない!!

 

85.恐竜さんどこかな?

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#406989
#bde2ff
#9abe90
#e3ec9d

テーマ:恐竜さんどこかな?

どちらかというと、男の子を連想させるカラー。

わんぱくで可愛らしい印象に仕上がります☺

 

86.いつでもあなたの味方です

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#feb66c
#000000
#faccbc
#ededed

テーマ:いつでもあなたの味方です

くまこさん(@kumako_blog)からのリクエスト▼

・シンプルでおだやか

・子どもとの心地よい暮らしのイメージ

・ただのんびりゆったりまったりじゃなく、芯のある強さも表現

モチさん(@mochinomad)からのリクエスト▼

・おしゃれで穏やかなイメージ

・乳児から中学生まで使える、子どもっぽくない感じ

温かみのあるオレンジとピンクで可愛らしい穏やかな雰囲気をだしつつ

黒で引き締まったメリハリのある配色にすると、子どもっぽくない!

Sayu
Sayu

「わが子を見守るお母さんの気持ち」をイメージしたよ!

87.くまくんとお友達

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f0e9d9
#ae967a
#52351e
#c1c48d

テーマ:くまくんとお友達

やわらかいブラウンとオリーブカラーで

自然のナチュラルさを演出しました。

A子先生
A子先生

優しいイメージ、子供っぽくないデザイン

にしたい人におススメ!

 

88.わんぱくポップ

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#0E9664
#ffb923
#f68816
#fa5b48

テーマ:わんぱくポップ

わくわく感あふれるカラフルな配色。

A子先生
A子先生

彩度が高い色を使うときは、

背景色のトーンを抑えるのがポイント!!

このような濃い色は、
周りに余白を多めに取るとバランスの取れた配色に仕上がります☺

 

89.ミルクの良い香り

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#f7e9e8
#d6e0ea
#f5efdf
#d3e2cf

テーマ:ミルクの良い香り

とっても優しいパステルカラーがかわいらしい配色。

ミルクの優しい香りがする赤ちゃんを連想させますね☺

 

90.森のつみき屋さん

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#116951
#eddebd
#ffbb12

テーマ:森のつみき屋さん

つみき専門店というものが実際にあるのか。というのはさておき

生い茂る森のような深緑がナチュラルな配色です☺

A子先生
A子先生

かなり濃い緑だけど

ナチュラルだから全体に使ってもオシャレなの!

もっとシンプルに仕上げたい人は
真ん中のベージュを多く取り入れるといい感じになります👍

 

91.うさぎさんとお昼寝

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e8c9ba
#e9e7e3
#e3cfbb
#b2a28e

テーマ:うさぎさんとお昼寝

ピンクブラウンでまとめた、同系色のおちついた配色。

どちらかというと、女の子っぽい印象を与えます☺

 

92.きみも勉強が好きになる

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#ffe9e4
#32586d
#b5d3d4

テーマ:きみも勉強が好きになる

ともままさん(@tomomama_10)からのリクエスト▼

勉強・学習系だけど、
難しく感じさせない親しみやすさがあるイメージ

集中力を高める効果がある「」と、落ち着いた「うすピンク」で

親しみやすさのある配色に。

青は、学校や塾のHPでもよく使われるカラーなの♪

 

93.おままごとで遊ぼっ

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#dcaa26
#4eb791
#f5d0bf
#f5f5f0

テーマ:おままごとで遊ぼっ

だるまさん(@uchihoku)からのリクエスト▼

子供向けでほっこりしたイメージ

暖色でほっこりしたイメージをだしつつ、

明るいグリーンで遊び心をプラスした配色です☺

 

94.ヴィンテージキッズ

こども, 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d7cf88
#818076
#b8d4d3
#f3f5f2

テーマ:ヴィンテージキッズ

子どもっぽくなり過ぎないよう、トーンを抑えてヴィンテージ味のある配色に。

くすみカラーが好きな人におススメです♪

 

95.おさんぽ日和

子ども カラーパレット デザイン パケージ ウェブサイト 配色

コピペで使えるカラーコード
#ffdfc3
#e6bf54
#f0a167
#a75d27

テーマ:おさんぽ日和

あさぴぴさん(@asa_pipi2021)からのリクエスト▼

お日様×子供+ママ向けの感じ。

温かさ、素朴さ、親しみやすさのある配色を知りたい!

暖色でまとめて、あたたかみ溢れる配色に。

もう少しやわらかい印象にしたい方は、彩度を落とすのがおススメ👍

個性的|おしゃれな配色パターン

周りと被りたくない!という人にもってこいの

変わり種カラーパレットを5つご紹介します♪

96.インパクトで勝負!

個性的 派手 カラーパレット デザイン パケージ ウェブサイト 配色

コピペで使えるカラーコード
#c81db7
#f4db42
#393839

テーマ:インパクトで勝負!

一度見たら忘れないような、インパクトのある配色。

芸術的で良いですね~!!

 

97.”デザイン上級者”に!俺はなる!

 配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#e2f2f2
#e3e4bd
#bd1b3c
#341015

テーマ:”デザイン上級者”に!俺はなる!

緑とも黄色とも言えない絶妙なカラーを加えた、変わり種な配色。

まさに「デザイン上級者に!俺はなる!」って感じですね (?)

え?シレっと記事リンクを貼ります。はい。

 

98.ネオン!ネオン!ネオン!

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#edeced
#fa643f
#4c849b
#badbf3

テーマ:ネオン!ネオン!ネオン!

その名の通り、ネオンカラーを組み合わせた配色。

ポップなサイトが好きな人におススメです☺

 

99.個性あってなんぼ!

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#d8d8d8
#7e67a2
#f4d668
#29444a

テーマ:個性あってなんぼ!

こちらもなかなか見ない配色ですね!

しっかりと自分の個性を出していきましょう👍

 

100.デザインは自由だ!!

配色, 色, カラーパレット, 配色パターン, サイト, ウェブデザイン, センス,  配色アイデア, 色の組み合わせ, web, おしゃれ, デザイン, イラスト, ブログデザイン, ブログ

コピペで使えるカラーコード
#efe2d9
#1e58ee
#ff5936
#fcb4c0

テーマ:デザインは自由だ!!

最後は「デザインは自由だ!!」ということで

遊び心のあるポップな色を「これでもかっ!」と詰め込みました。

Sayu
Sayu

自由に楽しんでこそ、良いデザインができるの!!!

100種類もの配色にお付き合いいただき、ありがとうございました☺

【おしゃれな配色パターンと色の組み合わせ】まとめ

色の図鑑はいかがでしたか?

あなたの好みの色は見つかりましたか?

この記事が、デザインについて分からない方のお役に立てたらな。
と思っています(´▽`*)

Sayu
Sayu

また素敵な色が見つかれば、シェアするね!!

ブログデザインに使えるフリー素材サイトまとめはこちら▼

最後まで読んで頂きありがとうございました。

皆さんのブログがもっと充実しますように♥

コメント

  1. こなきあ より:

    100種類ものデザインを見る事ができて、感動しました!
    自分のブログが雑記ブログなので、テーマやイメージが決まらず、
    とりあえず無難な白色をベースにしていたのですが、このブログをみて、
    配色を考えて変更したくなりました。

    • SayuSayu より:

      こなきあさん
      いつもブログを参考にしていただきありがとうございます!
      ブログを拝見しましたが、背景が淡いグレージュで洗練されたデザインに惚れ惚れしました、、、♥とってもすてきな配色です!!
      コメントも嬉しいです☺ありがとうございます!!♥

タイトルとURLをコピーしました