css颜色表制作
CSS 颜色表制作方法
使用 CSS 创建颜色表可以通过多种方式实现，以下是几种常见的方法：
内联样式或外部样式表定义
通过 CSS 类或 ID 选择器定义颜色样式，例如：
.color-swatch {
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.primary-red {
background-color: #FF0000;
}
.primary-blue {
background-color: #0000FF;
}HTML 结构示例
在 HTML 中为每个颜色创建对应的元素：
<div class="color-swatch primary-red"></div>
<div class="color-swatch primary-blue"></div>使用 CSS 变量
定义可复用的颜色变量，便于统一管理：
:root {
--primary-red: #FF0000;
--primary-blue: #0000FF;
}
.color-swatch {
background-color: var(--primary-red);
}动态生成颜色表
通过 JavaScript 动态创建颜色块（假设颜色数组已存在）：
const colors = ['#FF0000', '#00FF00', '#0000FF'];
colors.forEach(color => {
const swatch = document.createElement('div');
swatch.style.backgroundColor = color;
document.body.appendChild(swatch);
});响应式布局优化
使用 CSS Grid 或 Flexbox 实现自适应布局：
.color-palette {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
}添加交互效果
为颜色块增加悬停提示功能：
.color-swatch:hover::after {
content: attr(data-hex);
position: absolute;
background: white;
padding: 3px;
}完整示例代码
结合 HTML/CSS 的完整实现：
<style>
.palette {
display: flex;
flex-wrap: wrap;
}
.swatch {
width: 80px;
height: 80px;
margin: 5px;
position: relative;
}
.swatch:hover::before {
content: attr(data-name);
position: absolute;
bottom: -20px;
}
</style>
<div class="palette">
<div class="swatch" style="background:#FF0000" data-name="Red"></div>
<div class="swatch" style="background:#00FF00" data-name="Green"></div>
</div>颜色表扩展功能
颜色代码显示
在颜色块上叠加显示 HEX/RGB 值：
.swatch::after {
content: attr(data-hex);
color: white;
text-shadow: 0 0 2px black;
}Sass/Less 预处理器
使用预处理器生成系统化颜色表：
$colors: (
"red": #FF0000,
"blue": #0000FF
);
@each $name, $color in $colors {
.color-#{$name} {
background-color: $color;
}
}注意事项
- 确保颜色对比度符合 WCAG 可访问性标准
- 考虑为色盲用户提供文字标签
- 移动端需调整色块尺寸以适应触控操作
- 深色模式下的颜色表现需要单独测试
通过以上方法可以创建出功能完善且美观的 CSS 颜色表，适用于设计系统、风格指南或前端组件库等场景。
