業種別・雰囲気別に厳選した配色パターンをワンクリックでコピー
信頼感と先進性を演出するブルー系。SaaS、スタートアップ、IT企業に最適。
/* Tech Blue */
--color-dark: #0f172a;
--color-primary: #3b82f6;
--color-accent: #06b6d4;
--color-success: #10b981;
--color-light: #f8fafc;
革新的でクリエイティブな印象のパープル系。AI、メタバース、クリエイティブツールに。
/* Creative Tech */
--color-dark: #1e1b4b;
--color-primary: #7c3aed;
--color-secondary: #a855f7;
--color-accent: #ec4899;
--color-light: #faf5ff;
清潔感と安心感を与えるティール系。病院、クリニック、ヘルスケアアプリに最適。
/* Medical Care */
--color-primary: #0d9488;
--color-secondary: #14b8a6;
--color-accent: #5eead4;
--color-bg: #f0fdfa;
--color-white: #ffffff;
食欲を刺激するオレンジ系。カフェ、レストラン、フードデリバリーサービスに。
/* Warm Restaurant */
--color-dark: #7c2d12;
--color-primary: #ea580c;
--color-secondary: #f97316;
--color-accent: #fbbf24;
--color-light: #fffbeb;
華やかで上品なピンク系。エステ、美容室、コスメブランドに最適。
/* Beauty Rose */
--color-dark: #831843;
--color-primary: #db2777;
--color-secondary: #f472b6;
--color-accent: #fce7f3;
--color-light: #fdf2f8;
堅実で信頼感のあるネイビー系。銀行、保険、コンサルティング企業に。
/* Corporate Trust */
--color-dark: #1e3a5f;
--color-primary: #1e40af;
--color-secondary: #3b82f6;
--color-muted: #64748b;
--color-light: #f1f5f9;
明るく楽しいマルチカラー。学習塾、知育アプリ、キッズ向けサービスに。
/* Playful Learning */
--color-primary: #4f46e5;
--color-yellow: #f59e0b;
--color-green: #10b981;
--color-red: #ef4444;
--color-light: #fef3c7;
自然と環境を連想させるグリーン系。オーガニック製品、環境関連、農業に。
/* Eco Nature */
--color-dark: #14532d;
--color-primary: #16a34a;
--color-secondary: #4ade80;
--color-accent: #a3e635;
--color-light: #f0fdf4;
重厚感と高級感のあるニュートラル系。不動産、建築事務所、インテリアに。
/* Architecture Stone */
--color-dark: #292524;
--color-primary: #78716c;
--color-secondary: #a8a29e;
--color-accent: #d4a574;
--color-light: #fafaf9;
パワーと情熱を表現するレッド系。スポーツクラブ、フィットネスジム、スポーツブランドに。
/* Sport Power */
--color-dark: #0a0a0a;
--color-primary: #dc2626;
--color-secondary: #ef4444;
--color-accent: #fbbf24;
--color-light: #f5f5f5;
開放的な空と海を感じるブルー系。ホテル、旅行代理店、リゾートサービスに。
/* Resort Bliss */
--color-dark: #0c4a6e;
--color-primary: #0ea5e9;
--color-secondary: #38bdf8;
--color-accent: #bae6fd;
--color-light: #f0f9ff;
洗練されたモノトーン配色。シンプルで上品なデザインに最適。
/* Modern Minimal */
--color-black: #000000;
--color-dark: #171717;
--color-gray: #525252;
--color-light-gray: #e5e5e5;
--color-white: #ffffff;
高級感と格式を演出するゴールド系。ホテル、宝飾、プレミアムサービスに。
/* Luxury Gold */
--color-dark: #1c1917;
--color-gold-dark: #b8860b;
--color-gold: #d4af37;
--color-cream: #f5f5dc;
--color-light: #fffef7;
元気で明るいビビッドカラー。エンタメ、ゲーム、SNSサービスに。
/* Pop & Fun */
--color-purple: #8b5cf6;
--color-pink: #f43f5e;
--color-yellow: #fbbf24;
--color-green: #34d399;
--color-blue: #38bdf8;
自然素材を感じさせるアースカラー。オーガニック、ライフスタイル系に。
/* Natural Earth */
--color-dark: #44403c;
--color-brown: #78716c;
--color-olive: #a3a28c;
--color-sand: #d5c7a3;
--color-light: #f5f5f0;
クールで知的な印象のスレート系。コンサル、法律事務所、BtoBに。
/* Cool Slate */
--color-dark: #0f172a;
--color-primary: #1e293b;
--color-secondary: #475569;
--color-muted: #94a3b8;
--color-light: #f1f5f9;
優しく親しみやすいパステルカラー。ベビー用品、ウェディング、女性向けに。
/* Soft Pastel */
--color-purple: #c4b5fd;
--color-pink: #fbcfe8;
--color-yellow: #fef08a;
--color-green: #bbf7d0;
--color-white: #fefefe;
ダークモードUI用の基本配色。目に優しく長時間の使用に適した設計。
/* Dark Mode */
--color-bg: #09090b;
--color-card: #18181b;
--color-border: #27272a;
--color-muted: #3f3f46;
--color-text: #fafafa;
伝統的な和の色合い。旅館、日本料理店、伝統工芸品サイトに。
/* Japanese Traditional */
--color-sumi: #1a1a1a;
--color-aka: #8b0000;
--color-kitsune: #d4a574;
--color-matcha: #556b2f;
--color-kinari: #f5f5dc;
懐かしさを感じるセピア系。アンティークショップ、カフェ、古書店に。
/* Vintage Brown */
--color-dark: #2d1b0e;
--color-primary: #8b4513;
--color-secondary: #cd853f;
--color-accent: #deb887;
--color-light: #faebd7;
北欧デザインに宿るウォームグレー系。ライフスタイル、インテリア、雑貨ブランドに。
/* Scandi Warm */
--color-dark: #3d3d3d;
--color-brown: #8a7a6a;
--color-tan: #c4b5a0;
--color-warm: #e8ddd0;
--color-light: #f7f3ee;
ネオンが輝くサイバーな世界観。ゲーム、テック系イベント、エンタメコンテンツに。
/* Cyberpunk Neon */
--color-dark: #0d0221;
--color-purple: #7b2dff;
--color-cyan: #00e5ff;
--color-pink: #ff2d7b;
--color-light: #f0f0ff;
漆黒の背景に輝くネオンカラー。ゲーミング、サイバーパンク、ナイトライフに。
/* Dark Neon */
--color-bg: #080016;
--color-purple: #4d00ff;
--color-cyan: #00f5ff;
--color-pink: #ff0080;
--color-light: #e0e0ff;
Apple風のクリーンなUI配色。モダンアプリ、ダッシュボード、SaaSプロダクトに。
/* Bento UI */
--color-bg: #f5f5f5;
--color-surface: #e8e8e8;
--color-dark: #1c1c1e;
--color-blue: #0071e3;
--color-green: #34c759;
2000年代初頭の配色リバイバル。ポップカルチャー、音楽、ファッションメディアに。
/* Y2K Dream */
--color-purple: #7400b8;
--color-violet: #c77dff;
--color-lavender: #e0aaff;
--color-pink: #ffcfd2;
--color-peach: #f3d5b5;
大胆なコントラストと原色の組み合わせ。スタートアップ、クリエイティブ、Web3に。
/* Neo Brutalism */
--color-black: #000000;
--color-yellow: #ffd400;
--color-orange: #ff4d00;
--color-white: #ffffff;
--color-purple: #3d348b;
自然界のオーロラからインスパイアされたティール&グリーン。エコテック、ウェルネスに。
/* Aurora */
--color-dark: #042a2b;
--color-teal: #2a9d8f;
--color-green: #52b788;
--color-mint: #95d5b2;
--color-light: #d8f3dc;