一个展示预设颜色的HTML页面，使用您提供的颜色预设数组，创建一个美观的颜色展示界面
Vue风格颜色矩阵
精心设计的6×6颜色矩阵，包含6种不同色系，每行6个颜色
颜色值已复制到剪贴板！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue风格颜色矩阵展示器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
color: #2c3e50;
}
.container {
max-width: 1200px;
width: 100%;
}
header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.logo-icon {
font-size: 2.8rem;
color: #42b883;
}
h1 {
font-size: 2.8rem;
margin-bottom: 5px;
background: linear-gradient(90deg, #42b883, #35495e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.subtitle {
font-size: 1.2rem;
color: #5a6c7d;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.color-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
margin-top: 20px;
background: white;
padding: 25px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.color-row-header {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
margin-bottom: 10px;
}
.row-title {
grid-column: 1 / -1;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
padding: 12px;
margin-bottom: 10px;
border-radius: 10px;
background: #f8f9fa;
}
.color-card {
height: 140px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.color-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
.color-preview {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.color-info {
padding: 10px;
background: rgba(255, 255, 255, 0.85);
text-align: center;
font-weight: 600;
font-size: 0.9rem;
}
.color-hex {
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.color-card:hover .copy-btn {
opacity: 1;
}
.copy-btn:hover {
background: white;
transform: scale(1.1);
}
.copy-notification {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(66, 184, 131, 0.9);
color: white;
padding: 12px 25px;
border-radius: 8px;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
display: flex;
align-items: center;
gap: 10px;
}
.copy-notification.show {
opacity: 1;
}
.footer {
margin-top: 40px;
text-align: center;
color: #5a6c7d;
padding: 20px;
font-size: 0.9rem;
border-top: 1px solid #eaeaea;
width: 100%;
}
@media (max-width: 992px) {
.color-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.color-grid {
grid-template-columns: repeat(2, 1fr);
}
h1 {
font-size: 2.2rem;
}
}
@media (max-width: 480px) {
.color-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-palette logo-icon"></i>
<h1>Vue风格颜色矩阵</h1>
</div>
<p class="subtitle">
精心设计的6×6颜色矩阵，包含6种不同色系，每行6个颜色
</p>
</header>
<div class="color-grid" id="colorGrid">
<!-- 颜色将通过JS动态生成 -->
</div>
</div>
<div class="copy-notification" id="copyNotification">
<i class="fas fa-check-circle"></i>
<span>颜色值已复制到剪贴板！</span>
</div>
<div class="footer">
<p>© 2023 Vue风格颜色矩阵 | 共展示 <span id="colorCount">36</span> 个预设颜色</p>
</div>
<script>
// 颜色预设数组 - 6行每行6个颜色
const colorPresets = [
// 第一行：白色到黑色（灰色系）
[
{ hex: '#FFFFFF', name: '纯白' },
{ hex: '#F8F9FA', name: '雪白' },
{ hex: '#E9ECEF', name: '浅灰' },
{ hex: '#DEE2E6', name: '银灰' },
{ hex: '#6C757D', name: '中灰' },
{ hex: '#212529', name: '深黑' }
],
// 第二行：蓝色系
[
{ hex: '#E7F5FF', name: '浅天蓝' },
{ hex: '#D0EBFF', name: '天蓝' },
{ hex: '#74C0FC', name: '湖蓝' },
{ hex: '#339AF0', name: '钴蓝' },
{ hex: '#1C7ED6', name: '深蓝' },
{ hex: '#1864AB', name: '海军蓝' }
],
// 第三行：绿色系
[
{ hex: '#E6FCF5', name: '薄荷绿' },
{ hex: '#C3FAE8', name: '春绿' },
{ hex: '#96F2D7', name: '翡翠绿' },
{ hex: '#40C057', name: '草绿' },
{ hex: '#2F9E44', name: '森林绿' },
{ hex: '#2B8A3E', name: '深绿' }
],
// 第四行：紫色系
[
{ hex: '#F3F0FF', name: '薰衣草' },
{ hex: '#E5DBFF', name: '淡紫' },
{ hex: '#D0BFFF', name: '紫藤' },
{ hex: '#B197FC', name: '紫罗兰' },
{ hex: '#845EF7', name: '皇家紫' },
{ hex: '#5F3DC4', name: '深紫' }
],
// 第五行：红色系
[
{ hex: '#FFF5F5', name: '粉红' },
{ hex: '#FFE3E3', name: '玫瑰红' },
{ hex: '#FFC9C9', name: '珊瑚红' },
{ hex: '#FF6B6B', name: '鲜红' },
{ hex: '#F03E3E', name: '绯红' },
{ hex: '#C92A2A', name: '深红' }
],
// 第六行：其他色系（黄色、橙色、青色等）
[
{ hex: '#FFF9DB', name: '浅黄' },
{ hex: '#FFEC99', name: '柠檬黄' },
{ hex: '#FFD43B', name: '金黄' },
{ hex: '#FFA94D', name: '橙黄' },
{ hex: '#FF922B', name: '橙红' },
{ hex: '#20C997', name: '青绿' }
]
];
// 行标题
const rowTitles = [
"灰色系 (白到黑)",
"蓝色系",
"绿色系",
"紫色系",
"红色系",
"其他色系"
];
// 获取DOM元素
const colorGrid = document.getElementById('colorGrid');
const copyNotification = document.getElementById('copyNotification');
const colorCount = document.getElementById('colorCount');
// 计算总颜色数量
const totalColors = colorPresets.reduce((total, row) => total + row.length, 0);
colorCount.textContent = totalColors;
// 创建颜色网格
colorPresets.forEach((row, rowIndex) => {
// 添加行标题
const rowTitle = document.createElement('div');
rowTitle.className = 'row-title';
rowTitle.textContent = rowTitles[rowIndex];
colorGrid.appendChild(rowTitle);
// 添加颜色卡片
row.forEach(color => {
const colorCard = document.createElement('div');
colorCard.className = 'color-card';
// 计算文字颜色（深色背景用白色文字，浅色背景用黑色文字）
const rgb = hexToRgb(color.hex);
const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
const textColor = brightness > 128 ? '#000' : '#FFF';
colorCard.innerHTML = `
<div class="color-preview" style="background-color: ${color.hex};">
<span style="color: ${textColor}; font-size: 1.1rem; font-weight: bold; text-shadow: 0 0 3px rgba(0,0,0,0.3);">${color.name}</span>
</div>
<div class="color-info">
<span class="color-hex">${color.hex}</span>
</div>
<button class="copy-btn" data-color="${color.hex}">
<i class="far fa-copy"></i>
</button>
`;
colorGrid.appendChild(colorCard);
});
});
// 添加复制功能
document.querySelectorAll('.copy-btn').forEach(button => {
button.addEventListener('click', function(e) {
e.stopPropagation();
const color = this.getAttribute('data-color');
copyToClipboard(color);
// 显示通知
copyNotification.classList.add('show');
setTimeout(() => {
copyNotification.classList.remove('show');
}, 2000);
});
});
// 辅助函数：十六进制转RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// 辅助函数：复制到剪贴板
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
</script>
</body>
</html>
评论 (0)