🎨 6つのテーマカラーパレット完全集
Cocoon-grayish専用アイキャッチ自動生成用カラーパレット
💡 使い方： grayish専用設計： くすみ系カラーを中心とした上品なパレット。
お好みのテーマを選んで、カラーコードをクリックするとコピーできます。PHPコードをそのまま子テーマのfunctions.phpに追加してご利用ください。
※私のサイト自体が暗めのデザインなので、ここでは微妙に見えても、
「grayishの背景色次第では綺麗に見えるかもしれない組み合わせ」なども表示されています。
🔵 グレイッシュブルー/落ち着きテーマ
コバルトブルーとグレーの洗練された組み合わせ
ビジネスサイトやポートフォリオに最適
🎨 背景色（深いグレーブルー系）
✨ テキスト色（明るいクリーム系）
🖼️ ボーダー色（中間ブルーグレー）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの洗練された組み合わせ
// 🔵 グレイッシュブルー/落ち着きテーマ
function setup_grayish_blue_theme_colors() {
// 背景色の配列（深いグレーブルー系）
$bg_colors = [
‘#535252’, ‘#455984’, ‘#32405f’, ‘#2c3654’, ‘#4a5568’, ‘#374151’,
‘#475569’, ‘#3f4b63’, ‘#4b5d73’, ‘#556b82’, ‘#425066’, ‘#3a475c’
];// テキスト色の配列（明るいクリーム系）
$text_colors = [
‘#f9f8ef’, ‘#f7f4ed’, ‘#faf9f0’, ‘#f8f6ea’, ‘#fefcf3’, ‘#f5f3e8’,
‘#f6f4e9’, ‘#fbf9f0’, ‘#f4f2e7’, ‘#f8f5ec’, ‘#fcfaf1’, ‘#f3f1e6’
];// ボーダー色の配列（中間ブルーグレー）
$border_colors = [
‘#637fbd’, ‘#c1cce5’, ‘#7893c7’, ‘#8fa4d3’, ‘#6b84c4’, ‘#a5b7df’,
‘#9cadd8’, ‘#85a0d1’, ‘#b3c4e2’, ‘#748dc9’, ‘#94a8d5’, ‘#b8c8e4’
];// ランダム色設定
add_filter(‘featured_image_background_color_code’, function() use ($bg_colors) {
return $bg_colors[array_rand($bg_colors)];
});add_filter(‘featured_image_text_color_code’, function() use ($text_colors) {
return $text_colors[array_rand($text_colors)];
});add_filter(‘featured_image_border_color_code’, function() use ($border_colors) {
return $border_colors[array_rand($border_colors)];
});
}
setup_grayish_blue_theme_colors();
function setup_grayish_blue_theme_colors() {
// 背景色の配列（深いグレーブルー系）
$bg_colors = [
‘#535252’, ‘#455984’, ‘#32405f’, ‘#2c3654’, ‘#4a5568’, ‘#374151’,
‘#475569’, ‘#3f4b63’, ‘#4b5d73’, ‘#556b82’, ‘#425066’, ‘#3a475c’
];// テキスト色の配列（明るいクリーム系）
$text_colors = [
‘#f9f8ef’, ‘#f7f4ed’, ‘#faf9f0’, ‘#f8f6ea’, ‘#fefcf3’, ‘#f5f3e8’,
‘#f6f4e9’, ‘#fbf9f0’, ‘#f4f2e7’, ‘#f8f5ec’, ‘#fcfaf1’, ‘#f3f1e6’
];// ボーダー色の配列（中間ブルーグレー）
$border_colors = [
‘#637fbd’, ‘#c1cce5’, ‘#7893c7’, ‘#8fa4d3’, ‘#6b84c4’, ‘#a5b7df’,
‘#9cadd8’, ‘#85a0d1’, ‘#b3c4e2’, ‘#748dc9’, ‘#94a8d5’, ‘#b8c8e4’
];// ランダム色設定
add_filter(‘featured_image_background_color_code’, function() use ($bg_colors) {
return $bg_colors[array_rand($bg_colors)];
});add_filter(‘featured_image_text_color_code’, function() use ($text_colors) {
return $text_colors[array_rand($text_colors)];
});add_filter(‘featured_image_border_color_code’, function() use ($border_colors) {
return $border_colors[array_rand($border_colors)];
});
}
setup_grayish_blue_theme_colors();
🖼️ アイキャッチサンプル
🟢 ミューテッドグリーン/自然テーマ
モスグリーンを基調とした落ち着いた自然系カラーリング
ライフスタイルブログや自然系サイトに
🎨 背景色（深いモスグリーン系）
✨ テキスト色（ナチュラルクリーム系）
🖼️ ボーダー色（ソフトグリーン系）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの自然な組み合わせ
// 🟢 ミューテッドグリーン/自然テーマ
function setup_muted_green_theme_colors() {
$bg_colors = [
‘#51594a’, ‘#564f42’, ‘#5a5d4f’, ‘#4d5543’, ‘#4a5240’, ‘#3f4738’,
‘#525a48’, ‘#4f5745’, ‘#565e4c’, ‘#434b3a’, ‘#484e3d’, ‘#3b4232’
];$text_colors = [
‘#f7f4ed’, ‘#f9f6ef’, ‘#f5f2eb’, ‘#f8f5ee’, ‘#faf7f0’, ‘#f6f3ec’,
‘#f4f1ea’, ‘#fbf8f1’, ‘#f3f0e9’, ‘#f7f4ed’, ‘#f8f5ee’, ‘#f2efE8’
];$border_colors = [
‘#737f6a’, ‘#c7ccc3’, ‘#8c9682’, ‘#a3a99f’, ‘#7e8a75’, ‘#b1b7ad’,
‘#969d8d’, ‘#9fa590’, ‘#bac0b6’, ‘#828e79’, ‘#a8af9f’, ‘#c3c9bf’
];
}
function setup_muted_green_theme_colors() {
$bg_colors = [
‘#51594a’, ‘#564f42’, ‘#5a5d4f’, ‘#4d5543’, ‘#4a5240’, ‘#3f4738’,
‘#525a48’, ‘#4f5745’, ‘#565e4c’, ‘#434b3a’, ‘#484e3d’, ‘#3b4232’
];$text_colors = [
‘#f7f4ed’, ‘#f9f6ef’, ‘#f5f2eb’, ‘#f8f5ee’, ‘#faf7f0’, ‘#f6f3ec’,
‘#f4f1ea’, ‘#fbf8f1’, ‘#f3f0e9’, ‘#f7f4ed’, ‘#f8f5ee’, ‘#f2efE8’
];$border_colors = [
‘#737f6a’, ‘#c7ccc3’, ‘#8c9682’, ‘#a3a99f’, ‘#7e8a75’, ‘#b1b7ad’,
‘#969d8d’, ‘#9fa590’, ‘#bac0b6’, ‘#828e79’, ‘#a8af9f’, ‘#c3c9bf’
];
}
🖼️ アイキャッチサンプル
🤎 ウォームベージュ/温もりテーマ
ベージュとブラウンの温かみのある組み合わせ
カフェサイトやインテリア系ブログに
🎨 背景色（深いベージュブラウン系）
✨ テキスト色（温かいクリーム系）
🖼️ ボーダー色（ミルクベージュ系）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの温かい組み合わせ
// 🤎 ウォームベージュ/温もりテーマ
function setup_warm_beige_theme_colors() {
$bg_colors = [
‘#6b5b47’, ‘#5d4e3a’, ‘#74634f’, ‘#5a4b37’, ‘#68593e’, ‘#614f3c’,
‘#7c6b57’, ‘#635341’, ‘#705f4b’, ‘#584834’, ‘#66563f’, ‘#5f4d39’
];$text_colors = [
‘#faf8f2’, ‘#f8f6f0’, ‘#fcfaf4’, ‘#f9f7f1’, ‘#fbf9f3’, ‘#f7f5ef’,
‘#fefcf6’, ‘#f6f4ee’, ‘#faf8f2’, ‘#f5f3ed’, ‘#f8f6f0’, ‘#fdfbf5’
];$border_colors = [
‘#a19083’, ‘#d4cec3’, ‘#b5a496’, ‘#c7beb1’, ‘#ad9e90’, ‘#d0c7ba’,
‘#bfb0a3’, ‘#b9aa9d’, ‘#d6cdc0’, ‘#a59689’, ‘#c3b4a7’, ‘#d8cfC2’
];
}
function setup_warm_beige_theme_colors() {
$bg_colors = [
‘#6b5b47’, ‘#5d4e3a’, ‘#74634f’, ‘#5a4b37’, ‘#68593e’, ‘#614f3c’,
‘#7c6b57’, ‘#635341’, ‘#705f4b’, ‘#584834’, ‘#66563f’, ‘#5f4d39’
];$text_colors = [
‘#faf8f2’, ‘#f8f6f0’, ‘#fcfaf4’, ‘#f9f7f1’, ‘#fbf9f3’, ‘#f7f5ef’,
‘#fefcf6’, ‘#f6f4ee’, ‘#faf8f2’, ‘#f5f3ed’, ‘#f8f6f0’, ‘#fdfbf5’
];$border_colors = [
‘#a19083’, ‘#d4cec3’, ‘#b5a496’, ‘#c7beb1’, ‘#ad9e90’, ‘#d0c7ba’,
‘#bfb0a3’, ‘#b9aa9d’, ‘#d6cdc0’, ‘#a59689’, ‘#c3b4a7’, ‘#d8cfC2’
];
}
🖼️ アイキャッチサンプル
🟣 ソフトパープル/上品テーマ
グレーパープルを基調とした洗練されたカラーリング
美容サイトやファッションブログに
🎨 背景色（深いグレーパープル系）
✨ テキスト色（ソフトクリーム系）
🖼️ ボーダー色（ラベンダーグレー系）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの上品な組み合わせ
// 🟣 ソフトパープル/上品テーマ
function setup_soft_purple_theme_colors() {
$bg_colors = [
‘#5a4f5a’, ‘#4d424d’, ‘#635863’, ‘#4a3f4a’, ‘#574c57’, ‘#524752’,
‘#6b606b’, ‘#5f545f’, ‘#665b66’, ‘#473c47’, ‘#544954’, ‘#4f444f’
];$text_colors = [
‘#f9f7f9’, ‘#f7f5f7’, ‘#fbf9fb’, ‘#f8f6f8’, ‘#faf8fa’, ‘#f6f4f6’,
‘#fcfafc’, ‘#f5f3f5’, ‘#f9f7f9’, ‘#f4f2f4’, ‘#f7f5f7’, ‘#fdfbfd’
];$border_colors = [
‘#9d8e9d’, ‘#d1c7d1’, ‘#b2a3b2’, ‘#c4bac4’, ‘#aa9baa’, ‘#cdc3cd’,
‘#bcb2bc’, ‘#b6acb6’, ‘#d3c9d3’, ‘#a296a2’, ‘#c0b6c0’, ‘#d5cbd5’
];
}
function setup_soft_purple_theme_colors() {
$bg_colors = [
‘#5a4f5a’, ‘#4d424d’, ‘#635863’, ‘#4a3f4a’, ‘#574c57’, ‘#524752’,
‘#6b606b’, ‘#5f545f’, ‘#665b66’, ‘#473c47’, ‘#544954’, ‘#4f444f’
];$text_colors = [
‘#f9f7f9’, ‘#f7f5f7’, ‘#fbf9fb’, ‘#f8f6f8’, ‘#faf8fa’, ‘#f6f4f6’,
‘#fcfafc’, ‘#f5f3f5’, ‘#f9f7f9’, ‘#f4f2f4’, ‘#f7f5f7’, ‘#fdfbfd’
];$border_colors = [
‘#9d8e9d’, ‘#d1c7d1’, ‘#b2a3b2’, ‘#c4bac4’, ‘#aa9baa’, ‘#cdc3cd’,
‘#bcb2bc’, ‘#b6acb6’, ‘#d3c9d3’, ‘#a296a2’, ‘#c0b6c0’, ‘#d5cbd5’
];
}
🖼️ アイキャッチサンプル
🌸 ダスティローズ/ロマンティックテーマ
くすんだピンクとグレーの優雅な組み合わせ
ウェディングサイトや女性向けブログに
🎨 背景色（深いローズグレー系）
✨ テキスト色（ローズクリーム系）
🖼️ ボーダー色（ソフトローズ系）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの優雅な組み合わせ
// 🌸 ダスティローズ/ロマンティックテーマ
function setup_dusty_rose_theme_colors() {
$bg_colors = [
‘#5d4a52’, ‘#503d45’, ‘#6b5863’, ‘#4d3a42’, ‘#5a4750’, ‘#56434b’,
‘#735f67’, ‘#61515c’, ‘#68545f’, ‘#4a3740’, ‘#574459’, ‘#524048’
];$text_colors = [
‘#f9f6f8’, ‘#f7f4f6’, ‘#fbf8fa’, ‘#f8f5f7’, ‘#faf7f9’, ‘#f6f3f5’,
‘#fcf9fb’, ‘#f5f2f4’, ‘#f9f6f8’, ‘#f4f1f3’, ‘#f7f4f6’, ‘#fdfafc’
];$border_colors = [
‘#a3879a’, ‘#d4c3d0’, ‘#b89ba8’, ‘#c7b4c0’, ‘#af93a1’, ‘#d0c0cd’,
‘#c1a8b5’, ‘#bca3b0’, ‘#d6c6d2’, ‘#a68894’, ‘#c5acc2’, ‘#d8c8d4’
];
}
function setup_dusty_rose_theme_colors() {
$bg_colors = [
‘#5d4a52’, ‘#503d45’, ‘#6b5863’, ‘#4d3a42’, ‘#5a4750’, ‘#56434b’,
‘#735f67’, ‘#61515c’, ‘#68545f’, ‘#4a3740’, ‘#574459’, ‘#524048’
];$text_colors = [
‘#f9f6f8’, ‘#f7f4f6’, ‘#fbf8fa’, ‘#f8f5f7’, ‘#faf7f9’, ‘#f6f3f5’,
‘#fcf9fb’, ‘#f5f2f4’, ‘#f9f6f8’, ‘#f4f1f3’, ‘#f7f4f6’, ‘#fdfafc’
];$border_colors = [
‘#a3879a’, ‘#d4c3d0’, ‘#b89ba8’, ‘#c7b4c0’, ‘#af93a1’, ‘#d0c0cd’,
‘#c1a8b5’, ‘#bca3b0’, ‘#d6c6d2’, ‘#a68894’, ‘#c5acc2’, ‘#d8c8d4’
];
}
🖼️ アイキャッチサンプル
⚫ チャコールモノ/プロフェッショナルテーマ
チャコールグレーによるモノクロームデザイン
企業サイトやミニマルデザインに
🎨 背景色（深いチャコール系）
✨ テキスト色（オフホワイト系）
🖼️ ボーダー色（ミディアムグレー系）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りのプロフェッショナルな組み合わせ
// ⚫ チャコールモノ/プロフェッショナルテーマ
function setup_charcoal_mono_theme_colors() {
$bg_colors = [
‘#2d2d2d’, ‘#1f1f1f’, ‘#3a3a3a’, ‘#252525’, ‘#323232’, ‘#1c1c1c’,
‘#404040’, ‘#2a2a2a’, ‘#363636’, ‘#181818’, ‘#2f2f2f’, ‘#222222’
];$text_colors = [
‘#fafafa’, ‘#f8f8f8’, ‘#fcfcfc’, ‘#f9f9f9’, ‘#fbfbfb’, ‘#f7f7f7’,
‘#fdfdfd’, ‘#f6f6f6’, ‘#fafafa’, ‘#f5f5f5’, ‘#f8f8f8’, ‘#fefefe’
];$border_colors = [
‘#6e6e6e’, ‘#b8b8b8’, ‘#828282’, ‘#a5a5a5’, ‘#767676’, ‘#bababa’,
‘#919191’, ‘#8c8c8c’, ‘#bcbcbc’, ‘#707070’, ‘#9e9e9e’, ‘#bebebE’
];
}
function setup_charcoal_mono_theme_colors() {
$bg_colors = [
‘#2d2d2d’, ‘#1f1f1f’, ‘#3a3a3a’, ‘#252525’, ‘#323232’, ‘#1c1c1c’,
‘#404040’, ‘#2a2a2a’, ‘#363636’, ‘#181818’, ‘#2f2f2f’, ‘#222222’
];$text_colors = [
‘#fafafa’, ‘#f8f8f8’, ‘#fcfcfc’, ‘#f9f9f9’, ‘#fbfbfb’, ‘#f7f7f7’,
‘#fdfdfd’, ‘#f6f6f6’, ‘#fafafa’, ‘#f5f5f5’, ‘#f8f8f8’, ‘#fefefe’
];$border_colors = [
‘#6e6e6e’, ‘#b8b8b8’, ‘#828282’, ‘#a5a5a5’, ‘#767676’, ‘#bababa’,
‘#919191’, ‘#8c8c8c’, ‘#bcbcbc’, ‘#707070’, ‘#9e9e9e’, ‘#bebebE’
];
}
🖼️ アイキャッチサンプル
📋 カラーコードをコピーしました！