Color Library - CSS颜色可视化库

已复制到剪贴板

使用说明

1. 引入颜色库

将颜色库CSS文件引入到你的项目中，或者直接复制颜色变量定义到你的主CSS文件中。

<link rel="stylesheet" href="colors.css">

2. 基本使用方法

使用CSS变量（Custom Properties）语法引用颜色：

.element {
  background-color: var(--color-blue-500);
  color: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

也可以在HTML元素的style属性中直接使用：

<div style="color: var(--color-green-600);">
  这是一段绿色的文本
</div>

3. 语义化颜色使用

使用语义化颜色可以使代码更具可读性和可维护性：

/* 成功提示 */
.success-message {
  background-color: var(--color-success-lightest);
  border-left: 4px solid var(--color-success);
  color: var(--color-success-dark);
}

/* 错误提示 */
.error-message {
  background-color: var(--color-danger-lightest);
  border-left: 4px solid var(--color-danger);
  color: var(--color-danger-dark);
}

4. 定制与扩展

你可以根据项目需求修改颜色值，特别是主题色部分：

:root {
  /* 自定义品牌主色 */
  --color-primary: #2c3e50;
  --color-primary-light: #34495e;
  --color-primary-dark: #1a252f;
  
  /* 添加新的颜色 */
  --color-teal-500: #00b5ad;
  --color-teal-600: #008080;
}

颜色库采用模块化设计，便于根据项目需求进行扩展和定制。

语义化颜色

语义化颜色用于表示特定的状态和功能，使界面更加直观易懂，增强用户体验。

成功状态

--color-success-lightest

#f6ffed

--color-success-lighter

#eaffd0

--color-success-light

#b7eb8f

--color-success

#52c41a

--color-success-dark

#237804

用于表示操作成功、完成状态等积极信息。

警告状态

--color-warning-lightest

#fffbf0

--color-warning-lighter

#fff7e6

--color-warning-light

#ffe699

--color-warning

#ffc53d

--color-warning-dark

#d48806

用于表示需要注意、可能存在问题的警告信息。

错误/危险状态

--color-danger-lightest

#fff5f5

--color-danger-lighter

#ffe3e3

--color-danger-light

#ffa8a8

--color-danger

#ff4d4f

--color-danger-dark

#cf1322

用于表示操作错误、删除、危险操作等负面信息。

信息状态

--color-info-lightest

#f0f7ff

--color-info-lighter

#e6f0ff

--color-info-light

#91d5ff

--color-info

#40a9ff

--color-info-dark

#096dd9

用于表示提示、说明、帮助等中性信息内容。

所有颜色

未找到匹配的颜色