🎨 8つのテーマカラーパレット完全集
Cocoonアイキャッチ自動生成のランダムカラーカスタマイズ用
💡 使い方： お好みのテーマを選んで、カラーコードをクリックするとコピーできます。PHPコードをそのまま子テーマのfunctions.phpに追加してご利用ください。
※私のサイト自体が暗めのデザインなので、ここでは微妙に見えても、一般的な白地デザインでは綺麗に見えるかもしれない組み合わせなども表示されています。
🌊 オーシャン/海洋テーマ
深い海の青から波の白まで、清涼感溢れる海をイメージしたカラーリング
夏のブログや旅行系サイトに最適
🎨 背景色（深い海の青系）
✨ テキスト色（波と泡の明るい色）
🖼️ ボーダー色（海の中間色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの美しい組み合わせ
// 🌊 オーシャン/海洋テーマ
function setup_ocean_theme_colors() {
// 背景色の配列（深い海の青系）
$bg_colors = [
‘#0c1821’, ‘#1e3a5f’, ‘#2d5aa0’, ‘#3a6ea5’, ‘#0f2940’, ‘#1a4480’,
‘#225ea8’, ‘#2e75b6’, ‘#003f5c’, ‘#2f4b7c’, ‘#665191’, ‘#a05195’
];// テキスト色の配列（波と泡の明るい色）
$text_colors = [
‘#f0f8ff’, ‘#e0f6ff’, ‘#b8e6ff’, ‘#87ceeb’, ‘#add8e6’, ‘#b0e0e6’,
‘#afeeee’, ‘#e0ffff’, ‘#f0ffff’, ‘#ffffff’, ‘#f5fffa’, ‘#e6f3ff’
];// ボーダー色の配列（海の中間色）
$border_colors = [
‘#4682b4’, ‘#5f9ea0’, ‘#6495ed’, ‘#7b68ee’, ‘#00ced1’, ‘#20b2aa’,
‘#48d1cc’, ‘#40e0d0’, ‘#00ffff’, ‘#87cefa’, ‘#b0c4de’, ‘#778899’
];// ランダム色設定
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_ocean_theme_colors();
function setup_ocean_theme_colors() {
// 背景色の配列（深い海の青系）
$bg_colors = [
‘#0c1821’, ‘#1e3a5f’, ‘#2d5aa0’, ‘#3a6ea5’, ‘#0f2940’, ‘#1a4480’,
‘#225ea8’, ‘#2e75b6’, ‘#003f5c’, ‘#2f4b7c’, ‘#665191’, ‘#a05195’
];// テキスト色の配列（波と泡の明るい色）
$text_colors = [
‘#f0f8ff’, ‘#e0f6ff’, ‘#b8e6ff’, ‘#87ceeb’, ‘#add8e6’, ‘#b0e0e6’,
‘#afeeee’, ‘#e0ffff’, ‘#f0ffff’, ‘#ffffff’, ‘#f5fffa’, ‘#e6f3ff’
];// ボーダー色の配列（海の中間色）
$border_colors = [
‘#4682b4’, ‘#5f9ea0’, ‘#6495ed’, ‘#7b68ee’, ‘#00ced1’, ‘#20b2aa’,
‘#48d1cc’, ‘#40e0d0’, ‘#00ffff’, ‘#87cefa’, ‘#b0c4de’, ‘#778899’
];// ランダム色設定
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_ocean_theme_colors();
🖼️ アイキャッチサンプル
🌇 サンセット/夕暮れテーマ
夕焼けの美しいグラデーションを表現したロマンチックなカラーリング
感情に訴える温かみのあるデザイン
🎨 背景色（夕焼けの深い色）
✨ テキスト色（雲と光の明るい色）
🖼️ ボーダー色（夕日の中間色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの温かい組み合わせ
// 🌇 サンセット/夕暮れテーマ
function setup_sunset_theme_colors() {
// 背景色の配列（夕焼けの深い色）
$bg_colors = [
‘#8b0000’, ‘#a0522d’, ‘#b22222’, ‘#dc143c’, ‘#8b4513’, ‘#cd853f’,
‘#d2691e’, ‘#ff4500’, ‘#ff6347’, ‘#ff7f50’, ‘#daa520’, ‘#b8860b’
];// テキスト色の配列（雲と光の明るい色）
$text_colors = [
‘#fff8dc’, ‘#fffacd’, ‘#ffefd5’, ‘#ffe4e1’, ‘#fdf5e6’, ‘#faf0e6’,
‘#fff5ee’, ‘#faebd7’, ‘#f5deb3’, ‘#f0e68c’, ‘#eee8aa’, ‘#ffffe0’
];// ボーダー色の配列（夕日の中間色）
$border_colors = [
‘#ff8c00’, ‘#ffa500’, ‘#ffb347’, ‘#ffd700’, ‘#f0e68c’, ‘#daa520’,
‘#cd853f’, ‘#d2b48c’, ‘#f4a460’, ‘#deb887’, ‘#bc8f8f’, ‘#d2691e’
];
}
function setup_sunset_theme_colors() {
// 背景色の配列（夕焼けの深い色）
$bg_colors = [
‘#8b0000’, ‘#a0522d’, ‘#b22222’, ‘#dc143c’, ‘#8b4513’, ‘#cd853f’,
‘#d2691e’, ‘#ff4500’, ‘#ff6347’, ‘#ff7f50’, ‘#daa520’, ‘#b8860b’
];// テキスト色の配列（雲と光の明るい色）
$text_colors = [
‘#fff8dc’, ‘#fffacd’, ‘#ffefd5’, ‘#ffe4e1’, ‘#fdf5e6’, ‘#faf0e6’,
‘#fff5ee’, ‘#faebd7’, ‘#f5deb3’, ‘#f0e68c’, ‘#eee8aa’, ‘#ffffe0’
];// ボーダー色の配列（夕日の中間色）
$border_colors = [
‘#ff8c00’, ‘#ffa500’, ‘#ffb347’, ‘#ffd700’, ‘#f0e68c’, ‘#daa520’,
‘#cd853f’, ‘#d2b48c’, ‘#f4a460’, ‘#deb887’, ‘#bc8f8f’, ‘#d2691e’
];
}
🖼️ アイキャッチサンプル
🍂 オータム/紅葉テーマ
秋の紅葉をイメージした温かみのあるカラーリング
季節感があり、大人っぽい上品な印象
🎨 背景色（深い紅葉色）
✨ テキスト色（明るい秋色）
🖼️ ボーダー色（秋の中間色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの上品な組み合わせ
// 🍂 オータム/紅葉テーマ
function setup_autumn_theme_colors() {
// 背景色の配列（深い紅葉色）
$bg_colors = [
‘#800000’, ‘#8b0000’, ‘#a52a2a’, ‘#b22222’, ‘#8b4513’, ‘#a0522d’,
‘#654321’, ‘#d2691e’, ‘#cd853f’, ‘#daa520’, ‘#b8860b’, ‘#ff8c00’
];// テキスト色の配列（明るい秋色）
$text_colors = [
‘#ffd700’, ‘#ffb347’, ‘#ffa500’, ‘#ff8c00’, ‘#f0e68c’, ‘#eee8aa’,
‘#f5deb3’, ‘#deb887’, ‘#d2b48c’, ‘#f4a460’, ‘#ffe4b5’, ‘#ffebcd’
];// ボーダー色の配列（秋の中間色）
$border_colors = [
‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’, ‘#9acd32’, ‘#228b22’,
‘#6b8e23’, ‘#808000’, ‘#556b2f’, ‘#8fbc8f’, ‘#90ee90’, ‘#32cd32’
];
}
function setup_autumn_theme_colors() {
// 背景色の配列（深い紅葉色）
$bg_colors = [
‘#800000’, ‘#8b0000’, ‘#a52a2a’, ‘#b22222’, ‘#8b4513’, ‘#a0522d’,
‘#654321’, ‘#d2691e’, ‘#cd853f’, ‘#daa520’, ‘#b8860b’, ‘#ff8c00’
];// テキスト色の配列（明るい秋色）
$text_colors = [
‘#ffd700’, ‘#ffb347’, ‘#ffa500’, ‘#ff8c00’, ‘#f0e68c’, ‘#eee8aa’,
‘#f5deb3’, ‘#deb887’, ‘#d2b48c’, ‘#f4a460’, ‘#ffe4b5’, ‘#ffebcd’
];// ボーダー色の配列（秋の中間色）
$border_colors = [
‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’, ‘#9acd32’, ‘#228b22’,
‘#6b8e23’, ‘#808000’, ‘#556b2f’, ‘#8fbc8f’, ‘#90ee90’, ‘#32cd32’
];
}
🖼️ アイキャッチサンプル
💜 ラベンダー/紫テーマ
紫系の上品で神秘的なカラーリング
美容やライフスタイル系サイトに人気
🎨 背景色（深い紫系）
✨ テキスト色（薄紫とライトカラー）
🖼️ ボーダー色（中間紫色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの神秘的な組み合わせ
// 💜 ラベンダー/紫テーマ
function setup_lavender_theme_colors() {
// 背景色の配列（深い紫系）
$bg_colors = [
‘#483d8b’, ‘#6a5acd’, ‘#7b68ee’, ‘#9370db’, ‘#8a2be2’, ‘#9400d3’,
‘#9932cc’, ‘#ba55d3’, ‘#8b008b’, ‘#800080’, ‘#663399’, ‘#4b0082’
];// テキスト色の配列（薄紫とライトカラー）
$text_colors = [
‘#e6e6fa’, ‘#f8f8ff’, ‘#f0f8ff’, ‘#e0e6f8’, ‘#c8a2c8’, ‘#dda0dd’,
‘#ee82ee’, ‘#da70d6’, ‘#ffc0cb’, ‘#ffb6c1’, ‘#ffe4e1’, ‘#fff0f5’
];// ボーダー色の配列（中間紫色）
$border_colors = [
‘#dda0dd’, ‘#da70d6’, ‘#ee82ee’, ‘#ff69b4’, ‘#ff1493’, ‘#c71585’,
‘#db7093’, ‘#f0e68c’, ‘#dda0dd’, ‘#c8a2c8’, ‘#b19cd9’, ‘#9370db’
];
}
function setup_lavender_theme_colors() {
// 背景色の配列（深い紫系）
$bg_colors = [
‘#483d8b’, ‘#6a5acd’, ‘#7b68ee’, ‘#9370db’, ‘#8a2be2’, ‘#9400d3’,
‘#9932cc’, ‘#ba55d3’, ‘#8b008b’, ‘#800080’, ‘#663399’, ‘#4b0082’
];// テキスト色の配列（薄紫とライトカラー）
$text_colors = [
‘#e6e6fa’, ‘#f8f8ff’, ‘#f0f8ff’, ‘#e0e6f8’, ‘#c8a2c8’, ‘#dda0dd’,
‘#ee82ee’, ‘#da70d6’, ‘#ffc0cb’, ‘#ffb6c1’, ‘#ffe4e1’, ‘#fff0f5’
];// ボーダー色の配列（中間紫色）
$border_colors = [
‘#dda0dd’, ‘#da70d6’, ‘#ee82ee’, ‘#ff69b4’, ‘#ff1493’, ‘#c71585’,
‘#db7093’, ‘#f0e68c’, ‘#dda0dd’, ‘#c8a2c8’, ‘#b19cd9’, ‘#9370db’
];
}
🖼️ アイキャッチサンプル
🌿 ミント/爽やかテーマ
自然の緑をベースにした癒やし系カラーリング
健康・オーガニック系サイトに最適
🎨 背景色（深い緑系）
✨ テキスト色（明るい緑と白）
🖼️ ボーダー色（中間グリーン）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの爽やかな組み合わせ
// 🌿 ミント/爽やかテーマ
function setup_mint_theme_colors() {
// 背景色の配列（深い緑系）
$bg_colors = [
‘#006400’, ‘#228b22’, ‘#2e8b57’, ‘#3cb371’, ‘#20b2aa’, ‘#008b8b’,
‘#5f9ea0’, ‘#4682b4’, ‘#6495ed’, ‘#00ced1’, ‘#40e0d0’, ‘#48d1cc’
];// テキスト色の配列（明るい緑と白）
$text_colors = [
‘#f0fff0’, ‘#f5fffa’, ‘#e0ffff’, ‘#afeeee’, ‘#7fffd4’, ‘#40e0d0’,
‘#00ffff’, ‘#00fa9a’, ‘#00ff7f’, ‘#90ee90’, ‘#98fb98’, ‘#adff2f’
];// ボーダー色の配列（中間グリーン）
$border_colors = [
‘#8fbc8f’, ‘#90ee90’, ‘#98fb98’, ‘#9aff9a’, ‘#00ff7f’, ‘#00fa9a’,
‘#00ff00’, ‘#32cd32’, ‘#32cd32’, ‘#adff2f’, ‘#9acd32’, ‘#6b8e23’
];
}
function setup_mint_theme_colors() {
// 背景色の配列（深い緑系）
$bg_colors = [
‘#006400’, ‘#228b22’, ‘#2e8b57’, ‘#3cb371’, ‘#20b2aa’, ‘#008b8b’,
‘#5f9ea0’, ‘#4682b4’, ‘#6495ed’, ‘#00ced1’, ‘#40e0d0’, ‘#48d1cc’
];// テキスト色の配列（明るい緑と白）
$text_colors = [
‘#f0fff0’, ‘#f5fffa’, ‘#e0ffff’, ‘#afeeee’, ‘#7fffd4’, ‘#40e0d0’,
‘#00ffff’, ‘#00fa9a’, ‘#00ff7f’, ‘#90ee90’, ‘#98fb98’, ‘#adff2f’
];// ボーダー色の配列（中間グリーン）
$border_colors = [
‘#8fbc8f’, ‘#90ee90’, ‘#98fb98’, ‘#9aff9a’, ‘#00ff7f’, ‘#00fa9a’,
‘#00ff00’, ‘#32cd32’, ‘#32cd32’, ‘#adff2f’, ‘#9acd32’, ‘#6b8e23’
];
}
🖼️ アイキャッチサンプル
⚫ モノクローム/洗練テーマ
タイムレスで洗練されたグレースケールカラーリング
プロフェッショナルサイトに最適
🎨 背景色（濃いグレー系）
✨ テキスト色（白から薄いグレー）
🖼️ ボーダー色（中間グレー）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの洗練された組み合わせ
// ⚫ モノクローム/洗練テーマ
function setup_monochrome_theme_colors() {
// 背景色の配列（濃いグレー系）
$bg_colors = [
‘#000000’, ‘#2f2f2f’, ‘#404040’, ‘#4f4f4f’, ‘#5e5e5e’, ‘#6d6d6d’,
‘#7c7c7c’, ‘#8b8b8b’, ‘#1a1a1a’, ‘#333333’, ‘#4d4d4d’, ‘#666666’
];// テキスト色の配列（白から薄いグレー）
$text_colors = [
‘#ffffff’, ‘#f8f8ff’, ‘#f5f5f5’, ‘#f0f0f0’, ‘#eeeeee’, ‘#e0e0e0’,
‘#d3d3d3’, ‘#c0c0c0’, ‘#b0b0b0’, ‘#a0a0a0’, ‘#dcdcdc’, ‘#dcdcdc’
];// ボーダー色の配列（中間グレー）
$border_colors = [
‘#808080’, ‘#778899’, ‘#708090’, ‘#696969’, ‘#2f4f4f’, ‘#a9a9a9’,
‘#b0c4de’, ‘#87ceeb’, ‘#87cefa’, ‘#4682b4’, ‘#6495ed’, ‘#5f9ea0’
];
}
function setup_monochrome_theme_colors() {
// 背景色の配列（濃いグレー系）
$bg_colors = [
‘#000000’, ‘#2f2f2f’, ‘#404040’, ‘#4f4f4f’, ‘#5e5e5e’, ‘#6d6d6d’,
‘#7c7c7c’, ‘#8b8b8b’, ‘#1a1a1a’, ‘#333333’, ‘#4d4d4d’, ‘#666666’
];// テキスト色の配列（白から薄いグレー）
$text_colors = [
‘#ffffff’, ‘#f8f8ff’, ‘#f5f5f5’, ‘#f0f0f0’, ‘#eeeeee’, ‘#e0e0e0’,
‘#d3d3d3’, ‘#c0c0c0’, ‘#b0b0b0’, ‘#a0a0a0’, ‘#dcdcdc’, ‘#dcdcdc’
];// ボーダー色の配列（中間グレー）
$border_colors = [
‘#808080’, ‘#778899’, ‘#708090’, ‘#696969’, ‘#2f4f4f’, ‘#a9a9a9’,
‘#b0c4de’, ‘#87ceeb’, ‘#87cefa’, ‘#4682b4’, ‘#6495ed’, ‘#5f9ea0’
];
}
🖼️ アイキャッチサンプル
👑 ロイヤル/高級テーマ
深い色合いとゴールドアクセントで高級感を演出
ブランドサイトやポートフォリオに
🎨 背景色（深い高級色）
✨ テキスト色（ゴールドとシルバー）
🖼️ ボーダー色（メタリック中間色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの高級感ある組み合わせ
// 👑 ロイヤル/高級テーマ
function setup_royal_theme_colors() {
// 背景色の配列（深い高級色）
$bg_colors = [
‘#191970’, ‘#000080’, ‘#00008b’, ‘#0000cd’, ‘#4169e1’, ‘#483d8b’,
‘#6a5acd’, ‘#7b68ee’, ‘#9370db’, ‘#8a2be2’, ‘#9400d3’, ‘#9932cc’
];// テキスト色の配列（ゴールドとシルバー）
$text_colors = [
‘#ffd700’, ‘#ffb347’, ‘#ffa500’, ‘#ff8c00’, ‘#daa520’, ‘#b8860b’,
‘#c0c0c0’, ‘#d3d3d3’, ‘#dcdcdc’, ‘#f5f5dc’, ‘#fff8dc’, ‘#fffacd’
];// ボーダー色の配列（メタリック中間色）
$border_colors = [
‘#4682b4’, ‘#5f9ea0’, ‘#6495ed’, ‘#7b68ee’, ‘#9370db’, ‘#ba55d3’,
‘#da70d6’, ‘#ee82ee’, ‘#ff69b4’, ‘#ff1493’, ‘#c71585’, ‘#db7093’
];
}
function setup_royal_theme_colors() {
// 背景色の配列（深い高級色）
$bg_colors = [
‘#191970’, ‘#000080’, ‘#00008b’, ‘#0000cd’, ‘#4169e1’, ‘#483d8b’,
‘#6a5acd’, ‘#7b68ee’, ‘#9370db’, ‘#8a2be2’, ‘#9400d3’, ‘#9932cc’
];// テキスト色の配列（ゴールドとシルバー）
$text_colors = [
‘#ffd700’, ‘#ffb347’, ‘#ffa500’, ‘#ff8c00’, ‘#daa520’, ‘#b8860b’,
‘#c0c0c0’, ‘#d3d3d3’, ‘#dcdcdc’, ‘#f5f5dc’, ‘#fff8dc’, ‘#fffacd’
];// ボーダー色の配列（メタリック中間色）
$border_colors = [
‘#4682b4’, ‘#5f9ea0’, ‘#6495ed’, ‘#7b68ee’, ‘#9370db’, ‘#ba55d3’,
‘#da70d6’, ‘#ee82ee’, ‘#ff69b4’, ‘#ff1493’, ‘#c71585’, ‘#db7093’
];
}
🖼️ アイキャッチサンプル
🏔️ アーストーン/大地テーマ
大地の色をベースにした自然で落ち着いたカラーリング
カフェやアート系サイトに人気
🎨 背景色（大地の深い色）
✨ テキスト色（クリームとベージュ）
🖼️ ボーダー色（中間の土色）
組み合わせパターン数
1,728通り
12 × 12 × 12 = 1,728通りの自然な組み合わせ
// 🏔️ アースト ーン/大地テーマ
function setup_earthy_theme_colors() {
// 背景色の配列（大地の深い色）
$bg_colors = [
‘#8b4513’, ‘#a0522d’, ‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’,
‘#556b2f’, ‘#6b8e23’, ‘#808000’, ‘#8fbc8f’, ‘#9acd32’, ‘#228b22’
];// テキスト色の配列（クリームとベージュ）
$text_colors = [
‘#f5f5dc’, ‘#fff8dc’, ‘#fffacd’, ‘#ffefd5’, ‘#ffe4e1’, ‘#fdf5e6’,
‘#faf0e6’, ‘#fff5ee’, ‘#faebd7’, ‘#f5deb3’, ‘#deb887’, ‘#d2b48c’
];// ボーダー色の配列（中間の土色）
$border_colors = [
‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’, ‘#f4a460’, ‘#deb887’,
‘#d2b48c’, ‘#bc8f8f’, ‘#f0e68c’, ‘#eee8aa’, ‘#bdb76b’, ‘#9acd32’
];
}
function setup_earthy_theme_colors() {
// 背景色の配列（大地の深い色）
$bg_colors = [
‘#8b4513’, ‘#a0522d’, ‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’,
‘#556b2f’, ‘#6b8e23’, ‘#808000’, ‘#8fbc8f’, ‘#9acd32’, ‘#228b22’
];// テキスト色の配列（クリームとベージュ）
$text_colors = [
‘#f5f5dc’, ‘#fff8dc’, ‘#fffacd’, ‘#ffefd5’, ‘#ffe4e1’, ‘#fdf5e6’,
‘#faf0e6’, ‘#fff5ee’, ‘#faebd7’, ‘#f5deb3’, ‘#deb887’, ‘#d2b48c’
];// ボーダー色の配列（中間の土色）
$border_colors = [
‘#cd853f’, ‘#d2691e’, ‘#daa520’, ‘#b8860b’, ‘#f4a460’, ‘#deb887’,
‘#d2b48c’, ‘#bc8f8f’, ‘#f0e68c’, ‘#eee8aa’, ‘#bdb76b’, ‘#9acd32’
];
}
🖼️ アイキャッチサンプル
📋 カラーコードをコピーしました！