简介

以下是一组基于白色背景的六组配色方案，每组包含主色、辅助色和强调色，非常适合用于仪表板、图表和UI界面设计。

1.配色方案概览

组别	主色	辅助色	强调色	背景色
蓝色系	#2196F3	#64B5F6	#1976D2	#FFFFFF
绿色系	#4CAF50	#81C784	#388E3C	#FFFFFF
红色系	#F44336	#EF5350	#D32F2F	#FFFFFF
紫色系	#9C27B0	#BA68C8	#7B1FA2	#FFFFFF
橙色系	#FF9800	#FFB74D	#F57C00	#FFFFFF
青色系	#00BCD4	#4DD0E1	#0097A7	#FFFFFF

配色方案特点

• 高对比度：每组颜色都有足够的对比度，确保良好的可读性。
• 视觉层次：每组颜色都有主色、辅助色和强调色，形成丰富的视觉效果。
• 易用性：颜色命名直观，容易理解和记忆。
• 响应式：hover效果增强了交互体验。

应用示例

按钮样式

<template>
  <div>
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <button class="btn btn-accent">Accent Button</button>
  </div>
</template>

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #2196F3; /* 蓝色系主色 */
}

.btn-primary:hover {
  background-color: #1976D2; /* 蓝色系强调色 */
}

.btn-secondary {
  background-color: #64B5F6; /* 蓝色系辅助色 */
}

.btn-secondary:hover {
  background-color: #2196F3; /* 蓝色系主色 */
}

.btn-accent {
  background-color: #1976D2; /* 蓝色系强调色 */
}

.btn-accent:hover {
  background-color: #0D47A1; /* 更深的蓝色 */
}
</style>

卡片样式

<template>
  <div class="card-container">
    <div class="card card-blue">
      <h3>Blue Card</h3>
      <p>This is a card with blue color scheme.</p>
    </div>
    <div class="card card-green">
      <h3>Green Card</h3>
      <p>This is a card with green color scheme.</p>
    </div>
  </div>
</template>

<style>
.card-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: white;
  flex: 1;
}

.card-blue {
  background-color: #2196F3; /* 蓝色系主色 */
}

.card-green {
  background-color: #4CAF50; /* 绿色系主色 */
}

.card h3 {
  margin-top: 0;
}
</style>

总结

这组配色方案非常适合用于仪表板、数据可视化、按钮、卡片等UI元素，既美观又实用。希望这些配色方案能为你的Vue3项目增添色彩！