1 红色 #D24D57

2 绿色 #26A65B

3 橙色 #EB7347

4 黑色 #2C3E50

5 暗绿色 #84AF9B

6 橙红色 #FC9D99

7 草绿色 #AEDD81

8 蓝色 #00CCFF

9 灰色 #D0D0D0

10 渐变

代码：

background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);

11 JS 随机颜色
代码：

function randomHexColor() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位hex = '0' + hex;}return '#' + hex; //返回‘#'开头16进制颜色}

12 JS 字体 渐变色（自定义）
代码：

//挑选自己喜欢的双色，调用gradient()，修改dom对象// var ColorA = "#c597ff";var ColorA = "#be00ff";// var ColorB = "#73e7a9";var ColorB = "#e70065";// 颜色#FF00FF格式转为Array(255,0,255)function color2rgb(color){var r = parseInt(color.substr(1, 2), 16);var g = parseInt(color.substr(3, 2), 16);var b = parseInt(color.substr(5, 2), 16);return new Array(r, g, b);}// 颜色Array(255,0,255)格式转为#FF00FFfunction rgb2color(rgb){var s = "#";for (var i = 0; i < 3; i++){var c = Math.round(rgb[i]).toString(16);if (c.length == 1)c = '0' + c;s += c;}return s.toUpperCase();}// 生成渐变function gradient(){let myText = document.querySelector("#d1");var str = myText.innerText;var result = "";var Step = str.length - 1;var Gradient = new Array(3);var A = color2rgb(ColorA);var B = color2rgb(ColorB);for (var N = 0; N <= Step; N++){for (var c = 0; c < 3; c++) // RGB通道分别进行计算{Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;}result += "<font color=" + rgb2color(Gradient) +">" + str.charAt(N) + "</font>";}myText.innerHTML = result;};

13 CSS 炫彩字体

代码：

#name {font-size: 200px;font-weight: 900;color: #8c888b;background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;/*设置字体颜色透明*/-webkit-background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}

14 CSS div边框 阴影

代码：

<div class="image"><img src="default.jpg" /></div>.image{box-shadow: 0 0 3px #000;}