前端ABCbootcss官网有个这个页面，看了后觉得蛮好看的 自己写了一个玩玩儿。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>web安全色</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-size: 12px;
background-color: #efefef;
}
h1 {
height: 100px;
line-height: 100px;
font-size: 36px;
text-align: center;
}
.color-list {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
width: 1000px;
margin: 0 auto;
justify-content: space-between;
align-items: space-between;
flex-wrap: wrap;
overflow-y: auto;
}
.color-item {
width: 150px;
height: 190px;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 3px 2px 3px #ccc;
}
.color-block {
width: 148px;
height: 130px;
border-radius: 5px;
border-bottom: 1px solid #ccc;
}
.color-code {
height: 36px;
line-height: 18px;
padding-left: 10px;
margin-top: 10px;
}
.color-code strong {
margin-right: 14px;
}
</style>
</head>
<body>
<h1>WEB安全色DEMO</h1>
<div class="color-list" id="color-list"></div>
<script>
window.onload = () => {
let format = (num) => ('0' + num.toString(16)).slice(-2)
let arr = [0, 0, 0],
dom = []
while (arr[0] <= 5) {
let arr2 = arr.map((ele) => ele * 51)
let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),
rgb = arr2.join(', ')
arr[2]++
if (arr[2] > 5) {
arr[2] = 0
arr[1]++
if (arr[1] > 5) {
arr[0]++
arr[1] = 0
}
}
dom.push(`<div class="color-item">
<div class="color-block" style="background-color: ${hex};"></div>
<div class="color-code">
<p><strong>HEX:</strong><span>${hex}</span></p>
<p><strong>RGB:</strong><span>${rgb}</span></p>
</div></div>`)
}
document.querySelector('#color-list').innerHTML = dom.join('')
setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)
}
</script>
</body>
</html>