目的別カラーパレットガイド

🎨 目的別カラーパレットガイド

🌈 配色の心理学

色には感情や印象を伝える力があります。適切な色の組み合わせで、ウェブサイトの雰囲気を大きく変えられます。

1. クール（都会的・モダン）🌃

カラーパレット

プライマリ

#2C3E50

セカンダリ

#34495E

アクセント

#3498DB

背景色

#ECF0F1

使用例

body {
    background-color: #ECF0F1;
    color: #2C3E50;
}
.header {
    background-color: #34495E;
    color: white;
}
.button {
    background-color: #3498DB;
}

2. 女性向け（柔らかく、優しい）💕

カラーパレット

プライマリ

#FF69B4

セカンダリ

#FFB6C1

アクセント

#9370DB

背景色

#FFF0F5

使用例

body {
    background-color: #FFF0F5;
    color: #333;
}
.header {
    background-color: #FF69B4;
    color: white;
}
.button {
    background-color: #9370DB;
}

3. ポップ（元気、楽しい）🎉

カラーパレット

プライマリ

#FF6B6B

セカンダリ

#4ECDC4

アクセント

#FFD93D

背景色

#F7FFF7

使用例

body {
    background-color: #F7FFF7;
    color: #333;
}
.header {
    background-color: #FF6B6B;
    color: white;
}
.button {
    background-color: #4ECDC4;
}

4. エレガント（洗練された）✨

カラーパレット

プライマリ

#2F4F4F

セカンダリ

#708090

アクセント

#D3D3D3

背景色

#FFFFFF

使用例

body {
    background-color: white;
    color: #2F4F4F;
}
.header {
    background-color: #2F4F4F;
    color: white;
}
.button {
    background-color: #708090;
}

5. 高級感（豪華、高品質）💎

カラーパレット

プライマリ

#8B0000

セカンダリ

#4B0082

アクセント

#FFD700

背景色

#F5F5F5

使用例

body {
    background-color: #F5F5F5;
    color: #4B0082;
}
.header {
    background-color: #8B0000;
    color: white;
}
.button {
    background-color: #FFD700;
    color: black;
}

6. 爽やか（清潔、さわやか）🍃

カラーパレット

プライマリ

#87CEEB

セカンダリ

#98FB98

アクセント

#FFFFFF

背景色

#F0FFFF

使用例

body {
    background-color: #F0FFFF;
    color: #333;
}
.header {
    background-color: #87CEEB;
    color: white;
}
.button {
    background-color: #98FB98;
}