网页元素色彩样式生成器

CSS代码

/* 主题色变量（可维护、可扩展） */
:root {
  --brand-primary: #2563EB;        /* 用户提供的主色 */
  --brand-primary-hover: #1D4ED8;  /* 更深一阶：悬停态 */
  --brand-primary-active: #1E40AF; /* 更深两阶：按下态 */
  --brand-primary-contrast: #ffffff; /* 文本对比色 */
  --brand-primary-outline: #93C5FD;  /* 聚焦可视化轮廓色 */
}

/* 元素选择器：应用于所有 <button> */
button {
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
  background-color: var(--brand-primary);
  color: var(--brand-primary-contrast);
  border-radius: 0.5rem;
  /* 兼容性填充：先写传统，再写逻辑属性 */
  padding: 0.5rem 1rem;        /* fallback */
  padding-block: 0.5rem;
  padding-inline: 1rem;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 20ms ease;
}

/* 悬停态：略微加深，强化可感知性 */
button:hover {
  background-color: var(--brand-primary-hover);
}

/* 键盘可访问态：清晰的聚焦轮廓 */
button:focus-visible {
  outline: 2px solid var(--brand-primary-outline);
  outline-offset: 2px;
}

/* 按下态：更深色并轻微位移反馈 */
button:active {
  background-color: var(--brand-primary-active);
  transform: translateY(0.5px);
}

/* 禁用态：降低显著度，避免误操作 */
button:disabled,
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* 无动画偏好：尊重用户设置 */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

样式说明

• 选择器类型说明

  • 使用元素选择器 button，直接针对所有按钮元素生效，适合快速统一主题色。
  • 若需局部生效，建议在容器上作用域或改用类选择器（例如 .btn--primary）以避免全局影响。

• 色彩属性应用方式

  • 主色通过 background-color 应用为按钮背景，文本色采用白色提高对比度。
  • 使用 CSS 变量管理色彩，便于不同状态（hover/active/focus）统一维护与扩展。
  • 提供对比色与聚焦轮廓色，确保在交互与可访问性场景中的可辨识性。

• 浏览器兼容性提示

  • 十六进制色值 #2563EB 符合 W3C 标准，现代浏览器全面支持。
  • CSS 自定义属性（变量）在现代浏览器支持良好；IE 11不支持，如需兼容可在构建阶段用预处理器输出静态色值或在规则中重复声明为回退。
  • 使用了逻辑属性 padding-block/padding-inline；已提供传统 padding 作为回退，低版本浏览器仍能正常显示。
  • 对比度说明：#2563EB 背景与 #ffffff 文本对比度约为 4.77:1，满足 WCAG AA 正文文本要求。

• 可能的扩展建议

  • 主题化：在 :root 中增加更多语义化变量（如 --brand-secondary、--brand-danger）以覆盖不同功能按钮。
  • 深浅模式：可根据 prefers-color-scheme 切换轮廓色或阴影强度，提升暗色模式体验。
  • 作用域化：在特定模块容器（例如 .app-toolbar button）中覆盖变量，做到局部差异化而不破坏全局。
  • 状态一致性：为禁用态保持背景色不变而通过降低不透明度处理，保证品牌识别同时避免误触。

使用示例

<!-- 全局主题色：将上方 CSS 插入 <style> 或独立样式文件 -->
<button type="button">主色按钮</button>

<!-- 禁用态 -->
<button type="button" disabled>主色按钮（禁用）</button>

<!-- 作用域示例：仅在特定区域强化主色（可选） -->
<div class="toolbar">
  <button type="button">工具栏按钮</button>
</div>