カラーパレット
baby-ai.jp で使用している全カラーの一覧
📚使い方
🎨各色をクリックすると、Tailwind CSSのクラス名やHEXコードがコピーできます
🌸新規ページはパステルカラーパレットを優先的に使用してください
💡テキストには十分なコントラスト比を確保（brand.600-900推奨）
パステルカラーパレット（女性向けデザイン）
出産前後の母親が安心できる、優しく温かみのある12色のパステルカラー
桃色（ピーチ）
温かみ
C2 M20 Y20 K0
クリーム
優しさ
C1 M10 Y20 K0
淡黄色（ライトイエロー）
明るさ
C2 M1 Y20 K0
ミント
爽やかさ
C10 M1 Y20 K0
柔緑（ソフトグリーン）
安らぎ
C21 M2 Y20 K0
水色（アクア）
清潔感
C21 M1 Y10 K0
空色（スカイブルー）
開放感
C21 M1 Y2 K0
藤色（ペリウィンクル）
上品さ
C20 M10 Y2 K0
ラベンダー
リラックス
C20 M21 Y1 K0
藤色（モーヴ）
優雅さ
C11 M20 Y1 K0
桃色（ピンク）
愛らしさ
C2 M20 Y2 K0
ローズ
柔らかさ
C2 M20 Y10 K0
ブランドカラー（プライマリー）
ブルーグレー系の落ち着いたカラーパレット
Brand 50
最も薄い - 背景用
Brand 100
薄い背景
Brand 200
セクション背景
Brand 300
ボーダー・区切り線
Brand 400
薄いテキスト
Brand 500
通常テキスト
Brand 600
見出し
Brand 700
濃いテキスト
Brand 800
最も濃いテキスト
Brand 900
最も濃い
アクセントカラー（コーラル系）
注目を集めるアクションやCTAに使用
Accent 50
最も薄い
Accent 100
薄い
Accent 200
明るい
Accent 300
やや明るい
Accent 400
中間
Accent 500
メインアクセント
Accent 600
濃い
Accent 700
より濃い
Accent 800
かなり濃い
Accent 900
最も濃い
セカンダリーカラー（ティール系）
サブアクションや補助的な強調に使用
Secondary 50
最も薄い
Secondary 100
薄い
Secondary 200
明るい
Secondary 300
やや明るい
Secondary 400
中間
Secondary 500
メインセカンダリー
Secondary 600
濃い
Secondary 700
より濃い
Secondary 800
かなり濃い
Secondary 900
最も濃い
ウォームグレー
暖かみのあるグレースケール
Neutral 50
最も薄い
Neutral 100
薄い
Neutral 200
明るい
Neutral 300
やや明るい
Neutral 400
中間
Neutral 500
通常
Neutral 600
濃い
Neutral 700
より濃い
Neutral 800
かなり濃い
Neutral 900
最も濃い
🎯使用シーン別推奨カラー
ヒーローセクション
peach, cream, lightYellow
ボタン・CTA
rose, pink, lavender
アクセント・強調
mint, aqua, skyBlue
セクション区切り
softGreen, periwinkle
テキスト背景
cream, lightYellow
カード背景
全色を適度に配分
⚠️配色の注意事項
❌複数の強い色の隣接を避ける（視覚的疲労の原因）
❌同系色の過度な使用を避ける（単調さの原因）
✅補色または類似色のバランスの取れた配置を推奨