個人ブログ向け|白背景で使えるおしゃれな配色見本73パターン

好きな色や「なんとなく」でブログの色を決めて、『なぜかダサい』『理由は分からないけど見にくい』配色になった経験はありませんか?

この記事では、白背景のブログでコピペして使える「おしゃれな配色パターン」を色や作りたい雰囲気ごとに紹介します。

この記事で分かること
  • 色やブログのイメージごとにオススメの配色サンプル
  • それぞれの色コード

配色サンプルの使い方

配色サンプルイメージ

配色サンプルの構成
  • メインカラー
  • サブカラー
  • アクセントカラー

背景は白であることを前提に、配色イメージ(見本)と並べています。

構成色のコードをコピペすれば、ブログをサンプルと同じような配色にすることができます。
本文のフォントカラーは「#454545」(濃いグレー)です。

メインカラーやサブカラーをどう配置するかは、WordPressの場合テンプレートによって異なります。
各ブログでプレビューしながら設定してみて下さい。

赤系の配色サンプル

元気で明るいイメージ

メインカラー:
#D43A34
サブカラー:
#E47D7A
アクセントカラー:
#FFD323
元気で明るいイメージ
メインカラー:
#C13347
サブカラー:
#EEAC5B
アクセントカラー:
#068A7C
元気で明るいイメージ
メインカラー:
#D34C5E
サブカラー:
#F3A818
アクセントカラー:
#17A8EC
元気で明るいイメージ

女性向けのイメージ

メインカラー:
#D8607A
サブカラー:
#EBABB9
アクセントカラー:
#EDA10D
女性向けのイメージ
メインカラー:
#D05691
サブカラー:
#DE788E
アクセントカラー:
#FFCE0C
女性向けのイメージ
メインカラー:#BD3351
サブカラー:#E888B6
アクセントカラー:#524EAE
女性向けのイメージ

大人っぽい、高級なイメージ

メインカラー:
#A52637
サブカラー:
#C35866
アクセントカラー:
#355697
大人っぽい、高級なイメージ
メインカラー:
#862421
サブカラー:
#503944
アクセントカラー:
#0089A6
大人っぽい、高級なイメージ
メインカラー:
#831035
サブカラー:
#A45971
アクセントカラー:
#d6a40a
大人っぽい、高級なイメージ

オレンジ系の配色サンプル

ポジティブなイメージ

メインカラー:
#DC5E3C
サブカラー:
#E47B5F
アクセントカラー:
#F4C107
ポジティブなイメージ
メインカラー:
#ED7429
サブカラー:
#EBB800
アクセントカラー:
#5BBE37
ポジティブなイメージ
メインカラー:
#D75C26
サブカラー:
#EB896D
アクセントカラー:
#2064BD
ポジティブなイメージ

健康的なイメージ

メインカラー:
#E1691D
サブカラー:
#E8922A
アクセントカラー:
#15A015
健康的なイメージ
メインカラー:
#E58611
サブカラー:
#F87A5D
アクセントカラー:
#009C7F
健康的なイメージ
メインカラー:
#E2552F
サブカラー:
#F09800
アクセントカラー:
#1477A9
健康的なイメージ

親しみやすいイメージ

メインカラー:
#DE927A
サブカラー:
#D4B175
アクセントカラー:
#06A975
親しみやすいイメージ
メインカラー:
#F58262
サブカラー:
#E3854B
アクセントカラー:
#FADA3C
親しみやすいイメージ
メインカラー:
#C19579
サブカラー:
#FA9C48
アクセントカラー:
#3A7DD2
親しみやすいイメージ

黄色系の配色サンプル

明るさや希望を感じるイメージ

メインカラー:
#FEDE3E
サブカラー:
#FFEC8E
アクセントカラー:
#0C8BC5
明るさや希望を感じるイメージ
メインカラー:
#FBDE1E
サブカラー:
#EFB625
アクセントカラー:
#13ABA4
明るさや希望を感じるイメージ
メインカラー:
#EDBA0B
サブカラー:
#FFE600
アクセントカラー:
#3666C4
明るさや希望を感じるイメージ

子ども(保護者)向けのイメージ

メインカラー:
#FAEA61
サブカラー:
#F3BF23
アクセントカラー:
#24A330
子ども(保護者)向けのイメージ
メインカラー:
#F9D520
サブカラー:
#F99821
アクセントカラー:
#0C85B5
子ども(保護者)向けのイメージ
メインカラー:
#FFE600
サブカラー:
#85C22D
アクセントカラー:
#F25CA5
子ども(保護者)向けのイメージ

親しみやすいイメージ

メインカラー:
#F5C721
サブカラー:
#FBE472
アクセントカラー:
#12A375
親しみやすいイメージ
メインカラー:
#F5D166
サブカラー:
#D1D958
アクセントカラー:
#159CC4
親しみやすいイメージ
メインカラー:
#FEF394
サブカラー:
#FAC18A
アクセントカラー:
#1391A0
親しみやすいイメージ

緑系の配色サンプル

ナチュラルでやわらかいイメージ

メインカラー:
#77B233
サブカラー:
#B6E482
アクセントカラー:
#F1EA2C
ナチュラルでやわらかいイメージ
メインカラー:
#51BF51
サブカラー:
#7ED77E
アクセントカラー:
#F76942
ナチュラルでやわらかいイメージ
メインカラー:
#CADE57
サブカラー:
#FCCE53
アクセントカラー:
#D34C5E
ナチュラルでやわらかいイメージ

前向きで元気なイメージ

メインカラー:
#009250
サブカラー:
#6FBB18
アクセントカラー:
#FAD922
前向きで元気なイメージ
メインカラー:
#009C7E
サブカラー:
#43A9CB
アクセントカラー:
#F8CF05
前向きで元気なイメージ
メインカラー:
#6FBB18
サブカラー:
#F8F24A
アクセントカラー:
#D6431B
前向きで元気なイメージ

安心、安定感のあるイメージ

メインカラー:
#21863D
サブカラー:
#A8BE50
アクセントカラー:
#355697
安心、安定感のあるイメージ
メインカラー:
#75B765
サブカラー:
#4F7368
アクセントカラー:
#744E82
安心、安定感のあるイメージ
メインカラー:#7D9D74
サブカラー:#F7E049
アクセントカラー:#B6331D
安心、安定感のあるイメージ

青系の配色サンプル

万人受けするイメージ

メインカラー:
#0080B2
サブカラー:
#44A5CC
アクセントカラー:
#F8DD2D
万人受けするイメージ
メインカラー:
#00A5AB
サブカラー:
#61B2DB
アクセントカラー:
#E8552D
万人受けするイメージ
メインカラー:
#0D7DB5
サブカラー:
#5C6DAD
アクセントカラー:
#7CC32B
万人受けするイメージ

ビジネス、信頼感のあるイメージ

メインカラー:
#00668E
サブカラー:
#2A5183
アクセントカラー:
#BD2F39
ビジネス、信頼感のあるイメージ
メインカラー:
#27657F
サブカラー:
#3490BC
アクセントカラー:
#884588
ビジネス、信頼感のあるイメージ
メインカラー:
#253E52
サブカラー:
#635A8B
アクセントカラー:
#469321
ビジネス、信頼感のあるイメージ

知的、先進的なイメージ

メインカラー:
#2A86B4
サブカラー:
#5D90A9
アクセントカラー:
#FFD800
知的、先進的なイメージ
メインカラー:
#4D6CA9
サブカラー:
#9C79A9
アクセントカラー:
#EF9F2C
知的、先進的なイメージ
メインカラー:
#2389A4
サブカラー:
#5CB58D
アクセントカラー:
#F1812E
知的、先進的なイメージ

涼しい、爽やかなイメージ

メインカラー:
#45C1D7
サブカラー:
#69ABE2
アクセントカラー:
#345D9B
涼しい、爽やかなイメージ
メインカラー:
#237ECA
サブカラー:
#56C2E1
アクセントカラー:
#35A056
涼しい、爽やかなイメージ
メインカラー:
#97DDE0
サブカラー:
#8ABAE0
アクセントカラー:
#FFE81C
涼しい、爽やかなイメージ

紫系の配色サンプル

高級感のあるイメージ

メインカラー:
#573F75
サブカラー:
#826F7C
アクセントカラー:
#C43912
高級感のあるイメージ
メインカラー:
#522545
サブカラー:
#CA8FA1
アクセントカラー:
#E6AE03
高級感のあるイメージ
メインカラー:
#342744
サブカラー:
#614F74
アクセントカラー:
#7BB206
高級感のあるイメージ

女性らしい上品さ、やさしいイメージ

メインカラー:
#AE88BC
サブカラー:
#E3A5CD
アクセントカラー:
#3AA2AB
女性らしい上品、やさしいイメージ
メインカラー:
#6C5FA7
サブカラー:
#799ED1
アクセントカラー:
#CD384B
女性らしい上品、やさしいイメージ
メインカラー:
#AF5D98
サブカラー:
#AA9FD6
アクセントカラー:
#17A38A
女性らしい上品、やさしいイメージ

神秘的、リラックスできるイメージ

メインカラー:
#8B4BA3
サブカラー:
#9BA1B5
アクセントカラー:
#3F5070
神秘的、リラックスできるイメージ
メインカラー:
#5F519C
サブカラー:
#7A9BC8
アクセントカラー:
#C24C5C
神秘的、リラックスできるイメージ
メインカラー:
#B28BC0
サブカラー:
#E086C1
アクセントカラー:
#5C4872
神秘的、リラックスできるイメージ

落ち着きのある、オシャレな配色サンプル

メインカラー:
#447EAD
サブカラー:
#62ABC2
アクセントカラー:
#DF4F49
落ち着きのある、オシャレな配色サンプル
メインカラー:
#C9AB3E
サブカラー:
#EF9660
アクセントカラー:
#109269
落ち着きのある、オシャレな配色サンプル
メインカラー:
#2F765F
サブカラー:
#5F9AAB
アクセントカラー:
#E26842
落ち着きのある、オシャレな配色サンプル

スタイリッシュな配色サンプル

メインカラー:
#3C67A0
サブカラー:
#566271
アクセントカラー:
#FED71A
スタイリッシュな配色サンプル
メインカラー:
#394254
サブカラー:
#687FAE
アクセントカラー:
#B7443B
スタイリッシュな配色サンプル
メインカラー:
#3C2E41
サブカラー:
#EEDA33
アクセントカラー:
#CF322E
スタイリッシュな配色サンプル

男性向け、力強い配色サンプル

メインカラー:
#43251E
サブカラー:
#5A5033
アクセントカラー:
#2D9AD2
男性向け、力強い配色サンプル
メインカラー:
#202E2B
サブカラー:
#42513C
アクセントカラー:
#FAD626
男性向け、力強い配色サンプル
メインカラー:
#242624
サブカラー:
#174745
アクセントカラー:
#BD341D
男性向け、力強い配色サンプル

女性向け、かわいい配色サンプル

メインカラー:
#E983B4
サブカラー:
#EDBED1
アクセントカラー:
#3975C2
女性向け、かわいい配色サンプル
メインカラー:
#69B89F
サブカラー:
#F9F05C
アクセントカラー:
#EE4E74
女性向け、かわいい配色サンプル
メインカラー:
#B45066
サブカラー:
#EC9CCA
アクセントカラー:
#186B94
女性向け、かわいい配色サンプル

ポップで明るい配色サンプル

メインカラー:
#F17B31
サブカラー:
#F9CE32
アクセントカラー:
#2962AD
ポップで明るい配色サンプル
メインカラー:
#0E80AC
サブカラー:
#00A199
アクセントカラー:
#E84141
ポップで明るい配色サンプル

モノトーンな配色サンプル

メインカラー:
#252D34
サブカラー:
#ABADB3
アクセントカラー:
#E9A51B
モノトーンな配色サンプル
メインカラー:
#292927
サブカラー:
#4A534A
アクセントカラー:
#AC1C30
モノトーンな配色サンプル

配色見本まとめ

参考になるカラーは見つかりましたか?
ご紹介したカラーを元に、トーンを変えたり一部だけアレンジしてみるのもオススメです。

アンディ
サブカラーが1色では物足りない場合は、同じトーンの配色を追加したり、フォント部分だけ彩度を抑えたカラーにするときれいにまとまります。